웹 접근성 지침(KWCAG에 대해) - 9 / 초점 이동

• 웹 접근성 지침(KWCAG에 대해) - 0
• 웹 접근성 지침(KWCAG에 대해) - 1 / 적절한 대체 텍스트 제공
• 웹 접근성 지침(KWCAG에 대해) - 2 / 자막제공
• 웹 접근성 지침(KWCAG에 대해) - 3 / 색에 무관한 콘텐츠 인식
• 웹 접근성 지침(KWCAG에 대해) - 4 / 명확한 지시 사항 제공
• 웹 접근성 지침(KWCAG에 대해) - 5 / 텍스트 콘텐츠의 명도 대비
• 웹 접근성 지침(KWCAG에 대해) - 6 / 자동 재생 금지
• 웹 접근성 지침(KWCAG에 대해) - 7 / 콘텐츠 간의 구분
• 웹 접근성 지침(KWCAG에 대해) - 8 / 키보드 사용 보장

---

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

 

 

오류 사례와 준수 사례

 

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

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

 

 

위 이미지에서 오류 사례의 경우 사용자가 로그인 버튼을 먼저 클릭하기 때문에 아이디 저장 기능을 사용하지 못할 가능성이 있다.

따라서 준수 사례 처럼 아이디 저장에 먼저 초점을 이동시키고 로그인 버튼에 초점을 이동시키는게 논리적으로 옳다.

 

추가적으로 tabindex 속성을 이용하여 초점 이동을 강제로 변경하는 것도 오류인데, 논리적으로 마크업되어 있다면 이 속성을 쓸 필요가 없기 때문이다.

 

 

레이어 팝업

레이어 팝업의 오류 사례는 보통 초점이 레이어 내부로 가지 않고 노출만 시킨 상태에서 다음 컨트롤로 이동한다.

초점 이동 순서를 (레이어 팝업을 노출 시키는 컨트롤 -> 레이어 팝업 내부 -> 레이어 팝업 닫기 버튼 -> 레이어 팝업 노출 시키는 컨트롤) 로 하여 논리적으로 이동 시켜야 한다.

 

 

키보드 접근 시 초점이 시각적으로 노출

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

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

hideFocus, outline: none;, onfocus="this.blur();"를 사용할 경우 초점이 보이지 않게 되기 때문에 주의해야 한다.

---

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/web344

웹 UI 개발