2.4.11 포커스 가려짐 방지(최소)

요구 사항

사용자 인터페이스 구성 요소가 키보드 포커스를 받으면, 그 구성 요소가 작성자가 만든 콘텐츠 때문에 완전히 가려지지 않아야 합니다. 일부가 가려지는 것은 AA에서 허용됩니다(완전히 보이게 하라는 요구는 2.4.12).

• 사용자가 위치를 옮길 수 있는 콘텐츠(이동 가능한 툴바 등)는 처음 위치만 고려합니다.
• 사용자가 연 콘텐츠(펼친 메뉴, 비모달 대화상자)가 포커스를 가리더라도, 포커스를 이동하지 않고 Esc 등으로 닫아 가려진 요소를 드러낼 수 있다면 기준을 위반하지 않습니다.

왜 필요한가요

키보드 사용자는 포커스가 어디 있는지 볼 수 있어야 조작할 수 있습니다. 화면 아래에 고정된 배너나 위쪽 고정 머리글 뒤로 포커스가 숨어 버리면, 2.4.7의 포커스 표시가 있어도 소용이 없습니다. 화면을 확대하면 고정 영역이 차지하는 비율이 커져 문제가 더 자주 생깁니다.

도움받는 사용자

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

적용 방법

• 고정(sticky/fixed) 머리글·바닥글이 있다면 scroll-padding으로 스크롤 시 포커스 요소가 고정 영역 아래로 들어가지 않게 합니다.
• 쿠키 동의 배너·채팅 버튼처럼 떠 있는 요소는 콘텐츠를 가리지 않는 위치에 두거나, 닫기 전까지 포커스를 그 안에 두는 모달로 만듭니다.
• 확대 상태(200~400%)에서도 확인합니다.

html {
  scroll-padding-top: 5rem;    /* 고정 머리글 높이만큼 */
  scroll-padding-bottom: 4rem; /* 고정 하단 바 높이만큼 */
}

사례

.site-header { position: sticky; top: 0; height: 4rem; }
html { scroll-padding-top: 4.5rem; }

자주 하는 실수

• 고정 머리글 아래로 Tab 이동한 링크가 완전히 숨어 보이지 않습니다.
• 화면 하단 쿠키 배너가 닫히기 전까지 아래쪽 링크를 가립니다.
• 떠 있는 채팅 버튼이 폼의 제출 버튼을 덮습니다.

검사 방법

• Tab으로 페이지 전체를 이동하며 포커스를 받은 요소가 고정 영역, 배너, 팝업에 완전히 가려지는 순간이 있는지 확인합니다.
• 브라우저를 200% 이상 확대한 상태에서 다시 확인합니다.

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 2.4.11 (새 창)