성공기준 이해 2.4.11:초점 표시 (최소) (Level AA)
요약
- 목표
- 초점이 맞춰진 항목을 계속 표시한다.
- 할 일
- 항목에 키보드 초점이 있을 때 최소한 일부분이라도 표시되도록 한다.
- 중요성
- 마우스를 사용할 수 없는 사람은 키보드 초점에 있는 것이 무엇인지 확인해야 한다.
의도
이 성공 기준의 목적은 키보드 초점을 받는 항목이 항상 사용자 뷰포트에 부분적으로 표시되도록 하는 것이다. 키보드(또는 스위치나 음성 입력과 같이 키보드 인터페이스를 통해 작동하는 장치)를 사용하는 시력이 있는 사람은 현재 초점의 위치를 아는 것이 중요하다. 초점을 받은 구성 요소는 페이지의 상호 작용 지점을 나타낸다. 사용자가 초점이 있는 항목을 볼 수 없는 경우 진행 방법을 모르거나 시스템이 응답하지 않는다고 생각할 수도 있다.
오늘날 일반적이고 복잡한 반응형 디자인을 인식하여 이 AA 기준은 초점을 받는 구성 요소가 다른 저작자가 만든 콘텐츠에 의해 부분적으로 가려지는 것을 허용한다. 부분적으로 가려진 구성 요소는 여전히 매우 잘 보일 수 있지만, 가려진 부분이 많을수록 보기가 더 어려워진다. 이러한 이유로 저작자는 초점을 받는 항목이 부분적으로 모호해지는 정도와 빈도를 줄이기 위해 상호 작용을 설계해야 한다. 최상의 가시성을 위해서는 포커스를 받는 구성 요소가 가려지는 부분이 없어야 한다. 이런 결과는 AAA 기준 초점 표시 (향상된)에 포함된다.
초점이 맞춰진 항목과 겹칠 수 있는 일반적인 콘텐츠 유형은 고정 바닥글, 고정 헤더, 비모달 대화 상자다. 사용자가 페이지를 탭할 때 이러한 콘텐츠 레이어로 인해 초점 표시기와 함께 초점을 받는 항목이 가려질 수 있다.
쿠키 배너와 같은 고정 콘텐츠로 구현된 알림이 초점을 받는 구성 요소를 완전히 가릴 경우 이 성공 기준에 실패한다. 전달 방법에는 사용자가 페이지를 탐색하기 전에 배너를 닫도록 배너 모달을 만들거나 배너가 다른 콘텐츠와 겹치지 않도록 스크롤 패딩을 사용하는 것이 포함된다. 사용자 작업이 필요하지 않은 알림은 초점 상실 시 종료되어 이 기준을 충족할 수도 있다.
라이트 박스 또는 기타 반투명 효과가 초점이 있는 항목과 겹치는 경우 또 다른 형태의 모호함이 발생할 수 있다. 불투명도가 100% 미만으로 인해 구성 요소가 완전히 가려지는 것은 아니지만 이러한 반투명 겹침으로 인해 1.4.11 텍스트가 아닌 콘텐츠의 명도대비 오류가 발생할 수 있습니다. 초점 표시기가 반투명 구성 요소로 덮일 수 있는 경우 초점 표시기가 반투명 구성 요소 아래에 있는 동안 1.4.11을 통과하는 초점 표시기의 기능을 평가(및 통과)해야 한다. 두 상황 모두의 의도는 포커스를 받는 구성 요소가 사용자가 어떤 항목에 포커스가 있는지 알 수 없을 정도로 가려져서는 안 된다는 것이다.
사용자가 이동할 수 있는 콘텐츠
이 SC에는 위치를 변경할 수 있는 콘텐츠에 관한 참고 사항이 포함되어 있다. 사용자가 콘텐츠 영역을 이동할 수 있는 경우 이동 가능한 콘텐츠를 잠재적으로 배치하여 초점을 받을 수 있는 다른 콘텐츠를 가릴 수 있다. 이러한 경우 저작자는 초기 위치의 이동 가능한 콘텐츠가 포커스를 받는 항목을 가리지 않도록 하는 책임만 진다.
이 참고사항은 캔버스 주위에 위치를 변경할 수 있는 도구 모음이나 기타 패널을 표시하여 기본 편집 영역(캔버스라고도 함)을 개선할 수 있는 저작 도구와 같은 복잡한 응용 프로그램의 일반적인 상호 작용을 수용하기 위한 것이다. 초점을 가리지 않도록 이러한 도구 모음을 디자인하는 것이 가능하다. 저작자는 그렇게 하는 것이 권장되며, 이러한 도구 모음의 공평한 키보드 사용을 보장하는 기술을 추구해야 한다. 그러나 반응형 디자인과 텍스트 크기 및 콘텐츠 간격을 변환하는 기능 지원과 관련된 복잡성을 인식하여 이러한 이동 가능한 패널의 시작 위치만 평가한다.
사용자가 여는 콘텐츠
이 성공 기준에는 사용자가 열거나 공개하는 콘텐츠에 관한 참고 사항이 포함되어 있다. 이러한 콘텐츠의 한 가지 예는 화면의 기존 콘텐츠에 대한 선택 목록을 여는 사용자가 여는 메뉴 버튼이다. 이러한 콘텐츠는 화면의 다른 정보를 가릴 수 있지만 키보드 초점을 받는 항목을 가리지는 않는다. 초점이 변경되어도 새 콘텐츠가 계속 열려 있지 않기 때문이다. 그러나 저작자는 채팅 창과 같이 사용자가 닫을 때까지 지속되도록 의도적으로 설계된 사용자 개방형 콘텐츠를 만들 수 있다. 이러한 영구 콘텐츠는 초점 표시(최소)에 실패할 가능성이 있다. 이 섹션에서는 다양한 유형에 대해 설명한다. 모두가 이 성공 기준을 통과하도록 설계될 수 있다.
이 섹션은 사용자가 적극적으로 공개하는 콘텐츠에만 적용된다. 저작자가 미리 배치한 콘텐츠(예: 고정 바닥글) 또는 시스템 경고와 같이 직접적인 사용자 실행 없이 나타나는 콘텐츠로 인해 초점을 받는 항목이 뷰포트에 즉시 표시되는 것을 방해해서는 안 된다. 또한 이 참고 사항은 관례상 비지속적인 공개에는 적용되지 않는다. 다음 하위 섹션에서 설명하는 것처럼 더 이상 초점이 맞춰져 있지 않을 때 닫히지 않는 열린 드롭다운은 이 규칙을 따르지 않는다.
비지속적으로 열린 정보
웹에서 일부 구성 요소는 활성화되거나 초점을 받을 때 즉시 사용자 상호작용이나 정보를 위한 추가 콘텐츠(새 콘텐츠)를 열거나(공개하거나) 드러낸다. 이 새 콘텐츠는 종종 다른 콘텐츠 위에서 가리게 된다. 이러한 구성 요소의 예로는 메뉴 항목, 선택 요소 항목, 콤보박스 목록(및 기타 드롭다운 항목), 날짜 선택용 달력, 툴팁 등이 있다. 이러한 모든 구성 요소의 공통된 특징은 사용된 후나 더 이상 주된 사용자 상호작용 대상이 아닐 때 지속되지 않을 것으로 예상된다는 점이다. 이러한 비지속적 공개 요소는 초점을 받은 항목을 가리지 않기 때문에 이 기준을 위반하지 않는다. 그러나 사용자가 1) 열린 항목 중 하나를 활성화했거나 2) 초점을 실행 항목과 추가 콘텐츠 밖으로 옮긴 후에도 그러한 구성 요소가 지속되도록 저작자가 허용한다면, 초점 받은 항목을 가리게 되어 이 기준을 위반할 위험이 있다.
사용자가 공개할 수 있고 지속적으로 공개된
일부 공개 패턴은 사용자가 의도적으로 닫을 때까지 열려 있는 추가 콘텐츠를 사용자가 열 수 있는 매커니즘을 제공한다. 아코디언은 이러한 패턴의 간단한 예이다. 챗봇과 확장 가능한 측면 탐색 기능은 더 복잡한 예이다. 이러한 패턴은 모두 구현될 수 있으며 이 성공 기준에 실패할 위험이 없다. 가능한 접근 방식은 다음과 같다.
- 추가 콘텐츠가 나타나면 기존 콘텐츠를 대체한다. 아코디언이 그 예이다. 아코디언이 열리면 공개된 콘텐츠가 기존 콘텐츠를 페이지 아래로 밀어낸다. 새로운 콘텐츠는 기존 콘텐츠를 가리지 않기 때문에 초점이 있는 항목을 가릴 수 없다.
- 추가 콘텐츠가 나타나면 기존 콘텐츠가 재배열된다. WCAG 표준의 팝아웃 사이드바가 이 패턴의 예이다. 사이드 메뉴가 활성화되면 페이지 왼쪽에 새로운 정보 섹션이 열린다. 메인 콘텐츠 영역은 새로운 콘텐츠를 수용하기 위해 수평으로 축소되고, 기존 콘텐츠는 더 얇은 공간에 맞게 재배열 된다. 결과적으로 두 섹션 사이에 내용이 겹치지 않는다. 왼쪽 탐색이든 기본 콘텐츠이든 포커스를 받는 항목은 다른 섹션에 의해 가려지지 않는다.
- 추가 콘텐츠가 열리면 초점이 걸리고 탭 링은 해당 콘텐츠가 해제될 때까지 새 콘텐츠로 제한된다. 이 형식은 사용자가 먼저 콘텐츠를 닫지 않고는(일반적으로 Esc를 눌러) 키보드로 열린 콘텐츠를 탐색할 수 없다는 점에서 대화 상자와 다소 유사하다. 그러나 모달 대화 상자와 달리 일부 구현에서는 포인터 사용자가 열린 섹션 콘텐츠를 닫지 않고도 외부의 콘텐츠와 상호 작용할 수 있다. 이 패턴은 잠재적으로 키보드 사용자와 포인터 사용자 사이에 불평등한 경험을 야기하므로 주의해서 사용해야 한다. 즉, 열린 콘텐츠가 기본 콘텐츠의 키보드 포커스를 가리는 것을 방지하므로 이 성공 기준을 통과한다. 이는 참조 섹션의 Knowbility 기사에서 닫힐 때까지 슬라이드 아웃 탐색에서 키보드 초점 유지 섹션 아래에 있는 짧은 동영상에서 설명되고 시연된다.
- 공개한 내용이 다른 콘텐츠가 포함되지 않은 페이지 영역으로 확장된다. 많은 페이지는 넓은 여백으로 디자인되어 새 콘텐츠를 열 수 있는 상당한 공백을 제공한다. 많은 챗봇과 토스트 알림은 페이지의 비어 있는 오른쪽 면으로 '슬라이드 업'되도록 설계되었다. 저작자가 반응형 디자인의 각 중단점에서 콘텐츠가 가려지지 않도록 주의를 기울이는 경우 다른 작동 가능한 콘텐츠를 가리는 일은 발생하지 않는다.
- 초점이 추가 콘텐츠를 벗어나면 추가 콘텐츠가 자동으로 숨겨지거나 축소되거나 전용 키보드 명령(예: Esc 키)을 사용하여 콘텐츠가 숨겨지거나 축소될 수 있다. 이는 이전에 비지속적으로 열린 정보 항목에서 설명한 패턴과 매우 유사하다. 구별되는 요인은 사용자가 돌아올 때까지 숨겨질 수 있더라도 공개 내용에서 사용자의 마지막 상호 작용 지점이 보존된다는 것(지속됨)일 수 있다. 일부 트리와 왼쪽 탐색 패턴은 이런 방식으로 동작한다.
보다 복잡한 인터페이스와 사용자 요구 사항을 고려하여 다음 사항에 유의하라. 사용자가 연 콘텐츠는 초점을 받는 구성 요소를 가릴 수 있다. 만약 사용자가 열린 콘텐츠로 다시 이동하여 닫지 않아도 초점을 받은 항목을 화면에 표시할 수 있는 방법이 있다면, 이 기준을 통과할 수 있다. 예를 들어 초점이 있는 항목을 표시할 수 있는 키보드 작업은 다음과 같다.
- Esc 키를 사용하여 가린 콘텐츠를 닫는다.
- 키를 사용하여 뷰포트의 콘텐츠를 스크롤하여 초점이 있는 항목을 표시한다.
- 오버레이 간 이동을 위한 키를 제공한다.
예를 들어:
- 사용자가 팝오버 비모달 대화 상자인 채팅 인터페이스를 엽니다. 이로 인해 기본 페이지의 일부 콘텐츠가 완전히 가려진다. 사용자는 tab 키를 사용하여 채팅 인터페이스에서 벗어나 대화 상자에 의해 완전히 가려진 링크에 초점을 맞춘다. 사용자는 Esc 키를 눌러 채팅 인터페이스를 닫고 링크를 가려지지 않게 한다.
- 사용자는 웹 페이지 하단에서 고정 위치 페이지 피드백 구성 요소를 확장한다. 그런 다음 키보드를 사용하여 확장된 구성 요소에 의해 완전히 가려진 링크로 이동하고 키보드의 아래쪽 화살표 또는 space 키를 눌러 페이지의 콘텐츠를 스크롤하여 링크를 드러낸다.
- 사용자가 웹 기반 다중 사용자 저작 응용 프로그램을 연다. 문서에 기여한 사람의 목록을 표시하는 오버레이가 나타난다. 사용자는 기여자 목록을 탭하여 그 중 하나를 활성화한다. 응용 프로그램은 해당 사람의 최근 기여를 표시하는 첫 번째 오버레이를 가리는 새 오버레이를 표시한다. 사용자는 F6 키를 눌러 두 오버레이의 중첩 순서를 전환한다.
모달 대화 상자
적절하게 구성된 모달 대화 상자는 항상 이 성공 기준을 통과한다. 초점이 있는 항목 바로 위에 나타나더라도 대화 상자는 모양에 초점을 맞추기 때문에 초점을 받는 항목(대화 상자 또는 해당 구성 요소 중 하나)이 표시된다. 적절하게 구성된 모달은 해당 초점을 유지하고 해제될 때까지 모달 외부의 상호 작용을 방지한다.
오버레이가 나타날 때 초점을 가져오지 않고, 상호작용을 오버레이로 제한하거나 초점을 잃었을 때 자체적으로 닫히지 않는다면(따라서 초점이 아래에 있는 콘텐츠로 빠져나갈 수 있음), 해당 오버레이가 다른 초점을 받을 수 있는 항목을 가릴 수 있는 위치에 있다면 이 기준을 위반할 위험이 있다.
이점
- 페이지를 조작하기 위해 키보드 인터페이스를 사용하는 시력이 있는 사용자는 키보드 초점을 받는 구성 요소를 볼 수 있다. 이러한 사용자에는 음성 입력, 호흡 입력 소프트웨어, 화면 키보드, 스캐닝 소프트웨어, 다양한 보조 기술 및 대체 키보드를 포함하여 키보드 인터페이스를 사용하는 장치 또는 키보드에 의존하는 사용자가 포함된다.
- 화면 방향 및 위치 변경을 위해 포인터를 주로 사용하는 시력이 제한적이거나 저시력인 사람들은 그럼에도 불구하고 키보드 상호 작용의 현재 지점을 시각적으로 표시함으로써 이점을 얻을 수 있다. 특히 확대가 화면의 보이는 부분을 줄이는 경우에는 더욱 그렇다.
- 주의력 결핍, 단기 기억 제한 또는 실행 프로세스 제한이 있는 사람들은 초점이 어디에 있는지 발견할 수 있으므로 이점을 얻을 수 있다.
예제
- 페이지에는 고정 바닥글(뷰포트 하단에 연결됨)이 있다. 페이지를 아래로 탭하면 뷰포트의 콘텐츠가 위로 스크롤되어 항상 스크롤 패딩을 사용하여 키보드 초점이 있는 항목을 표시하기 때문에 초점이 맞춰진 항목이 바닥글에 의해 시각적으로 완전히 가려지지 않는다.
- 페이지에는 전체 너비의 쿠키 승인 대화 상자가 있다. 대화 상자는 모달이므로 닫힐 때까지 페이지의 다른 컨트롤에 액세스할 수 없다. 쿠키 승인 대화 상자의 주요 부분은 선택이 이루어지고 제출될 때까지 화면에 남아 있고 키보드 초점 표시기의 주요 부분은 계속 표시되므로 초점이 가려지지 않는다.
- 알림은 고정 헤더로 구현되며 키보드 초점이 알림으로 이동하여 적어도 초점 표시기의 일부는 표시된다. 초점을 잃으면 다른 컨트롤을 가리지 않도록 알림이 사라지고 이전 키보드 초점 표시기의 일부가 표시된다.
관련 자료
자료는 정보 제공 목적으로만 제공되며 보증을 암시하지 않는다.
기법
이 섹션에서 번호가 매겨진 각 항목은 WCAG 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 간주하는 기술 또는 기술의 조합을 나타낸다. 그러나 이러한 특정 기술을 사용할 필요는 없습니다. 다른 기술 사용에 대한 자세한 내용은 WCAG 성공 기준에 대한 기술 이해, 특히 "기타 기술" 섹션을 참조하라.
충분 기법
오류
다음은 WCAG 실무 그룹에서 이 성공 기준의 실패로 간주하는 일반적인 실수이다.