성공기준 이해 2.4.3:초점 순서 (Level A)

요약

목표

키보드 사용자가 올바른 순서로 콘텐츠를 탐색한다.

할 일

요소는 의미를 유지하는 순서로 초점을 받는다.

중요성

키보드만으로 사이트나 애플리케이션을 탐색하는 것이 합리적이다.

의도

이 성공 기준의 목적은 사용자가 콘텐츠를 순차적으로 탐색할 때 콘텐츠의 의미와 일치하고 키보드로 조작할 수 있는 순서로 정보를 접하게 하는 것이다. 이는 사용자가 콘텐츠에 대한 일관된 이해 구조을 형성할 수 있도록 하여 혼란을 줄인다. 콘텐츠의 논리적 관계를 반영하는 다양한 순서가 있을 수 있다. 예를 들어, 테이블의 구성 요소를 한 번에 한 행씩 이동하거나 한 번에 한 열씩 이동하는 것은 모두 내용의 논리적 관계를 반영한다. 어느 순서든 이 성공 기준을 충족할 수 있다.

웹 콘텐츠에서 순차적 탐색 순서가 결정되는 방식은 콘텐츠의 기술에 따라 정의된다. 예를 들어 간단한 HTML은 탭 순서 개념을 통해 순차적 탐색을 정의한다. 동적 HTML은 추가 요소에 초점을 맞출 수 있도록 tabindex 속성을 추가하는 것과 함께 스크립팅을 사용하여 탐색 순서를 수정할 수 있다. 스크립팅 또는 tabindex 속성이 사용되지 않는 경우 탐색 순서는 구성 요소가 콘텐츠 스트림에 나타나는 순서이다. (HTML 4.01 사양, 섹션 17.11, "요소에 포커스 지정" 참조).

이 성공 기준에서 다루는 순차 탐색이 아닌 키보드 탐색의 예는 화살표 키 탐색을 사용하여 트리 구성 요소를 탐색하는 것이다. 사용자는 위쪽 및 아래쪽 화살표 키를 사용하여 트리 노드에서 트리 노드로 이동할 수 있다. 오른쪽 화살표 키를 누르면 노드가 확장되고, 아래쪽 화살표 키를 사용하면 새로 확장된 노드로 이동한다. 이 탐색 순서는 트리 컨트롤의 예상 순서를 따흔다. 즉, 추가 항목이 확장되거나 축소되면 탐색 순서에 추가되거나 제거된다.

사용자가 웹 페이지를 이해하고 작동할 수 있는 한 초점 순서는 프로그래밍 방식으로 판별된 읽기 순서(적합 기준 1.3.2 참조)와 동일하지 않을 수 있다. 콘텐츠에 대해 여러 가지 논리적 읽기 순서가 있을 수 있으므로 초점 순서는 그 중 하나와 일치할 수 있다. 그러나 특정 표현의 순서가 프로그래밍 방식으로 판별된 읽기 순서와 다른 경우 이러한 표현 중 하나의 사용자는 웹 페이지를 이해하거나 조작하기 어려울 수 있다. 저작자는 웹 페이지를 디자인할 때 이러한 모든 사용자를 신중하게 고려해야 한다.

예를 들어 화면 낭독기 사용자는 프로그래밍 방식으로 판별된 읽기 순서와 상호 작용하는 반면, 시력이 있는 키보드 사용자는 웹 페이지의 시각적 표현과 상호 작용한다. 초점 순서가 두 사용자 모두에게 의미가 있고 두 사용자 모두에게 무작위로 뛰어다니는 것처럼 보이지 않도록 주의해야 한다.

명확하게:

• 초점을 받을 수 있는 구성 요소는 탐색 순서가 ​​의미와 조작성에 영향을 미치는 경우에만 의미와 조작성을 유지하는 순서로 초점을 받아야 한다.
• 필요한 경우 의미와 조작성을 보존하는 두 개 이상의 순서가 있을 수 있다.
• 의미와 조작성을 유지하는 순서가 두 개 이상인 경우 그 중 하나만 제공하면 된다.

