← 데모 코드 목록보기

모달 접근성 비교

div 기반 모달과 native <dialog>의 포커스 트랩·ESC·포커스 복원 동작을 비교합니다

관련 포스트 읽기 →

나쁜 모달 div 기반

포커스 트랩 없음 — Tab으로 배경 접근 가능
ESC 키로 닫히지 않음
role="dialog" 없음
닫힌 후 포커스 복원 없음

좋은 모달 native <dialog>

포커스 자동 트랩 — 모달 내부에서만 Tab 순환
ESC 키로 닫힘 (브라우저 기본 동작)
aria-modal 자동 처리
닫히면 열기 버튼으로 포커스 복원

포커스 위치 (실시간)

—