ARIA 접근성 가이드

WCAG 2.2 · 2. 운용의 용이성 · 2.4 탐색 가능

2.4.12 포커스 가려짐 방지(향상)

Focus Not Obscured (Enhanced)

키보드 포커스를 받은 요소는 작성자 콘텐츠에 조금도 가려지지 않아야 합니다.

수준 AAAWCAG 2.2신규

한눈에 보기

성공 기준
2.4.12 포커스 가려짐 방지(향상)
수준
수준 AAA
원칙
2. 운용의 용이성
지침
2.4 탐색 가능
도입
WCAG 2.2

요구 사항

사용자 인터페이스 구성 요소가 키보드 포커스를 받으면, 그 구성 요소의 어떤 부분도 작성자가 만든 콘텐츠에 가려지지 않아야 합니다. 2.4.11(AA)이 “완전히 가려지지 않음”을 요구한다면, 이 기준은 “전혀 가려지지 않음”을 요구합니다.

왜 필요한가요

일부만 가려져도 포커스 표시나 요소의 텍스트가 잘려 무엇에 포커스가 있는지 알기 어려울 수 있습니다.

도움받는 사용자

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

적용 방법

2.4.11의 방법과 같습니다. scroll-padding을 고정 영역보다 넉넉하게 주고, 떠 있는 요소가 포커스 요소와 겹치지 않게 배치합니다.

자주 하는 실수

  • 포커스 요소의 아래쪽 절반이 하단 고정 바에 가려집니다.

검사 방법

  • Tab으로 이동하며 포커스 요소의 일부라도 가려지는 경우가 있는지 확인합니다.

참고 자료