home

Keyboard accessibile

Make all functionality available from a keyboard
컴포넌트를 이동하는 흔한 방법중 하나는 Tab 키를 사용하는 것 이다. 대부분의 브라우저는 Tab 키 입력 시 다음 실행 가능한 / 활성화 가능한 요소로 이동한다.

Keyboard traps

포인팅 디바이스의 hover로만 접근 할 수 있는 요소
키보드만으로 접근할 수 없는 요소
키보드가 밖으로 이동할 수 없는 요소 → 닫기 버튼이 존재하지 않는 모달 팝업

Keyboard focus

키보드 포커스는 항상 가시적으로 확인 가능해야하며, 논리적인 순서를 따라가야한다.
브라우저마다 각자 기본의 포커스 스타일이 존재, 해당 스타일을 override 하거나 새로 만들어 쓰지 않는게 매우 중요하다.

Tests for keyboard and visual focus

tab to all
모든 상호작용 가능한 요소들이 focus 가능한가 확인한다.
tab away
tab 하여 focus 되는 요소들을 focus out 할 수 있는지 확인한다.
tab order
읽는 순서에 따른 tab 순서를 확인한다.
읽는 순서는 언어에 따라 다르다는 점에 유의한다.
visual focus
실제 비주얼로 포커스의 위치를 확인할 수 있는지 확인한다.
Functionality
키보드로 모든걸 할수 있는지 확인한다. 옵션 활성화 , 선택, 클릭과 같은 모든 동작을 뜻한다.
Drop downs
드랍다운이 키보드로 접근 가능한지 확인한다.
드랍다운을 키보드로 확인할 수 있는지 확인한다.