Web Accessibility Tutorial (A11y) - Keyboard Navigation, Aria Tags, Contrast, Semantics and more!
- 웹 접근성은 시각 장애나 운동 장애가 있는 사람들만을 위한 것이 아니다. 손상으로 마우스 사용이 어려운 경우 키보드 탐색의 중요성을 강조. ♿
- 키보드 탐색을 지원하는 웹사이트는 모든 사용자에게 접근성을 제공한다. 탭 키를 이용한 웹사이트 요소 순차적 선택을 예시로 설명. ⌨️
- 기본 HTML 요소(버튼, 라디오 버튼, 체크박스)는 키보드 탐색을 기본적으로 지원하지만, 사용자 정의 요소는 추가적인 작업이 필요하다. 별점 평가 요소를 예시로 제시. ⭐
tabindex
속성을 이용하여 사용자 정의 요소에 키보드 탐색 기능을 추가할 수 있다. tabindex="0"
은 요소를 탐색 순서에 포함시키고, tabindex
값이 0보다 큰 경우 탐색 순서를 조정한다. 🔢
- 사용자 정의 요소에 키보드 이벤트 처리기(
onkeydown
)를 추가하여 Enter 또는 Space 키 입력에 반응하도록 만들 수 있다. 사용자 정의 요소의 접근성을 높이는 방법을 설명. ➡️