2.4.13 포커스 모양

요구 사항

키보드 포커스 표시가 보일 때, 포커스 표시의 영역이 다음을 모두 만족해야 합니다.

• 크기: 포커스를 받지 않은 구성 요소(또는 하위 구성 요소)의 둘레를 2 CSS 픽셀 두께로 두른 면적 이상입니다.
• 변화 대비: 같은 픽셀이 포커스 상태와 비포커스 상태에서 3:1 이상의 명도 대비를 가집니다.

예외: 포커스 표시를 사용자 에이전트(브라우저)가 정하고 작성자가 조정할 수 없는 경우, 또는 작성자가 포커스 표시와 그 배경색을 수정하지 않은 경우. 이 기준은 포커스 표시가 있을 때의 모양을 다루며, 표시의 존재 자체는 2.4.7이 요구합니다.

왜 필요한가요

얇고 흐린 포커스 표시는 저시력 사용자나 주의력이 흐트러지기 쉬운 사용자가 알아차리기 어렵습니다. 크기와 변화량의 최소 기준을 두면 포커스 위치를 한눈에 찾을 수 있습니다.

도움받는 사용자

• 저시력 사용자(화면 확대 사용자)
• 키보드만 사용하는 사용자
• 인지·학습 장애가 있는 사용자
• 고령자

적용 방법

가장 쉬운 방법은 구성 요소를 둘러싸는 2px 이상의 실선 윤곽선을, 비포커스 상태 색과 3:1 이상 대비가 나는 색으로 주는 것입니다. outline-offset으로 요소와 간격을 두면 윤곽선이 배경과 대비되는지만 확인하면 됩니다.

:focus-visible {
  outline: 2px solid #0b57d0;  /* 흰 배경 대비 약 6.4:1 */
  outline-offset: 2px;
}

자주 하는 실수

• 1px 점선 윤곽선만 포커스 표시로 사용합니다.
• 배경색이 살짝 바뀌는 정도로만 포커스를 표시해 변화 대비가 3:1 미만입니다.
• 아래쪽 짧은 밑줄만 표시해 면적이 부족합니다.

검사 방법

• 포커스 전후의 스크린숏을 비교해 바뀐 픽셀 영역을 확인합니다.
• 바뀐 영역이 2px 둘레 면적 이상인지, 바뀐 픽셀의 전후 대비가 3:1 이상인지 측정합니다.

참고 자료

• WCAG 2.2 원문: 2.4.13 (새 창)