초점 이동과 표시 검사 방법

어떤 기준에 해당하나요

한국 기준 (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 키로 이동하며 초점 표시가 뚜렷한지 확인하세요.