aria-modal

설명

aria-modal="true"는 dialog나 alertdialog가 모달이라는 것, 즉 열려 있는 동안 대화상자 바깥의 콘텐츠는 사용할 수 없다는 것을 보조기술에 알립니다. 이를 지원하는 화면낭독기는 가상 커서가 대화상자 밖으로 나가지 않도록 바깥 콘텐츠를 탐색 대상에서 제외합니다.

이 속성은 실제로 바깥을 막아 주지 않습니다. 모달이라고 알렸다면 작성자가 다음을 모두 구현해야 합니다. 열릴 때 대화상자 안으로 포커스 이동, Tab·Shift+Tab이 대화상자 안에서만 순환(포커스 가두기), Esc로 닫기, 닫은 뒤 대화상자를 연 요소로 포커스 복귀, 바깥 콘텐츠의 시각적 가림(배경 막). 이 중 하나라도 빠지면 키보드 사용자가 대화상자 뒤의 요소로 빠져나가거나, 화면낭독기 사용자가 대화상자를 찾지 못하게 됩니다.

가능하면 HTML <dialog> 요소를 showModal()로 여는 방법을 우선 검토합니다. 바깥 콘텐츠가 자동으로 비활성(inert)되고 Esc 닫기도 기본 제공되며, 브라우저가 모달 상태를 접근성 API에 전달하므로 aria-modal을 따로 쓸 필요가 없습니다. 사용자 정의 대화상자를 쓴다면 aria-modal="true"와 함께 바깥 콘텐츠에 inert를 설정하는 방식이 가장 확실합니다.

바깥 콘텐츠를 계속 사용할 수 있는 비모달 대화상자(채팅 창, 찾기 패널 등)에는 true를 쓰면 안 됩니다. 사용할 수 있는 콘텐츠가 화면낭독기에서 사라지기 때문입니다. 또한 대화상자에는 aria-labelledby(제목)로 이름을 주고, 필요하면 aria-describedby로 안내 문구를 연결합니다.

테스트할 때는 대화상자가 열린 상태에서 Tab을 계속 눌러도 바깥으로 포커스가 나가지 않는지, 화면낭독기의 가상 커서(방향키)로 바깥 내용이 읽히지 않는지, Esc로 닫히고 원래 버튼으로 포커스가 돌아오는지 확인합니다.

값

사용 예

<button type="button" id="open">배송지 변경</button>
<dialog id="dlg" aria-labelledby="dlg-title">
  <h2 id="dlg-title">배송지 변경</h2>
  …
  <button type="button" id="close">닫기</button>
</dialog>
<script>
  open.addEventListener('click', function () { dlg.showModal(); });
  close.addEventListener('click', function () { dlg.close(); });
</script>

<div role="dialog" aria-modal="true" aria-labelledby="dlg-title" aria-describedby="dlg-desc">
  <h2 id="dlg-title">변경 사항을 저장할까요?</h2>
  <p id="dlg-desc">저장하지 않으면 입력한 내용이 사라집니다.</p>
  <button type="button">저장</button>
  <button type="button">취소</button>
</div>

var opener;
function openDialog(dlg) {
  opener = document.activeElement;
  document.getElementById('page').inert = true;   // 바깥 비활성
  dlg.hidden = false;
  dlg.querySelector('input, button').focus();       // 안으로 포커스 이동
}
function closeDialog(dlg) {
  dlg.hidden = true;
  document.getElementById('page').inert = false;
  opener.focus();                                   // 포커스 복귀
}

<div class="layer-popup" role="dialog" aria-modal="true">
  <p>이벤트 안내</p>
  <a href="#" class="close">닫기</a>
</div>

직접 해 보기

“배송지 변경”을 누르면 모달 대화상자가 열립니다. Tab이 대화상자 안에서만 순환하는지, Esc로 닫히고 버튼으로 포커스가 돌아오는지 확인해 보세요.

화면낭독기에서는

사용 지침

사용할 수 있는 역할

관련 속성·패턴

이 속성을 쓰는 패턴

참고 자료

• WAI-ARIA 1.2 명세: aria-modal (새 창)
• APG: Dialog (Modal) 패턴 (새 창)
• MDN: aria-modal (새 창)
• MDN: <dialog> 요소 (새 창)