role="alertdialog"

설명

alertdialog는 경고 메시지를 담고 있으면서, 열리면 포커스가 대화상자 안의 요소로 이동하는 대화상자입니다. dialog의 하위 역할이고, alert처럼 브라우저가 열릴 때 시스템 경고 이벤트를 보냅니다. alert와 달리 사용자의 응답(확인·취소)을 받습니다.

예: “이 글을 삭제할까요?”, “저장하지 않은 변경 사항이 있습니다. 나가시겠어요?”, “세션이 1분 후 만료됩니다. 연장할까요?”

필수·권장 사항

• 이름 필수: 제목을 aria-labelledby로 연결합니다.
• 메시지 연결: 명세는 경고 문구를 aria-describedby로 참조하라고 합니다(SHOULD). 그래야 열릴 때 제목과 함께 메시지가 읽힙니다.
• 모달로 만들기: 표시되는 동안 키보드·마우스 조작이 대화상자 안에서만 되게 하고 aria-modal="true"를 줍니다.
• 초기 포커스: 열릴 때 대화상자 안의 조작 요소로 포커스를 옮깁니다. 되돌릴 수 없는 작업(삭제)이라면 APG는 가장 덜 파괴적인 버튼(“취소”)에 포커스를 두라고 권장합니다.
• 닫을 때: 열기 전 포커스가 있던 요소(또는 논리적으로 다음 위치)로 포커스를 돌려보냅니다.

HTML과의 관계

전용 HTML 요소는 없지만 <dialog> 요소에 role="alertdialog"를 주는 것이 허용됩니다. 이렇게 하면 showModal()이 제공하는 포커스 가두기, Esc 닫기, 배경 비활성화(inert)를 그대로 쓸 수 있습니다.

dialog와 구분

단순히 정보를 입력받는 창(로그인, 설정)은 dialog입니다. 즉시 주의를 끌어야 하는 경고와 응답이 함께 있을 때만 alertdialog를 씁니다. 브라우저 기본 confirm()/alert()도 접근 가능하지만 꾸밀 수 없고 문구 제어가 제한됩니다.

함께 쓰는 속성

지원 속성

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

키보드 동작

사용 예

<dialog id="confirm" role="alertdialog"
        aria-labelledby="cf-title" aria-describedby="cf-desc">
  <h2 id="cf-title">대출을 취소할까요?</h2>
  <p id="cf-desc">취소하면 예약 순번이 사라지며 되돌릴 수 없습니다.</p>
  <button type="button" id="cf-no" autofocus>돌아가기</button>
  <button type="button" id="cf-yes">대출 취소</button>
</dialog>

<script>
  document.getElementById('confirm').showModal();
</script>

<div role="alertdialog" aria-modal="true"
     aria-labelledby="ad-t" aria-describedby="ad-d">
  <h2 id="ad-t">저장하지 않고 나가시겠어요?</h2>
  <p id="ad-d">작성 중인 서평이 사라집니다.</p>
  <button type="button">계속 작성</button>
  <button type="button">나가기</button>
</div>

<div role="alertdialog">
  <p>정말 삭제하시겠습니까?</p>
  <button>확인</button>
</div>

직접 해 보기

버튼을 누르면 경고 대화상자가 열리고 포커스가 “돌아가기”로 이동합니다. Tab은 대화상자 안에서만 돌고, Esc나 버튼으로 닫으면 포커스가 원래 버튼으로 돌아옵니다.

화면낭독기에서는

사용 지침

관련 역할·패턴

이 역할을 쓰는 패턴

참고 자료

• WAI-ARIA 1.2 명세: alertdialog 역할 (새 창)
• APG: Alert and Message Dialogs 패턴 (새 창)
• HTML Standard: dialog 요소 (새 창)