들어가기 전에

키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 합니다.

초점 이동에 대한 사례들을 살펴보도록 하겠습니다.

핵심키워드

• 논리적 초점 이동
• 초점 표시
  

학습하기 

논리적 초점 이동

초점은 일반적으로 좌에서 우, 상에서 하로 이동할 것이라고 예측합니다.

스크린리더 사용자와 키보드 사용자 모두 초점이 논리적으로 이동해야 웹 페이지를 탐색하는데 어려움이 없습니다. 

따라서 초점 이동은 논리적 구조로 마크업하여 사용자가 예측하는 이동 순서와 일치해야 합니다.

예를 들어, 초점 이동이 아이디 입력, 비밀번호 입력, 로그인 버튼, 아이디 저장 순서이면 로그인 버튼을 먼저 클릭하기 때문에 아이디 저장을 못할 가능성이 있습니다.

따라서 아이디, 비밀번호 입력 후 아이디 저장에 먼저 초점이 이동했다가 로그인 버튼으로 논리적으로 초점이 이동해야 합니다.

tabindex

추가적으로 tabindex 속성을 이용하여 초점 이동을 강제로 변경하는 경우도 오류인데요, 기본적으로 마크업이 논리적으로 이루어져 있다면 굳이 tabindex를 사용할 이유는 없습니다.

* Tabindex에 대한 자세한 내용은 페이지에 있는 링크 참고

레이어 팝업

초점 이동 순서 : 레이어 팝업 노출시키는 컨트롤 > 레이어 팝업 내부 > 레이어 팝업 닫기 > 레이어 팝업 노출시키는 컨트롤

오류 사례에서는 보통 초점이 레이어 내부로 가지 않고 노출만 시킨 상태로 다음 컨트롤로 이동하기 때문에 초점이 레이어 뒤로 가서 가려지는 경우가 있습니다.

초점이 보이지 않으면 키보드 사용자는 페이지를 잘 이용할 수 없으므로 논리적으로 초점을 이동시켜야 합니다.

초점 표시

마우스가 아닌 키보드로 웹을 사용하는 분들은 초점이 어디에 위치하는지 알 수 있어야 합니다.

시각적으로 초점이 보이지 않으면 어디에 초점이 있는지 알 수가 없어서 컨트롤을 선택할 수 없습니다.

따라서 키보드 접근 시 해당 컨트롤이 초점을 받았음을 시각적으로 구별할 수 있어야 합니다.

"hideFocus"적용하거나 CSS에서 "outline:none"처리를 하거나 8번 키보드 사용 보장에서 언급했던 onfocus="this.blur();"를 사용하면 전부 초점이 보이지 않게 되어 주의하셔야 합니다.

참고링크