이해 2.4.12 초점 표시 (향상된)

(Level AAA)

성공 기준(SC)

사용자 인터페이스 구성요소에 키보드 초점이 있을 때, 저작자가 생성한 콘텐츠로 인해 해당 요소를 가리는 부분이 없어야 한다.

요약

목표: 초점이 맞춰진 항목의 어떤 부분도 가리지 않는다.
할 일: 항목이 키보드 초점을 받으면 완전히 표시되도록 한다.
중요성: 마우스를 사용할 수 없는 사람은 키보드 초점을 받은 것이 무엇인지 확인해야 한다.

의도

이 성공 기준의 목적은 키보드 초점을 받는 항목이 항상 사용자 뷰포트에 표시되도록 하는 것이다. 키보드(또는 스위치나 음성 입력과 같이 키보드 인터페이스를 통해 작동하는 장치)를 사용하는 시력이 있는 사람은 현재 초점의 위치를 아는 것이 중요하다. 초점을 받은 구성 요소는 페이지의 상호 작용 지점을 나타낸다. 사용자가 초점이 있는 항목을 볼 수 없는 경우 진행 방법을 모르거나 시스템이 응답하지 않는다고 생각할 수도 있다.

초점이 맞춰진 항목과 겹칠 수 있는 일반적인 콘텐츠 유형은 고정 바닥글, 고정 헤더, 비모달 대화 상자다. 사용자가 페이지를 탭할 때 이러한 콘텐츠 레이어로 인해 초점 표시기와 함께 초점을 받는 항목이 가려질 수 있다.

쿠키 배너와 같은 고정 콘텐츠로 구현된 알림이 초점을 받는 구성 요소를 완전히 가릴 경우 이 성공 기준에 실패한다. 전달 방법에는 사용자가 페이지를 탐색하기 전에 배너를 닫도록 배너 모달을 만들거나 배너가 다른 콘텐츠와 겹치지 않도록 스크롤 패딩을 사용하는 것이 포함된다. 사용자 작업이 필요하지 않은 알림은 초점 상실 시 종료되어 이 기준을 충족할 수도 있다.

라이트 박스 또는 기타 반투명 효과가 초점이 있는 항목과 겹치는 경우 또 다른 형태의 모호함이 발생할 수 있다. 이러한 형태의 모호함은 이 성공 기준의 범위에 포함되지 않는다. 불투명도가 100% 미만이면 구성 요소가 시각적으로 숨겨지지 않지만 이러한 반투명 겹침으로 인해 2.4.13 초점 형태에 실패할 수 있다. 초점 표시기가 반불투명 구성 요소로 덮일 수 있는 경우 초점 표시기는 2.4.13에 대해 평가되어야 한다. 두 상황 모두의 의도는 초점을 받는 구성 요소가 사용자가 어떤 항목에 초점이 있는지 알 수 없을 정도로 가려져서는 안 된다는 것이다.

이점

페이지를 조작하기 위해 키보드 인터페이스를 사용하는 시력이 있는 사용자는 키보드 초점을 받는 구성 요소를 볼 수 있다. 이러한 사용자에는 음성 입력, 호흡 입력 소프트웨어, 화면 키보드, 스캐닝 소프트웨어, 다양한 보조 기술 및 대체 키보드를 포함하여 키보드 인터페이스를 사용하는 장치에 의존하는 사용자가 포함된다.
시력이 제한적이거나 저시력이지만 포인팅 장치(뷰포트 방향 및 위치 변경을 위해)를 사용하는 사람들은 특히 확대로 인해 콘텐츠의 전체 사용 가능한 부분이 감소하는 경우 키보드 상호 작용의 현재 지점을 명확하게 표시함으로써 이점을 얻을 수 있다.
주의력 제한, 단기 기억 제한 또는 실행 프로세스 제한이 있는 사람들은 초점이 어디에 있는지 더 쉽게 발견할 수 있으므로 이점을 얻는다.

예제

페이지에는 고정 바닥글(뷰포트 하단에 연결됨)이 있다. 페이지를 아래로 탭하면 뷰포트의 콘텐츠가 위로 스크롤되어 항상 스크롤 패딩g을 사용하여 키보드 포커스가 있는 항목을 표시하기 때문에 초점이 맞춰진 항목이 바닥글에 의해 전혀 가려지지 않는다.
페이지에는 큰(너비 30%) 쿠키 승인 대화 상자가 있다. 대화 상자는 모달이므로 닫힐 때까지 페이지의 다른 컨트롤에 접근할 수 없다. 선택이 이루어지고 제출될 때까지 쿠키 승인 대화 상자(초점 표시기 포함)가 화면에 남아 있으므로 초점이 가려지지 않는다.
알림은 고정 헤더로 구현되며 키보드 초점이 알림으로 이동하여 적어도 초점 표시기의 일부는 표시된다. 초점을 잃으면 다른 컨트롤(알림 이전에 표시되는 초점 표시기 포함)을 가리지 않는다.을 가리지 않도록 알림이 사라지고 이전 키보드 초점 표시기의 일부가 표시된다.

기법

이 섹션에서 번호가 매겨진 각 항목은 WCAG 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 간주하는 기술 또는 기술의 조합을 나타낸다. 그러나 이러한 특정 기술을 사용할 필요는 없습니다. 다른 기술 사용에 대한 자세한 내용은 WCAG 성공 기준에 대한 기술 이해, 특히 “기타 기술” 섹션을 참조하라.

충분 기법

C43: Using CSS scroll-padding to un-obscure content

오류

다음은 WCAG 실무 그룹에서 이 성공 기준의 실패로 간주하는 일반적인 실수이다.

키보드 초점이 있는 구성 요소 위에 컨텐츠가 나타나 초점 표시기의 일부를 시각적으로 가리게 하는 상호 작용이다. 이러한 동작은 사용자가 카탈로그를 탐색할 때 제품에 대한 추가 정보를 제공하기 위한 광고 또는 판촉 자료에서 발생할 수 있다.
페이지에는 고정 바닥글(뷰포트 하단에 연결됨)이 있다. 페이지를 아래로 탭하면 뷰포트의 콘텐츠가 충분한 스크롤 패딩 없이 스크롤되기 때문에 초점이 맞춰진 항목이 바닥글에 의해 부분적으로 가려진다.