KWCAG 2.2 · 6. 운용의 용이성 · 6.1 입력장치 접근성

6.1.2 초점 이동과 표시

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

KWCAG 2.0

한눈에 보기

모든 기능을 키보드로 사용할 때 사용자 입력 간의 초점 이동은 적절한 순서를 따라야 하며, 그 과정에서 조작이 불가능해지거나 갑자기 페이지가 바뀌면 안 됩니다. 또 초점을 받은 콘텐츠는 시각적으로 구별되어야 합니다.

초점 이동 순서 유지: 초점 이동 순서는 사용자가 예측하는 순서와 일치해야 합니다. 예를 들어 아이디 → 비밀번호 → 로그인 버튼 순이어야 합니다.
함정 또는 오류 방지: 더 이상 키보드 조작이 불가능해 다음·이전 요소로 초점을 옮길 수 없는 상태(키보드 함정)가 생기지 않아야 합니다.
초점의 시각화: 마우스나 키보드로 초점을 받은 컨트롤은 시각적으로 구별되어야 합니다. 마우스와 키보드의 초점 표시 방법이 달라도 되며, 초점 표시는 시간 제한 없이 유지되어야 합니다.

KWCAG 2.1의 해당 항목: 6.1.2 초점 이동(항목 이름에 “표시”가 추가됨)

화면낭독기 사용자는 주변 배치를 볼 수 없어 초점 순서가 뒤섞이면 내용을 이해하기 어렵습니다. 키보드 사용자는 초점 표시가 없으면 지금 어디에 있는지 알 수 없고, 키보드 함정에 빠지면 페이지를 더 이상 사용할 수 없습니다.

초점 순서는 코드 순서로 정하고 양수 tabindex(1 이상)는 쓰지 않습니다. 초점 표시는 outline: none으로 없애지 말고, 필요하면 :focus-visible로 더 잘 보이게 바꿉니다.

초점 표시 스타일

/* 기본 초점 표시를 지우지 말고 강화합니다 */
:focus-visible {
  outline: 3px solid #0b57d0;
  outline-offset: 2px;
}
/* 비권장 */
/* *:focus { outline: none; } */

대화상자처럼 의도적으로 초점을 가두는 경우에도 Esc나 닫기 버튼으로 빠져나올 수 있어야 하고, 닫힌 뒤에는 여는 버튼으로 초점을 돌려 줍니다(대화상자 패턴).

JavaScript

function closeDialog() {
  dialog.close();          // <dialog> 요소
  openerButton.focus();    // 연 버튼으로 초점 복귀
}

권장HTML

<form>
  <label for="id">아이디</label><input id="id">
  <label for="pw">비밀번호</label><input id="pw" type="password">
  <button>로그인</button>
</form>

비권장HTML

<input id="pw" tabindex="1">
<button tabindex="2">로그인</button>
<input id="id" tabindex="3">

비권장HTML

<style>a:focus, button:focus { outline: 0; }</style>