웹 접근성 가이드 - 초점 이동

< 초점 이동 >

 

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

 

1. 논리적 초점 이동

초점의 이동 순서는 순차적으로 일관성 있게 이동해야 한다.

일반적으로 페이지의 좌측 상단 영역에서 우측 하단 영역으로 이동하는 것이 원칙.

* 키보드의 Tab키(다음으로 이동)와 Shift + Tab(이전으로 이동) 키로 확인*

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

 

• 초점 이동 순서가 순환적이며, 반복적 이어야 한다.
• 페이지에 포함된 모든 링크, 버튼, 입력창에 초점이 가야 한다.
• 사용자가 사용할 수 없는 비활성 요소(버튼, 입력 창 등)에는 초점이 가지 않아야 한다.

2. tabindex

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

 

3. 레이어 팝업

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

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

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

 

4. 초점 표시

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

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

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

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

 

 

 

 

 

 

 

 

 

 

참고 : 

네이버 접근성 가이드(accessibility.naver.com/accessibility)

www.edwith.org/web-accessibility/lecture/46014