프론트엔드
시각장애인을 위해 모달 컴포넌트 접근성 개선하기
두줄요약
시각장애인의 웹 탐색 방식에 맞춰 모달 접근성을 개선하는 방법을 소개했습니다. aria 속성, ESC 닫기, 포커스 트랩으로 키보드 탐색 경험을 보완했습니다.
핵심 내용
- 시각장애인의 웹 탐색 방식과 스크린 리더 관점에서 모달 접근성 문제 정리
role="dialog",aria-modal="true",aria-labelledby로 모달 의미를 명시Escape키 닫기와 focus trap으로 모달 외부 포커스 이동을 방지
적용해볼 점
- 모달이 열렸을 때 접근성 트리에서 팝업 맥락이 드러나는지 확인
- 키보드만으로 닫기와 내부 탐색이 자연스럽게 이어지는지 점검