[H4] 링크와 양식(form)에서 논리적인 탭 순서 정하기

원문: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H4.html

---

링크나 양식(form)에서는 tabindex 속성을 이용하여 탭 이동 순서를 지정할 수 있습니다.

---

기술설명

이 기술의 목적은 기본 탭 순서가 논리적이지 않을 때 탭 순서를 정하는 것입니다.

대부분 [(웹접근성 지침-일반기술 G59) 상호작용하는 요소들 또한 콘텐츠 순서에 맞게 순서대로 배치하자.]의 내용처럼 만들면 이 기술을 사용할 필요는 없습니다.

개발자가 텝 순서를 직접 지정할 경우 탭의 이동흐름이 직관적이지 않아서 사용자에게 혼란을 줄 수도 있습니다.

 

하지만 경우에 따라 코드 순서대로 탭이 이동하는 것이 아니라 콘텐츠의 관계로 탭이 이동되어야 합니다.

tabindex 값이 0보다 크면 tabindex가 없는 <a>요소나 tabindex가 0인 <a>요소 보다 먼저 초점(focus)을 받습니다.

tabindex 값이 0보다 큰 요소들이 먼저 포커스를 받은 다음에 나머지 요소들이 순서대로 초점을 받습니다.

 

 

예시

[예시1] 족보 검색을 통해 결혼 기록을 찾을수 있습니다.

이 검색 양식에서는 신랑과 신부에 대한 입력 필드가 있습니다.

첫 번째 필드는 신랑, 두 번 째 필드에서는 신부  입력 필드가 포함된 테이블입니다.

콘텐츠 순서는 행 단위이지만 제작자가 봤을 때는 열 단위로 이동하는 것이 더 논리적이라고 판단했습니다.

그래서 신랑 기준을 먼저다 입력한 후에 신부 기준을 입력할 수 있게 했습니다.

tabindex 속성을 이용하여 열 단위로 이동할 수 있게 탭 순서를 지정했습니다.

<form action="#" method="post">
 <table summary="첫번째 줄에는 신랑의 검색 기준이 포함되어 있고 두 번째 줄에는 신부의 검색 기준이 포함되어 있습니다.">
 <caption>결혼 기록 검색</caption>
 <tr>
   <th>검색 기준</th>
   <th>신랑</th>
   <th>신부</th>
 </tr>
 <tr>
  <th>First name</th>
  <td><input type="text" size="30" value="" name="groomfirst" 
      title="신랑의 성" tabindex="1"></td>
  <td><input type="text" size="30" value="" name="bridefirst" 
       title="신부의 성" tabindex="4"></td>
 </tr>
 <tr>
  <th>Last name</th>
  <td><input type="text" size="30" value="" name="groomlast" 
      title="신랑의 이름" tabindex="2"></td>
  <td><input type="text" size="30" value="" name="bridelast" 
      title="신부의 이름“ tabindex="5"></td>
 </tr>
 <tr>
  <th>출생지</th>
  <td><input type="text" size="30" value="" name="groombirth" 
      title="신랑의 출생지" tabindex="3"></td>
  <td><input type="text" size="30" value="" name="bridebirth" 
      title="신부의 출생지" tabindex="6"></td>
 </tr>
</table>
</form>

 

[예시2] 웹 페이지 우측상단에 검색 필드가 있습니다.

이 필드는 tabindex=’1’로 설정되어 있습니다. 그래서 콘텐츠 순서에서 첫 번째가 아니지만 탭 순서로는 첫 번째가 됩니다.

 

[예시3] Tabindex 값은 순차적일 필요도 없고 특정 값으로 시작할 필요도 없으며, 고유할 필요도 없습니다.

동일한 Tabindex 값을 가졌다면 코딩된 순서 데로 탭 순서가 이동됩니다.

<a href="xxx" tabindex = "1">목록의 1번째 링크</a>
<a href="xxx" tabindex = "1">목록의 2번째 링크/a>
<a href="xxx" tabindex = "1">추가된 링크</a>
<a href="xxx" tabindex = "1">목록의 3번째 링크</a>
  ...
<a href="xxx" tabindex = "1">목록의 20번째 링크</a>

콘텐츠의 일부에서 탭 순서가 콘텐츠 순서에 따라야 하는 경우, 각 요소에 다른 번호를 지정하기 보다는 모두 동일한 Tabindex 값을 주면 오류 발생을 줄일 수 있습니다.

또한 해당 요소들을 재배치 하거나 요소를 추가하는 경우 논리전인 탭 순서를 유지 할 수 있습니다.

 

 

자료

HTML 4.01 사양의 탭 탐색

 

 

관련기술

G59: 콘텐츠 내의 순서와 관계에 따라 대화형 요소를 순서대로 배치합니다.

F44: 의미와 작동성을 유지하지 않는 탭 순서를 생성하기 위해 tabindex를 사용하여 성공 기준 2.4.3을 충족하지 못함

F85: 순차적 탐색 순서에서 트리거 컨트롤과 인접하지 않은 대화 상자나 메뉴를 사용하여 성공 기준 2.4.3을 충족하지 못함

 

 

점검절차

1. tabindex를 사용하는 확인합니다.

2. tabindex를 사용한다면 지정된 탭 순서가 콘텐츠의 관계에 따라 접합하게 주어졌는지 확인합니다.

 

---

https://link.coupang.com/a/cl4UpZ

Do it! HTML + CSS + 자바스크립트 웹 표준의 정석: 한 권으로 끝내는 웹 기본 교과서 전면 개정판 - 프

https://link.coupang.com/a/cl4UBK

Do it! 인터랙티브 웹 페이지 만들기 - HTML/CSS | 쿠팡

*이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. 

---

 

나의 정리

링크나 양식(form)에서는 tabindex 속성을 이용하여 탭 이동 순서를 지정할 수 있습니다.

‘탭 이동 순서’란? 키보드의 [Tab]키를 눌렀을 때 요소가 초점(focus)을 받으며 이동되는 순서를 말합니다.

이 순서를 tabindex라는 속성을 이용하면 탭 이동 순서를 지정 할 수 있습니다.

tabindex=“-1”이라고 설정하면 탭 이동을 허락하지 않습니다. 즉 탭으로 선택할 수 없는 요소가 되는 것입니다.

tabindex=“0”은 기본 값으로 탭으로 선택할 수 있는 요소가 됩니다.

tabindex=“1”이면 tabindex=“0”인 요소보다 먼저 탭 순서가 주어집니다.

tabindex 값이 1 이상으로 주어지면 그것은 전체적인 순서가 됩니다.
예를 tabindex=“1”, tabindex=“2”, tabindex=“3”이 있다면 tabindex=“1”로 가장 먼저 이동하고 그다음에 tabindex=“2”, 그 다음에 tabindex=“3”으로 이동합니다. 그리고 마지막으로 tabindex=“0”인 요소로 이동합니다.

 

tabindex이용한 탭 이동 순서는 브라우저로 보여 지는 시각적 배치와는 다르게 이동 될 수 있기 때문에 사용자에게 혼란을 줄 수 있습니다. 그러므로 제작자는 신중하게 콘텐츠의 요들간의 관계를 잘 생각해서 논리적으로 탭 순서를 주어야 할 것입니다.

---

 

H4: Creating a logical tab order through links, form controls, and objects

https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H4.html

H4: Creating a logical tab order through links, form controls, and objects | Techniques for WCAG 2.0