성공 기준(SC)
사용자 인터페이스 구성요소가 키보드 초점을 받고 있을 때, 저작자가 생성한 콘텐츠로 완전히 감춰지지 않아야 한다.
2.4.11 초점 표시(최소)
(Level AA)
- 목표
- 초점을 받은 항목을 계속 보여준다.
- 할 일
- 항목에 키보드 초점이 있을 때 최소한 일부분이라도 표시되도록 한다.
- 중요성
- 마우스를 사용할 수 없는 사람은 키보드 초점에 있는 것이 무엇인지 확인할 필요가 있다.
이 성공 기준의 목적은 키보드 초점을 받는 항목이 항상 사용자 뷰포트에 부분적이라도 표시되도록 하는 것이다. 키보드(또는 스위치나 음성 입력과 같이 키보드 인터페이스를 통해 작동하는 장치)를 사용하는 시력이 있는 사람은 현재 초점의 위치를 아는 것이 중요하다. 초점을 받은 컴포넌트는 페이지의 상호 작용 지점을 나타낸다. 사용자가 초점이 있는 항목을 볼 수 없는 경우 진행 방법을 모르거나 시스템이 응답하지 않는다고 생각할 수도 있다.
요즘 일반적인 복잡한 반응형 디자인을 반영하여, 이 AA 기준은 초점을 받는 컴포넌트가 다른 저작자가 만든 콘텐츠에 의해 부분적으로 가려지는 것을 허용한다. 부분적으로 가려진 컴포넌트는 여전히 잘 보일 수 있지만, 가려진 부분이 많을수록 보기가 더 어려워진다. 이러한 이유로 저작자는 초점을 받는 항목이 부분적으로 모호해지는 정도와 빈도를 줄이기 위해 상호 작용을 설계해야 한다. 최상의 가시성을 위해서는 초점을 받는 컴포넌트가 가려지는 부분이 없어야 한다. 이런 결과는 AAA 기준 초점 표시(향상된)에 포함된다.
초점이 맞춰진 항목과 겹칠 수 있는 일반적인 콘텐츠 유형은 고정 바닥글, 고정 헤더, 비모달 대화 상자다. 사용자가 페이지를 탭할 때 이러한 콘텐츠 레이어로 인해 초점 표시기와 함께 초점을 받는 항목이 가려질 수 있다.
쿠키 배너와 같이 고정 콘텐츠로 구현된 알림이 초점을 받는 컴포넌트 전체를 가릴 경우 이 성공 기준에 실패한다. 전달 방법에는 사용자가 페이지를 탐색하기 전에 배너를 닫도록 배너 모달을 만들거나 배너가 다른 콘텐츠와 겹치지 않도록 스크롤 패딩(MDN: scroll padding)을 사용하는 것이 포함된다. 사용자 작업이 필요하지 않은 알림이 초점 상실 시 종료되도록 하여 이 기준을 충족할 수도 있다.
반투명 오버레이 또는 흐림이나 그 밖의 어둡게 처리하는 효과를 적용하는 오버레이가 초점을 받은 항목과 겹치는 경우에도 또 다른 형태의 가림이 발생할 수 있다. 초점을 받은 항목이 이러한 오버레이에 의해 “완전히 가려지지” 않아 이 기준을 충족하더라도, 별도로 1.4.11 텍스트가 아닌 콘텐츠의 대비를 충족하지 못할 수 있다. 이러한 경우에는 오버레이의 영향을 받아 초점 표시기의 형태가 달라진 상태에서 1.4.11의 대비 요구사항에 따라 초점 표시기를 평가해야 한다. 이는 항목의 초점 상태를 언제나 명확하게 식별할 수 있도록 하는 데 목적이 있다.
참고
이 기준은 초점 표시기가 아니라 초점을 받은 컴포넌트를 평가한다. “컴포넌트가 완전히 가려지지 않는다”라는 조건을 확인할 때, 컴포넌트 자체에는 초점 표시기를 포함하지 않는다. 초점 표시기가 컴포넌트 내부에 있거나 컴포넌트 자체의 변화로 초점을 표시하는 경우는 예외다. 사용자가 초점의 위치를 추적할 때 컴포넌트와 초점 표시기(컴포넌트 외부의 경우)가 모두 가려지지 않으면 도움이 되지만, 이 기준에서는 컴포넌트만 확인하는 것이 더 명확한 측정 기준을 제공한다. 다만 초점 표시기가 완전히 가려진 경우에는 2.4.7 초점 가시성를 충족하지 못할 가능성이 높다.
사용자가 이동할 수 있는 콘텐츠
Section titled “사용자가 이동할 수 있는 콘텐츠”이 성공기준에는 위치를 변경할 수 있는 콘텐츠에 관한 참고가 포함되어 있다. 사용자가 콘텐츠 영역을 이동할 수 있는 경우, 초점을 받을 수 있는 다른 콘텐츠를 가리도록 이동 가능한 콘텐츠를 배치할 가능성이 있다. 이러한 경우 저작자는 초기 위치에 있는 이동 가능한 콘텐츠가 초점을 받는 항목을 가리지 않도록 보장할 책임만 진다.
이 참고는 저작 도구와 같은 복잡한 애플리케이션에서 흔히 나타나는 상호작용을 수용하기 위한 것이다. 이러한 애플리케이션에서는 캔버스라고도 하는 주요 편집 영역에 도구 모음이나 기타 패널을 표시하여 기능을 강화할 수 있으며, 이러한 요소는 캔버스 주변으로 위치를 변경할 수 있다. 이러한 도구 모음이 초점을 가리지 않도록 설계할 수 있다. 저작자가 그렇게 설계하고, 이러한 도구 모음을 키보드로 동등하게 사용할 수 있도록 보장하는 기법을 적용하도록 권장한다. 그러나 반응형 디자인의 복잡성과 콘텐츠의 텍스트 크기 및 간격을 변경하는 기능을 지원하는 데 따르는 복잡성을 고려하여, 이러한 이동 가능한 패널은 초기 위치만 평가한다.
사용자가 여는 콘텐츠
Section titled “사용자가 여는 콘텐츠”이 성공 기준에는 사용자가 열거나 펼치는 콘텐츠에 관한 참고가 포함되어 있다. 이러한 콘텐츠의 예시로는 사용자가 메뉴 버튼을 열었을 때 화면에 이미 존재하는 콘텐츠 위로 선택 항목 목록이 열리는 경우가 있다. 이는 화면의 다른 정보를 가릴 수 있지만, 새 콘텐츠는 초점이 변경된 뒤에도 열린 상태로 유지되지 않으므로 키보드 초점을 받는 항목을 가리지는 않는다. 그러나 저작자는 채팅 창과 같이 사용자가 닫을 때까지 의도적으로 유지되도록 설계된, 사용자가 여는 콘텐츠를 만들 수 있다. 이처럼 지속되는 콘텐츠는 ‘초점 표시(최소)’을 충족하지 못할 가능성이 있다. 이 섹션에서는 여러 유형을 설명한다. 모든 유형은 이 성공 기준을 충족하도록 설계할 수 있다.
이 섹션은 사용자가 직접 여는 콘텐츠에만 적용한다. 저작자가 미리 배치한 콘텐츠(예: 고정 바닥글)나 시스템 경고와 같이 사용자의 직접적인 동작 없이 나타나는 콘텐츠는 초점을 받는 항목이 뷰포트에서 즉시 보이는 것을 방해해서는 안 된다. 또한 이 참고는 관례상 지속되지 않는 열린 콘텐츠에는 적용하지 않는다. 다음 하위 섹션에서 설명하듯이, 더 이상 초점을 받지 않아도 닫히지 않는 열린 드롭다운은 이 관례를 따르지 않는 것이다.
지속적이지 않는 열린 정보
Section titled “지속적이지 않는 열린 정보”웹의 여러 컴포넌트는 사용자가 즉시 상호작용하거나 정보를 확인할 수 있도록 활성화되거나 초점을 받을 때 추가 콘텐츠를 연다.
이 새로운 콘텐츠는 흔히 다른 콘텐츠 위에 표시되어 이를 가린다.
이러한 컴포넌트의 예시로는 메뉴 항목, select 요소의 항목, 콤보박스 목록과 그 밖의 드롭다운 항목, 날짜 선택기 달력, 툴팁 등이 있다.
이러한 모든 컴포넌트의 공통적인 특성은 사용자가 해당 컴포넌트에서 작업을 수행하거나 더 이상 사용자의 주된 상호작용 대상이 아니게 된 후에는 열린 상태로 유지되지 않는다는 점이다.
이러한 비지속적 열림은 초점이 있는 항목을 가리지 않으므로 이 성공 기준을 충족한다.
그러나 저작자가 사용자가 1) 열린 항목 중 하나를 활성화한 후 또는 2) 트리거와 추가 콘텐츠에서 다른 곳으로 초점을 이동한 후에도 이러한 컴포넌트가 열린 상태로 유지되도록 허용하면, 초점이 있는 항목을 가려 이 기준을 충족하지 못할 위험이 있다.
사용자가 열 수 있는, 지속적으로 표시되는 콘텐츠
Section titled “사용자가 열 수 있는, 지속적으로 표시되는 콘텐츠”일부 표시 패턴은 사용자가 추가 콘텐츠를 열 수 있는 메커니즘을 제공하며, 해당 콘텐츠는 사용자가 의도적으로 닫을 때까지 열린 상태로 유지된다. 아코디언은 이러한 패턴의 간단한 예이다. 챗봇과 확장 가능한 측면 네비게이션은 더 복잡한 예이다. 이러한 모든 패턴은 구현될 수 있으며, 이 성공 기준을 충족하지 못할 위험이 없다. 가능한 접근 방식은 다음과 같다.
- 추가 콘텐츠가 나타나면 기존 콘텐츠를 밀어낸다. 코디언이 이에 해당하는 예이다. 아코디언을 열면 펼쳐진 콘텐츠가 기존 콘텐츠를 페이지 아래쪽으로 더 이동시킨다. 새로운 콘텐츠는 기존 콘텐츠를 가리지 않으므로 초점이 있는 항목도 가릴 수 없다.
- 추가 콘텐츠가 나타나면 기존 콘텐츠가 재배치된다. WCAG 표준의 튀어 나오는 사이드바가 이러한 패턴의 예이다. 측면 메뉴를 활성화하면 페이지 왼쪽에 새로운 정보 섹션이 열린다. 새로운 콘텐츠를 수용하기 위해 주요 콘텐츠 영역의 가로 폭이 줄어들고, 기존 콘텐츠는 더 좁아진 공간에 맞게 재배치된다. 그 결과 두 섹션의 콘텐츠가 서로 겹치지 않으므로, 초점을 받는 항목이 왼쪽 네비게이션 영역에 있든 주요 콘텐츠에 있든 다른 섹션에 의해 가려지지 않는다.
- 추가 콘텐츠가 열리면 해당 콘텐츠가 초점을 받고, 콘텐츠를 닫을 때까지 탭 순환 범위가 새 콘텐츠 내부로 제한된다. 이 방식은 사용자가 열린 콘텐츠를 먼저 닫지 않고서는 키보드로 그 밖의 영역을 탐색할 수 없다는 점에서 대화상자와 다소 유사하다. 일반적으로 Esc 키를 눌러 콘텐츠를 닫는다. 그러나 모달 대화상자와 달리, 일부 구현에서는 포인터 사용자가 열린 콘텐츠를 닫지 않고도 열린 섹션 외부의 콘텐츠와 상호작용할 수 있다. 이 패턴은 키보드 사용자와 포인터 사용자 사이에 불공평한 사용 경험을 초래할 가능성이 있으므로 주의해서 사용해야 한다. 다만 열린 콘텐츠가 주요 콘텐츠의 키보드 초점을 가리는 것을 방지하므로 이 성공 기준을 충족한다. 이에 관한 설명과 시연은 참고자료 섹션에 있는 Knowbility 문서의 짧은 비디오에서 확인할 수 있으며, 해당 섹션의 제목은 ‘Keep keyboard focus in the slide-out navigation until it’s closed’이다.
- 펼쳐진 콘텐츠는 다른 콘텐츠가 없는 페이지 영역으로 확장된다. 많은 페이지는 여백을 넓게 두어 설계하므로 새로운 콘텐츠를 열 수 있는 충분한 빈 공간을 제공한다. 많은 챗봇과 토스트 알림은 페이지 오른쪽의 콘텐츠가 없는 영역으로 ‘밀려 올라오도록’ 설계된다. 저작자가 반응형 디자인의 각 중단점에서 콘텐츠가 가려지지 않도록 주의하면, 조작 가능한 다른 콘텐츠가 가려지는 상황은 발생하지 않는다.
- 초점이 추가 콘텐츠를 벗어나면 해당 콘텐츠가 자동으로 숨겨지거나 접힌다. 또는 전용 키보드 명령(예: Esc 키)을 사용하여 콘텐츠를 숨기거나 접을 수 있다. 이는 앞서 ‘지속이지 않은 열린 정보’에서 설명한 패턴과 매우 유사하다. 다만 사용자가 다시 돌아올 때까지 열린 컨텐츠가 숨겨질 수 있더라도, 열린 콘텐츠 안에서 사용자가 마지막으로 상호작용한 지점은 그대로 유지된다는 점에서 차이가 있을 수 있다. 일부 트리와 측면 네비게이션 패턴은 이러한 방식으로 동작한다.
더 복잡한 인터페이스와 사용자 요구를 고려한 참고가 있다. 사용자가 연 콘텐츠는 초점을 받는 컴포넌트를 가릴 수 있다. 사용자가 자신이 연 콘텐츠를 닫기 위해 해당 콘텐츠로 다시 이동하지 않고도 다른 방법을 사용하여 초점을 받은 항목이 보이게 할 수 있다면 이 기준을 충족한다. 예를 들어 초점을 받은 항목이 보이도록 할 수 있는 키보드 동작이 있다.
- Esc 키를 사용하여 덮고있는 콘텐츠를 닫는다.
- 키를 사용해 뷰포트 안의 콘텐츠를 스크롤하여 초점이 있는 항목을 표시한다.
- 오버레이 간 이동을 위한 키를 제공한다.
다음과 같은 예시가 있다.
- 사용자가 팝오버 비모달 대화상자인 채팅 인터페이스를 연다. 이로 인해 아래에 있는 페이지의 일부 콘텐츠가 완전히 가려진다. 사용자가 Tab 키를 사용하여 채팅 인터페이스에서 벗어나 탐색하면, 대화상자에 의해 완전히 가려진 링크가 초점을 받는다. 사용자가 Esc 키를 눌러 채팅 인터페이스를 닫으면 링크가 더 이상 가려지지 않는다.
- 사용자가 웹 페이지 하단에 고정된 위치의 페이지 피드백 컴포넌트를 펼친다. 그런 다음 키보드를 사용하여 펼쳐진 컴포넌트에 의해 완전히 가려진 링크로 이동하고, 키보드의 아래쪽 화살표 키 또는 스페이스바를 눌러 페이지의 콘텐츠를 스크롤함으로써 링크가 더 이상 가려지지 않게 한다.
- 사용자가 웹 기반 다중 사용자 저작 애플리케이션을 연다. 문서에 기여한 사람들의 목록을 표시하는 오버레이가 나타난다. 사용자가 Tab 키를 사용하여 기여자 목록을 탐색하고 그중 한 명을 활성화한다. 애플리케이션은 첫 번째 오버레이를 가리는 새로운 오버레이를 표시하며, 이 오버레이에는 해당 사용자의 최근 기여 내용이 표시된다. 사용자가 F6 키를 눌러 두 오버레이의 앞 뒤 순서를 전환한다.
모달 대화 상자
Section titled “모달 대화 상자”올바르게 구성된 모달 대화상자는 항상 이 성공 기준을 충족한다. 모달 대화상자가 초점을 받은 항목 바로 위에 나타나더라도, 대화상자가 나타날 때 초점을 가져오므로 초점을 받는 항목, 즉 대화상자 또는 그 안의 컴포넌트 중 하나가 보인다. 올바르게 구성된 모달은 닫힐 때까지 해당 초점을 유지하고 모달 외부와의 상호작용을 방지한다.
대화상자와 유사한 오버레이가 나타날 때 초점을 가져오지 않고, 상호작용을 오버레이 내부로 제한하지도 않으며, 초점을 잃을 때 스스로 닫히지 않고 초점이 뒤에 있는 콘텐츠로 이동하는 경우, 해당 오버레이가 초점을 받을 수 있는 다른 항목을 가릴 수 있는 위치에 있다면 이 성공 기준을 충족하지 못할 위험이 있다.
- 페이지를 조작하기 위해 키보드 인터페이스에 의존하는 시각 사용자는 키보드 초점을 받는 컴포넌트를 볼 수 있다. 이러한 사용자에는 키보드 또는 키보드 인터페이스를 사용하는 장치에 의존하는 사용자가 포함되며, 음성 입력, 입으로 불고 빠는 방식의 소프트웨어, 화면 키보드, 스캐닝 소프트웨어, 다양한 보조 기술 및 대체 키보드를 사용하는 사용자도 이에 해당한다.
- 시야가 제한적이거나 저시력인 사용자는 화면에서 위치를 파악하고 화면을 재배치하기 위해 주로 포인터를 사용할 수 있지만, 현재 키보드 상호작용 지점을 시각적으로 표시하면 여전히 도움을 받을 수 있다. 특히 화면 확대 기능으로 인해 화면에서 한 번에 볼 수 있는 영역이 줄어드는 경우에 더욱 유용하다.
- 주의력, 단기 기억 또는 실행 기능에 제한이 있는 사람은 초점이 어디에 있는지 파악할 수 있으면 도움을 받는다.
- 페이지에는 뷰포트 하단에 고정된 바닥글이 있다. 페이지에서 Tab 키를 사용해 아래로 이동할 때, 스크롤 패딩을 사용하여 키보드 초점을 받은 항목이 항상 표시되도록 뷰포트의 콘텐츠가 위로 스크롤되므로, 초점을 받은 항목이 바닥글에 의해 시각적으로 완전히 가려지지 않는다.
- 페이지에는 전체 너비의 쿠키 승인 대화상자가 있다. 이 대화상자는 모달이므로 닫힐 때까지 페이지의 다른 컨트롤에 접근하지 못하게 한다. 선택을 완료하여 제출할 때까지 쿠키 승인 대화상자의 대부분이 화면에 계속 표시되고, 이에 따라 키보드 초점 표시기의 대부분도 계속 보이므로 초점이 가려지지 않는다.
- 알림은 고정 헤더로 구현되며, 초점 표시기의 일부라도 보이도록 키보드 초점이 알림으로 이동한다. 알림은 초점을 잃으면 사라지므로 다른 컨트롤을 가리지 않으며, 이전 키보드 초점 표시기의 일부도 보인다.
자료는 정보 제공 목적으로만 제공되며 보증을 암시하지 않는다.
이 섹션에서 번호가 매겨진 각 항목은 접근성 지침 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 간주하는 기술 또는 기술의 조합을 나타낸다. 그러나 이러한 특정 기술을 사용할 필요는 없습니다. 다른 기술 사용에 대한 자세한 내용은 WCAG 성공 기준에 대한 기술 이해, 특히 “기타 기술” 섹션을 참조하라.
다음은 접근성 지침 실무 그룹에서 이 성공 기준의 실패로 간주하는 일반적인 실수이다.