이점

이러한 기술은 문서를 순차적으로 탐색하고 초점 순서가 순차적 읽기 순서와 일치할 것으로 기대하는 키보드 사용자에게 도움이 된다.

• 페이지를 조작하기 위해 키보드에 의존해야 하는 지체 장애가 있는 사람들은 논리적이고 사용 가능한 초점 순서의 이점을 누릴 수 있다.
• 난독 장애가 있는 사람은 탭 동작이 예상치 못한 곳에 초점을 맞추면 방향 감각을 잃을 수 있다. 논리적 초점 순서의 이점을 누릴 수 있다.
• 시각 장애가 있는 사용자는 탭 동작이 예상치 못한 곳에 초점을 맞추거나 대화형 요소 주변의 콘텐츠를 쉽게 찾을 수 없을 때 방향 감각을 잃을 수 있다.
• 화면 확대기로 크게 확대해서 사용하는 개인은 페이지의 작은 부분만 볼 수 있다. 이러한 사용자는 초점 순서가 논리적이지 않은 경우 잘못된 맥락으로 내용을 해석할 수 있다.

예제

• 대화형 트리 구조가 포함된 웹 페이지에서 사용자는 위쪽 및 아래쪽 화살표 키를 사용하여 트리 노드에서 트리 노드로 이동할 수 있다. 오른쪽 화살표 키를 누르면 노드가 확장되고, 아래쪽 화살표 키를 사용하면 새로 확장된 노드로 이동한다.
• 웹 페이지는 스크립팅을 통해 모덜리스(modeless) 대화 상자를 구현한다. 실행 버튼이 동작하면 대화 상자가 열힌다. 대화 상자의 상호 작용 가능한 요소는 버튼 바로 뒤의 초점 순서로 들어간다. 대화 상자가 열려 있을 때, 초점 순서는 버튼에서 대화 상자의 요소들로, 그 다음 버튼 뒤의 상호작용 요소로 이동한다. 대화 상자가 닫혀 있을 때, 초점 순서는 버튼에서 다음 요소로 이동한다.
• 웹 페이지는 스크립팅을 통해 모달(modal) 대화 상자를 구현한다. 실행 버튼이 동작하면 대화 상자가 열리고 대화 상자 내에 초점이 설정된다. 대화 상자가 열려 있는 동안 초점은 대화 상자의 요소로 제한된다. 대화 상자가 닫히면 초점은 버튼이나 버튼 뒤의 요소로 돌아간다.

• HTML 웹 페이지는 본문 내용 이후 HTML에서 발생하는 왼쪽 탐색 기능으로 생성되고, CSS로 스타일이 지정되어 페이지 왼쪽에 표시된다. 이는 tabIndex 속성이나 JavaScript가 필요 없이 먼저 본문 내용으로 초점을 이동할 수 있도록 하기 위한 것이다.

  참고

  이 예는 성공 기준을 통과하지만 모든 CSS 포지셔닝이 반드시 그런 것은 아니다. 더 복잡한 포지셔닝 예제는 의미와 조작성을 보존할 수도 있고 그렇지 않을 수도 있다.

• 다음 예는 성공 기준을 충족하지 못한다:

  회사의 웹 사이트에는 마케팅 데이터를 수집하고 사용자가 회사에서 발행하는 여러 뉴스레터를 구독할 수 있는 양식이 포함되어 있다. 마케팅 데이터 수집 양식 섹션에는 이름, 거리 주소, 도시, 시/도, 우편번호 등의 필드가 포함된다. 양식의 또 다른 섹션에는 사용자가 수신하려는 뉴스레터를 표시할 수 있는 여러 확인란이 포함되어 있다. 그러나 양식의 탭 순서는 양식의 여러 섹션에 있는 필드 사이를 건너뛰므로 초점이 이름 필드에서 확인란으로 이동한 다음 주소, 다른 확인란으로 이동한다.

기법

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