2.4.7 포커스 표시

요구 사항

키보드로 조작할 수 있는 모든 사용자 인터페이스에는 키보드 포커스 표시가 보이는 작동 모드가 있어야 합니다. 쉽게 말해, 키보드로 이동할 때 지금 어디에 포커스가 있는지 눈으로 볼 수 있어야 합니다. 포커스 표시의 대비는 1.4.11, 크기와 변화량은 2.4.13, 가려짐은 2.4.11·2.4.12가 다룹니다.

왜 필요한가요

포커스 표시가 없으면 키보드 사용자는 Enter를 눌렀을 때 무엇이 실행될지 알 수 없습니다. 마우스의 커서가 사라진 것과 같습니다.

도움받는 사용자

• 키보드만 사용하는 사용자
• 저시력 사용자(화면 확대 사용자)
• 운동장애가 있는 사용자(손 떨림, 근력 저하 등)
• 스위치·대체 입력 장치 사용자
• 인지·학습 장애가 있는 사용자

적용 방법

• outline: none이나 outline: 0으로 브라우저 기본 포커스 표시를 지우지 않습니다.
• 기본 표시를 바꾼다면 :focus-visible로 두껍고 대비가 높은 표시를 줍니다.
• aria-activedescendant를 쓰는 복합 위젯은 활성 항목에 별도의 시각 표시를 줍니다.

:focus-visible {
  outline: 3px solid #0b57d0;
  outline-offset: 2px;
}

사례

*:focus { outline: none; }

button:focus-visible { outline: 3px solid #0b57d0; outline-offset: 2px; }

자주 하는 실수

• CSS 초기화로 모든 요소의 outline을 없앱니다.
• 포커스 표시가 배경과 거의 구분되지 않는 색입니다.
• 사용자 정의 위젯의 현재 항목에 시각적 표시가 없습니다.

검사 방법

• Tab으로 이동하며 모든 포커스 가능한 요소에서 포커스 위치가 보이는지 확인합니다.
• 목록 상자·메뉴 등 복합 위젯 안에서 방향키로 이동할 때도 현재 항목이 보이는지 확인합니다.

관련 ARIA

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 2.4.7 (새 창)