KWCAG 2.2 · 6.1.2

초점 이동과 표시 검사 방법

KWCAG 2.2 「초점 이동과 표시」 항목을 점검하는 방법입니다. 자동 검사가 일부를 잡아내지만, 나머지는 사람이 직접 확인해야 합니다.

어떤 기준에 해당하나요

한국 기준 (KWCAG 2.2): 6.1.2 초점 이동과 표시; 운용의 용이성
국제 기준 (WCAG 2.2): 2.4.3 초점 순서 (A) ↗2.4.7 보이는 초점 (AA) ↗2.4.11 초점 가림 방지(최소) (AA) ↗

Tab 키로 이동할 때 초점이 논리적 순서(읽기 순서)로 이동하는지, 현재 초점이 시각적으로 명확히 표시되는지(outline 제거 여부), 초점이 다른 요소에 가려지지 않는지 확인하세요.

이 항목은 2개 규칙으로 자동 판정합니다. 각 규칙에 위반 시 개선 방법이 붙어 있습니다.

tabindex에 양수 값을 사용하고 있습니다 tabindex
tabindex="1" 이상 값은 초점 순서를 마크업 순서와 다르게 만들어 유지보수와 예측을 어렵게 합니다. 0(초점 가능) 또는 -1(스크립트 초점용)만 사용하고, 순서는 DOM 순서로 제어하세요.
키보드 초점 표시가 보이지 않을 수 있습니다 a11ychk:focus-visible
키보드로 초점을 옮겼을 때 어떤 요소에 있는지 시각적으로 보여야 합니다. outline: none으로 기본 표시를 제거하고 대체 스타일을 주지 않으면 키보드 사용자가 위치를 알 수 없습니다.
```
/* outline을 없앴다면 반드시 대체 표시 제공 */
a:focus-visible, button:focus-visible {
  outline: 3px solid #0b5d54;
  outline-offset: 2px;
}
```
실제로 Tab 키로 이동하며 초점 표시가 뚜렷한지 확인하세요.

주소만 넣으면 이 항목을 포함한 KWCAG 33항목을 한 번에 점검해 드립니다. 로그인 없이 한 페이지를 바로 검사해 볼 수 있습니다.