role="alert"

설명

alert는 사용자가 즉시 알아야 할 중요한 메시지를 담는 요소입니다. 내용이 나타나거나 바뀌면 화면낭독기가 하던 낭독을 끊고 바로 읽어 줍니다. 세션 만료 경고, 저장 실패, 연결 끊김, 양식 제출 오류 요약 같은 경우에 씁니다.

암묵적 속성

alert는 aria-live="assertive"와 aria-atomic="true"를 암묵적으로 가집니다. 따로 적지 않아도 되며, 일부가 바뀌어도 메시지 전체를 다시 읽습니다. 브라우저는 alert가 생기면 운영체제 접근성 API에 시스템 경고 이벤트를 보내기도 합니다.

포커스는 옮기지 않는다

명세에 따르면 alert는 포커스를 받지 않아도 처리되며, 그래서 사용자가 직접 닫아야 하는 alert를 만들면 안 됩니다. 사용자의 응답(확인, 취소)이 필요하고 포커스를 메시지로 옮겨야 한다면 alertdialog를 씁니다.

확실하게 읽히게 하려면

• alert 컨테이너를 페이지에 미리 비워 둔 채 두고, 필요할 때 안의 텍스트를 바꾸는 방식이 가장 안정적입니다. role="alert"가 붙은 요소를 새로 삽입하는 방식도 대부분 동작하지만, 페이지 로드 시점부터 있던 내용은 읽히지 않습니다.
• display:none이나 hidden으로 숨겼다가 보이게 하는 방식은 환경에 따라 읽히지 않을 수 있습니다.
• 같은 문구를 다시 알려야 할 때는 내용을 잠시 비웠다가 다시 넣습니다.

남용하지 않기

assertive 메시지는 사용자가 하던 일을 끊습니다. “저장되었습니다”, “장바구니에 담았습니다”처럼 급하지 않은 결과 안내는 status를 씁니다. 자동으로 사라지는 알림이라면 읽기에 충분한 시간을 줍니다(WCAG 2.2.1).

함께 쓰는 속성

전역 속성(이름·설명 등)은 모든 역할에 쓸 수 있어 생략했습니다.

사용 예

<div role="alert" id="err"></div>

<script>
  // 오류가 생기면 내용만 바꿉니다
  document.getElementById('err').textContent = '네트워크 연결이 끊겼습니다. 다시 시도해 주세요.';
</script>

<div role="alert">
  <p>입력 내용에 오류가 2개 있습니다.</p>
  <ul>
    <li><a href="#email">이메일 형식이 올바르지 않습니다</a></li>
    <li><a href="#pw">비밀번호를 입력해 주세요</a></li>
  </ul>
</div>

<div role="alert">설정이 저장되었습니다.</div>

직접 해 보기

버튼을 누르면 미리 비워 둔 alert 영역에 메시지가 들어갑니다. 화면낭독기를 켜면 포커스가 버튼에 그대로 있어도 메시지가 바로 읽힙니다.

화면낭독기에서는

사용 지침

관련 역할·패턴

이 역할을 쓰는 패턴

참고 자료

• WAI-ARIA 1.2 명세: alert 역할 (새 창)
• APG: Alert 패턴 (새 창)
• WCAG 4.1.3 상태 메시지 이해 (새 창)
• MDN: ARIA 라이브 리전 (새 창)