접근성을 고려한 모달을 코드를 작성해보았다.
모달을 열었을 때 tabindex 속성을 추가해서 모달열기 버튼을 탭키로 접근되지 않도록 했다.
aria-hidden을 조절해서 스크린리더에 안읽히도록 조정했다.
See the Pen Untitled by 이아름 (@aahreum) on CodePen.
aira-modal = 'true' => 모달 대화 상자임을 나타냄
role='dialog' => 대화형 창 역할을 함을 나타냄
aria-labelledby='modal-title' => 모달 제목을 나타내는 요소의 ID를 참조함
aria-describedby='modal-desc' => 모달 내용을 나타내는 요소의 ID를 참조함
참고
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
tabindex - HTML: HyperText Markup Language | MDN
The tabindex global attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation.
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal
aria-modal - Accessibility | MDN
The aria-modal attribute indicates whether an element is modal when displayed.
developer.mozilla.org
