← 데모 코드 목록보기

모달 접근성 비교

아무 처리 없이 div로 만든 모달과 dialog 요소의 showModal()로 만든 모달을 나란히 두고, 포커스 이동·ESC·포커스 복원을 비교합니다. 모달을 열고 Tab을 눌러 보세요.
관련 포스트 읽기 →
언어 · Language

나쁜 모달 div, 아무 처리 없음

  • 배경을 막지 않음: Tab이 배경으로 나간다
  • ESC로 닫히지 않는다
  • role="dialog"가 없다
  • 닫은 뒤 포커스가 사라진다

좋은 모달 dialog + showModal()

  • 배경이 inert가 되어 Tab이 배경으로 새지 않는다(브라우저 UI로는 나간다)
  • ESC로 닫힌다(브라우저 기본 동작)
  • 대화 상자 역할이 자동으로 붙는다
  • 닫히면 연 버튼으로 포커스가 돌아온다
포커스 위치 (실시간)
-

항목을 삭제하시겠습니까?

이 작업은 되돌릴 수 없습니다.