성공 기준(SC)
2.4.3 초점 순서
(Level A)
- 목표
- 키보드 사용자가 올바른 순서로 콘텐츠를 탐색한다.
- 할 일
- 각 요소가 의미있는 순서대로 초점을 받는다.
- 중요성
- 키보드만으로도 사이트와 애플리케이션을 탐색할 수 있어야 합리적이다.
이 성공 기준의 의도는 사용자가 콘텐츠를 순차적으로 탐색하는 과정에서 콘텐츠의 의미와 키보드로 운용 가능한 순서가 일치하도록 정보 접근을 보장하는 것에 있다. 이를 통해 사용자로 하여금 콘텐츠에 대한 일관된 이해 구조를 형성해 혼란을 줄일 수 있다. 콘텐츠 안에서 논리적 관계를 반영하는 다양한 순서가 존재할 수 있다. 예를 들어, 표의 구성 요소 사이를 차례대로 이동할 수 있는데, 한 번에 한 행 혹은 한 열씩 이동하는 과정은 모두 콘텐츠 간의 논리적 관계를 반영한다. 두 가지 순서 모두 이 성공 기준을 충족할 수 있다.
웹 콘텐츠에서 순차적 탐색 순서가 결정되는 방식은 해당 콘텐츠의 기술에 따라 정의된다. 예를 들어, 단순한 HTML은 탭으로 이동하는 순서의 개념을 통해 순차적 탐색을 정의한다. 동적 HTML은 추가 요소가 초점을 받을 수 있게 스크립팅을 사용해 tabindex 속성으로 탐색 순서를 바꿀 수 있다. 스크립팅 혹은 tabindex 속성이 사용되지 않을 경우, 탐색 순서는 각 요소들이 콘텐츠의 흐름에서 나타나는 순서 그대로다. (HTML 표준의 초점 참조)
이 성공 기준에서 지정하는 순차적이지 않은 키보드 탐색의 예시는 방향키로 트리 구성 요소를 탐색하는 것이다. 사용자는 하나의 트리 노드에서 다른 트리 노드로 이동하기 위해 ‘위’, ‘아래’ 방향키를 사용할 수 있다. ‘오른쪽’ 방향키를 누르면 노드가 확장되고, 그 뒤에 ‘아래’ 방향키를 누르면 새로 확장된 노드로 이동한다. 이 탐색 순서는 트리 제어의 기대 순서를 따른다. 즉, 추가 항목이 확장되거나 축소되면 탐색 순서에 추가되거나 삭제된다.
사용자가 웹페이지를 사용자가 웹페이지를 여전히 이해할 수 있고 조작할 수 있는 한 초점 순서는 프로그래밍적으로 판별된 읽기 순서(성공 기준 1.3.2 참조)와 일치하지 않아도 된다. 콘텐츠에 대해 여러 논리적 읽기 순서들이 있을 수 있는데, 초점 순서는 그 중 하나와 일치 할 수 있다. 그러나 특정한 표현 방식의 순서가 프로그래밍적으로 판별된 읽기 순서와 다를 경우, 사용자는 웹 페이지를 이해하거나 조작하는데 어려움을 겪을 수 있다. 저작자는 웹 페이지를 설계할 때, 이런 모든 사용자를 신중하게 고려해야한다.
예를 들어, 스크린리더 사용자는 프로그래밍적으로 판별된 읽기 순서와 상호작용하는 반면, 시력이 있는 키보드 사용자는 웹 페이지의 시각적 표현과 상호작용한다. 초점 순서는 두 유형의 사용자 모두에게 타당해야 하며, 이들에게 초점이 무작위로 움직이는 것처럼 보이지 않도록 주의해야 한다. 초점 순서는 초점을 받는 요소들을 사용자가 논리적인 순서로 탐색할 수 있도록 해야하고, 그 순서는 해당 페이지가 전달하고자하는 모든 의미와 조작을 유지해야한다. 요소들이 초점을 받는 순서가 논리적이고 시각적 표현방식으로 암시된 콘텐츠의 계층과 관계가 유지된다면, 초점 순서가 반드시 웹페이지의 시각적인 구성을 따를 필요는 없다. 예를 들어, 서구의 시스템은 콘텐츠가 왼쪽에서 오른쪽으로 흐르는 것으로 간주한다. 그러나 다단 구성에서는 왼편의 단을 시작으로 위에서 아래로, 그 후에 초점이 오른편 단으로 가는 순서일 수 있다. 반면에 두개의 단이 독립적이고 의미와 조작에 영향을 끼치지 않는다면, 오른쪽 단락의 요소들이 먼저 초점을 받고 그 이후에 왼쪽 단락들로 이어져도 실패했다고 볼 수 없다. 모범 사례로서 초점 순서가 시각적 구성이 암시하는 읽기 순서를 강화하도록 보장해야 한다.
참고
이 요구 사항은 초점을 받거나 받지 않아야 하는지를 특정하기 보다는, 요소들이 초점을 받는 순서가 적절한지를 다룬다.” 이 성공 기준은, 조작이 불가능한 콘텐츠(예: 정적인 텍스트)가 초점을 받는 것이나 프로그래밍적으로 초점을 해당 콘텐츠로 이동시키는 것을 금지하지 않는다. 그러나, 요소가 콘텐츠의 의미나 조작을 방해하는 순서대로 초점을 받거나, 혼란스럽거나 비논리적인 초점 순서를 따른 다면, 이것은 초점 이동이 실패한 것으로 간주한다. 예를 들어, 초점을 받을 수 있는 하위 요소를 포함하기 때문에 하나의 컨트롤이 초점을 여러 번 받는 것처럼 보이는 경우이다.
<div tabindex="0"><button>...</button></div>모범 사례로 조작이 불가능하거나 실행될 수 없는 요소들을 초점을 받을 수 있게하는 것을 피해야 한다. 이러한 요소가 키보드 사용자에게 조작을 지루하게 만들 가능성이 높기 때문이다.
초점 이동 순서는 사용자가 주목할 수 있는 요소들을 논리적인 순서로 탐색할 수 있도록 해야하고, 그 순서는 해당 페이지가 전달하고자하는 모든 의미와 조작을 유지해야한다. 그런 반면, 두개의 단이 독립적이고 의미와 조작에 영향을 끼치지 않는다면, 오른쪽 단락의 요소들이 먼저 초점을 받고 그 이후에 왼쪽 단락들로 이어져도 실패했다고 볼 수 없다. 다만, 최선책으로는 초점 이동 순서가 시각적 구성으로 인해 암시된 읽기 순서를 강화하도록 보장해야 한다.
명확히 한다면,
- 초점을 받을 수 있는 구성요소는 의미와 조작성을 유지하는 순서로 초점을 받아야 한다.
- 초점 이동 순서는 시각적 표현 방식이나 레이아웃을 반드시 따를 필요는 없다.
- 의미와 조작성을 유지하는 순서가 하나 이상일 경우에는 하나만 제공해도 된다.
- 정적인/상호작용이 없는 요소 역시 초점을 받을 수 있다. 단, 콘텐츠의 조작을 방해하거나, 혼란스럽고 비논리적인 초점 순서가 되어서는 안 된다.
이러한 기술은 문서를 순차적으로 탐색하고 초점 순서가 순차적 읽기 순서와 일치할 것으로 기대하는 키보드 사용자에게 도움이 된다.
- 페이지 조작을 위해 키보드에 의지해야 하는 운동 장애를 가진 사람에게 논리적이고 사용이 용이한 초점 순서가 도움이 된다.
- 탭 키를 누르는 동작이 예상치 못한 곳으로 초점을 이동시킨다면, 읽기 장애가 있는 사람은 방향을 잃을 수 있다. 이들은 논리적 초점 순서에서 이점을 얻는다.
- 시각 장애가 있는 사람은 탭 키를 눌렀을 때 초점이 예상치 못한 곳으로 이동하거나 상호작용 요소 주변의 콘텐츠를 쉽게 찾을 수 없을 때 방향을 잃을 수 있다.
- 높은 배율의 화면 확대기 사용자는 페이지의 작은 부분만 볼 수 있다. 이런 사용자에게 초점 순서가 비논리적으로 제공된다면, 잘못된 맥락에서 항목을 해석할 수 있다.
- 대화형 트리 구조가 있는 웹 페이지에서 사용자는 ‘위’와 ‘아래’ 방향 키를 통해 트리 노드 간을 이동할 수 있다. ‘오른쪽’ 방향키를 누르면 노드가 확장되고, ‘아래쪽’ 방향키를 누르면 새로 확장된 노드로 이동한다.
- 웹 페이지는 모드리스(modeless) 대화 상자를 구현한다. 실행 버튼을 누르면 대화 상자가 열린다. 대화 상자 내의 상호 작용 요소는 버튼 바로 다음 초점 순서에 삽입된다. 대화상자가 열려있을 때, 초점 순서는 버튼에서 대화상자 안의 요소로 이동하고, 그 다음 버튼 뒤의 상호작용 요소로 이동한다. 대화상자가 닫히면, 초점 순서는 실행 버튼에서 그 다음 요소로 이동한다.
- 웹페이지는 모달 대화 상자를 구현한다. 실행 버튼을 누르면 대화상자가 열리고 해당 대화 상자 안으로 초점이 설정된다. 대화 상자가 열려있는 한, 그 대화 상자 밖에 있는 모든 웹 페이지 콘텐츠는 비활성화되어 초점을 받지 못한다. (다만, 구현 방식에 따라 초점 순환에 사용자 에이전트 컨트롤을 포함할 수도 있다.) 대화 상자를 닫으면, 초점은 실행 버튼이나 그 다음 요소로 이동한다.
- 웹 페이지의 HTML에서 왼쪽 탐색 메뉴를 주요 본문 콘텐츠 다음에 배치하고 CSS로 스타일을 지정하여 페이지 왼쪽에 배치되도록 생성한다. 이것은
tabindex속성이나 자바스크립트가 없어도 초점 이동이 주요 콘텐츠로 먼저 이동할 수 있도록 하기 위한 것이다.참고
이 예제는 성공 기준을 준수하지만, 모든 CSS 배치가 성공 기준을 준수하지는 않는다. 더 복잡한 배치 예제에서는 의미와 조작성을 유지할 수도, 그렇지 않을 수도 있다.
- 다음 예제는 성공 기준을 준수하지 못한다. 어떤 회사의 웹사이트에 마케팅 데이터를 수집하고 사용자가 기업이 배포한 여러 뉴스레터를 구독할 수 있도록 하는 양식이 있다. 마케팅 데이터를 수집하는 섹션의 입력란에는 이름, 도로명 주소, 시, 주 혹은 지방 행정 구역 그리고 우편번호를 포함할 수 있다. 양식의 다른 섹션은 사용자들이 어떤 뉴스레터를 받고 싶은지 정할 수 있는 여러 체크박스를 포함하고 있다. 그러나 해당 양식의 탭 순서는 양식의 서로 다른 섹션 사이를 건너뛰어, 초점이 이름 입력란에서 체크박스로, 그 다음 도로명 주소로, 그 다음 다른 체크박스로 이동한다.
이 섹션의 각 번호가 매겨진 항목은 접근성 지침 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 판단하는 기법 또는 기법의 조합을 나타낸다. 기법은 기준의 최소 요구 사항을 넘어설 수 있다. 이러한 기법에서 포괄하지 않은 기준 충족의 다른 방법이 있을 수 있다. 다른 기법 사용에 대한 정보는 WCAG 성공 기준에 대한 기법 이해, 특히 “기타 기법” 섹션을 참조하라.
- G59: Placing the interactive elements in an order that follows sequences and relationships within the content
- 아래 기법들 중 한 가지를 사용해 콘텐츠의 순차와 관계들에 따라 요소들에게 순서대로 초점을 부여할 수 있다:
- 아래 기법들 중 한 가지를 사용해 웹 페이지를 동적으로 변화 시킬 수 있다:
다음은 접근성 지침 실무 그룹에서 이 성공 기준의 실패로 간주하는 일반적인 실수이다.