성공 기준(SC)
2.4.3 초점 순서
(Level A) 작업 중
- 목표
- 키보드 사용자가 콘텐츠를 올바른 순서대로 탐색할 있도록 한다.
- 할 일
- 각 요소들은 유의미한 순서대로 초점을 받아야 한다.
- 중요성
- 키보드만으로도 사이트와 애플리케이션을 탐색할 수 있어야 합리적이다.
이 성공 기준의 의도는 사용자가 콘텐츠를 순차적으로 탐색하는 과정에서 콘텐츠의 의미와 키보드로 운용 가능한 순서가 일치하도록 정보에 접근을 보장하는 것에 있다. 이를 통해 해당 성공 기준은 사용자로 하여금 콘텐츠에 대한 일관된 이해 구조를 형성할 수있도록 돕기 때문에 혼란을 줄일 수 있다. 콘텐츠 안에서 논리적 관계를 반영하는 다양한 순서가 존재할 수도 있다. 예를 들어, 표에서 구성 요소들 사이를 차례대로 이동할 수 있는데, 한 행씩 혹은 한 열씩 이동하는 과정은 모두 콘텐츠 간의 논리적 관계를 반영한다. 두 가지 순서 모두 이 성공 기준을 충족할 수 있다.
웹 콘텐츠에서 순차적 탐색 순서가 결정되는 방식은 해당 콘텐츠의 기술에 따라 정의된다. 예를 들어, 단순한 HTML은 탭으로 이동하는 순서의 개념을 통해 순차적 탐색을 정의한다. 동적 HTML은 추가적인 요소들로 초점을 이동 시키기 위해 tabindex라는 속성을 이외에도 사용자와 상호작용하는 기능을 추가하여 순차적 탐색 순서를 수정할 수 있다. 스크립팅 혹은 tabindex 속성이 사용되지 않을 경우, 탐색 순서는 각 요소들이 콘텐츠의 흐름 속에서 나타나는 순서 그대로이다. (HTML 표준의 초점 참조)
이 성공 기준에서 지정하는 순차적이지 않은 키보드 탐색의 예시는 방향키로 트리 구성 요소들 속에서 이동하는 것이다. 사용자는 하나의 트리 노드에서 다른 트리 노드로 이동하기 위해 ‘위’, ‘아래’ 방향키를 사용할 수 있다. ‘오른쪽’ 방향키를 누르면 노드가 확장되고, 그 뒤에 ‘아래’ 방향키를 누르면 새로 확장된 노드로 이동한다. 이 순차 탐색은 트리 제어의 기대되는 순서에 따른다-즉, 추가적인 요소들이 확장되거나 축소되면 이 요소들은 순차 탐색 순서에 추가되거나 제거된다.
사용자가 웹페이지를 여전히 이해할 수 있고 조작 할 수 있는 한 초점 이동 순서는 프로그래밍적으로 판별된 읽기 순서(성공 기준 1.3.2 참조)와 일치하지 않아도 된다. 콘텐츠에 대해 여러 논리적 읽기 순서들이 있을 수 있는데, 초점 이동 순서는 그 중 하나와 일치 할 수 있다. 반면, 특정한 표현 방식의 순서가 프로그래밍적으로 판별된 읽기 순서와 다를 경우, 사용자는 웹 페이지를 이해하거나 조작하는데 어려움을 겪을 수 있다. 저작자는 웹 페이지를 설계(design)할 때, 이 모든 사용자들을 신중하게 고려해야한다.
예를 들어, 스크린리더 사용자는 프로그래밍적으로 판별된 읽기 순서와 상호작용하는 반면, 앞을 볼 수 있는 키보드 사용자는 웹페이지의 시각적 표현방식과 상호작용한다. 초점 이동이 두 유형의 사용자들 모두에게 타당해야 하며, 이들에게 초점이 무작위로 움직이는 것처럼 보여지지 않도록 주의 해야한다.
초점 이동 순서는 사용자가 주목할 수 있는 요소들을 논리적인 순서로 탐색할 수 있도록 해야하고, 그 순서는 해당 페이지가 전달하고자하는 모든 의미와 조작을 유지해야한다. 그런 반면, 두개의 단이 독립적이고 의미와 조작에 영향을 끼치지 않는다면, 오른쪽 단락의 요소들이 먼저 초점을 받고 그 이후에 왼쪽 단락들로 이어져도 실패했다고 볼 수 없다. 다만, 최선책으로는 초점 이동 순서가 시각적 구성으로 인해 암시된 읽기 순서를 강화하도록 보장해야 한다.
참고
This requirement does not specify what should or should not receive focus, but rather assesses the order in which elements receive focus. This success criterion does not prohibit making non-operable content (e.g., static text) focusable, or programmatically moving focus to such content. However, it is a failure of Focus Order if items receive focus in an order that impedes the meaning or operation of content, or creates confusing or illogical focus orders — for example, a control appearing to receive focus multiple times due to the use of nested focusable elements.
<div tabindex="0"><button>...</button></div>As a best practice, avoid having focusable elements which cannot be operated or actioned, as these are likely to make operation tedious for keyboard users.
명확하게:
- 초점을 받을 수 있는 구성 요소는 탐색 순서가 의미와 조작성에 영향을 미치는 경우에만 의미와 조작성을 유지하는 순서로 초점을 받아야 한다.
- 필요한 경우 의미와 조작성을 보존하는 두 개 이상의 순서가 있을 수 있다.
- 의미와 조작성을 유지하는 순서가 두 개 이상인 경우 그 중 하나만 제공하면 된다.
이러한 기술은 문서를 순차적으로 탐색하고 초점 순서가 순차적 읽기 순서와 일치할 것으로 기대하는 키보드 사용자에게 도움이 된다.
- 페이지를 조작하기 위해 키보드에 의존해야 하는 지체 장애가 있는 사람들은 논리적이고 사용 가능한 초점 순서의 이점을 누릴 수 있다.
- 난독 장애가 있는 사람은 탭 동작이 예상치 못한 곳에 초점을 맞추면 방향 감각을 잃을 수 있다. 논리적 초점 순서의 이점을 누릴 수 있다.
- 시각 장애가 있는 사용자는 탭 동작이 예상치 못한 곳에 초점을 맞추거나 대화형 요소 주변의 콘텐츠를 쉽게 찾을 수 없을 때 방향 감각을 잃을 수 있다.
- 화면 확대기로 크게 확대해서 사용하는 개인은 페이지의 작은 부분만 볼 수 있다. 이러한 사용자는 초점 순서가 논리적이지 않은 경우 잘못된 맥락으로 내용을 해석할 수 있다.
-
대화형 트리 구조가 포함된 웹 페이지에서 사용자는 위쪽 및 아래쪽 화살표 키를 사용하여 트리 노드에서 트리 노드로 이동할 수 있다. 오른쪽 화살표 키를 누르면 노드가 확장되고, 아래쪽 화살표 키를 사용하면 새로 확장된 노드로 이동한다.
-
웹 페이지는 스크립팅을 통해 모덜리스(modeless) 대화 상자를 구현한다. 실행 버튼이 동작하면 대화 상자가 열힌다. 대화 상자의 상호 작용 가능한 요소는 버튼 바로 뒤의 초점 순서로 들어간다. 대화 상자가 열려 있을 때, 초점 순서는 버튼에서 대화 상자의 요소들로, 그 다음 버튼 뒤의 상호작용 요소로 이동한다. 대화 상자가 닫혀 있을 때, 초점 순서는 버튼에서 다음 요소로 이동한다.
-
웹 페이지는 스크립팅을 통해 모달(modal) 대화 상자를 구현한다. 실행 버튼이 동작하면 대화 상자가 열리고 대화 상자 내에 초점이 설정된다. 대화 상자가 열려 있는 동안 초점은 대화 상자의 요소로 제한된다. 대화 상자가 닫히면 초점은 버튼이나 버튼 뒤의 요소로 돌아간다.
-
HTML 웹 페이지는 본문 내용 이후 HTML에서 발생하는 왼쪽 탐색 기능으로 생성되고, CSS로 스타일이 지정되어 페이지 왼쪽에 표시된다. 이는 tabIndex 속성이나 JavaScript가 필요 없이 먼저 본문 내용으로 초점을 이동할 수 있도록 하기 위한 것이다.
참고
이 예는 성공 기준을 통과하지만 모든 CSS 포지셔닝이 반드시 그런 것은 아니다. 더 복잡한 포지셔닝 예제는 의미와 조작성을 보존할 수도 있고 그렇지 않을 수도 있다.
-
다음 예는 성공 기준을 충족하지 못한다:
회사의 웹 사이트에는 마케팅 데이터를 수집하고 사용자가 회사에서 발행하는 여러 뉴스레터를 구독할 수 있는 양식이 포함되어 있다. 마케팅 데이터 수집 양식 섹션에는 이름, 거리 주소, 도시, 시/도, 우편번호 등의 필드가 포함된다. 양식의 또 다른 섹션에는 사용자가 수신하려는 뉴스레터를 표시할 수 있는 여러 확인란이 포함되어 있다. 그러나 양식의 탭 순서는 양식의 여러 섹션에 있는 필드 사이를 건너뛰므로 초점이 이름 필드에서 확인란으로 이동한 다음 주소, 다른 확인란으로 이동한다.
이 섹션의 각 번호가 매겨진 항목은 접근성 지침 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 판단하는 기법 또는 기법의 조합을 나타낸다. 기법은 기준의 최소 요구 사항을 넘어설 수 있다. 이러한 기법에서 포괄하지 않은 기준 충족의 다른 방법이 있을 수 있다. 다른 기법 사용에 대한 정보는 WCAG 성공 기준에 대한 기법 이해, 특히 “기타 기법” 섹션을 참조하라.
- G59: Placing the interactive elements in an order that follows sequences and relationships within the content
- 아래 기법들 중 한 가지를 사용해 콘텐츠의 순차와 관계들에 따라 요소들에게 순서대로 초점을 부여할 수 있다:
- 아래 기법들 중 한 가지를 사용해 웹 페이지를 동적으로 변화 시킬 수 있다:
다음은 접근성 지침 실무 그룹에서 이 성공 기준의 실패로 간주하는 일반적인 실수이다.