반응형
비장애인들은 마우스를 사용하여 쉽게 웹 페이지를 탐색하지만 마우스를 사용하지 못하는 키보드 사용자는 키보드로 웹 페이지를 탐색합니다.
따라서 웹 페이지에서 제공하는 모든 기능을 키보드만으로도 사용할 수 있도록 제공해야 합니다.
키보드 사용 보장에 대한 사례들을 살펴보도록 하겠습니다.
사례에 따른 해결 방안
마우스 오버 시 드롭 다운 메뉴가 노출
- 키보드 접근 시에도 드롭 다운 메뉴가 노출되고 메뉴에 접근 가능하도록 구현
자동 롤링 콘텐츠에 마우스 오버 시 전체 콘텐츠가 노출
- 키보드 접근 시에도 전체 콘텐츠가 노출되도록 구현
특정 버튼에 마우스 오버 시 레이어 노출
- 키보드 접근 시에도 레이어가 노출되도록 구현
이미지 또는 초점을 받을 수 없는 요소에 마우스 이벤트 적용
- 마우스로 조작 가능한 컨트롤의 경우 되도록 a링크나 버튼과 같이 초점을 받을 수 있는 요소로 구현
a링크 요소에 href속성이 없는 경우
- 마우스로는 조작이 가능하지만 키보드 접근은 불가능. 따라서 a링크에는 href 속성을 반드시 제공
a링크에 href속성은 있지만 onfocus="this.blur();"가 적용이 되어 있는 경우
- 초점을 초기화 시켜 이후 콘텐츠로 키보드 접근이 불가능하므로 onfocus="this.blur();" 제거하고 구현
키보드가 함정에 빠져 더 이상 키보드 접근이 되지 않는 경우
- 키보드가 함정에 빠지지 않고 마우스 사용시와 동일하게 접근 가능하도록 구현
즉, 마우스로 조작 가능한 기능과 키보드로 조작 가능한 기능이 동일하도록 구현해야 합니다.
반응형
'Spec UP - Frontend > 부스트코스_UI 개발' 카테고리의 다른 글
웹 접근성_조작 가능 (0) | 2020.04.01 |
---|---|
웹 접근성_초점 이동 (0) | 2020.03.31 |
웹 접근성_콘텐츠 간의 구분 (0) | 2020.03.31 |
웹 접근성_자동 재생 금지 (0) | 2020.03.31 |
웹 접근성_텍스트 콘텐츠의 명도 대비 (0) | 2020.03.31 |
댓글