본문 바로가기
Spec UP - Frontend/부스트코스_UI 개발

웹 접근성_키보드 사용 보장

by TIS_Ha 2020. 3. 31.
반응형

비장애인들은 마우스를 사용하여 쉽게 웹 페이지를 탐색하지만 마우스를 사용하지 못하는 키보드 사용자는 키보드로 웹 페이지를 탐색합니다.

따라서 웹 페이지에서 제공하는 모든 기능을 키보드만으로도 사용할 수 있도록 제공해야 합니다.

키보드 사용 보장에 대한 사례들을 살펴보도록 하겠습니다.

 

사례에 따른 해결 방안

마우스 오버 시 드롭 다운 메뉴가 노출

- 키보드 접근 시에도 드롭 다운 메뉴가 노출되고 메뉴에 접근 가능하도록 구현

 

자동 롤링 콘텐츠에 마우스 오버 시 전체 콘텐츠가 노출

- 키보드 접근 시에도 전체 콘텐츠가 노출되도록 구현

 

특정 버튼에 마우스 오버 시 레이어 노출

- 키보드 접근 시에도 레이어가 노출되도록 구현

 

이미지 또는 초점을 받을 수 없는 요소에 마우스 이벤트 적용

- 마우스로 조작 가능한 컨트롤의 경우 되도록 a링크나 버튼과 같이 초점을 받을 수 있는 요소로 구현

 

a링크 요소에 href속성이 없는 경우

- 마우스로는 조작이 가능하지만 키보드 접근은 불가능. 따라서 a링크에는 href 속성을 반드시 제공

 

a링크에 href속성은 있지만 onfocus="this.blur();"가 적용이 되어 있는 경우

- 초점을 초기화 시켜 이후 콘텐츠로 키보드 접근이 불가능하므로 onfocus="this.blur();" 제거하고 구현

 

키보드가 함정에 빠져 더 이상 키보드 접근이 되지 않는 경우

- 키보드가 함정에 빠지지 않고 마우스 사용시와 동일하게 접근 가능하도록 구현

 

즉, 마우스로 조작 가능한 기능과 키보드로 조작 가능한 기능이 동일하도록 구현해야 합니다.

반응형

댓글