시각장애인을 위한 모달 컴포넌트 접근성 개선

이 게시물은 시각장애인들이 웹 페이지에서 키보드와 스크린 리더를 사용해 모달 컴포넌트를 접근할 때 겪는 어려움을 해결하기 위한 방법들을 설명합니다.

접근성 개선 주요 방법

• aria-태그(예: role="dialog", aria-modal="true", aria-labelledby) 추가로 스크린 리더에 모달임을 명확히 알림
• ESC 키 이벤트 핸들러 구현으로 키보드 사용자가 쉽게 모달 닫기 가능
• 포커스 트랩(Focus Trap) 적용으로 모달 외부로 포커스가 이동하지 않도록 제한

효과

이 세 가지 개선점은 시각장애인들이 모달 내에서 더 쉽고 명확하게 탐색하고 집중할 수 있게 돕습니다.