탭(Tab) 키로 이동하는 초점은 코딩 순서와 동일합니다.
그러니 보여지는 것에만 치중하지 말고 초점 이동순서를 고려하여 코딩해야 합니다.
기술설명
이 기술은 상호작용하는 요소가 콘텐츠의 순서에 맞게 배치되어 순서대로 초점이 이동될 수 있도록 하는 것입니다.
HTML에서 콘텐츠를 배치할 때, 배치 순서에 따라 링크 및 상호작용(<form>, <input>, <selct>등) 등의 요소들에 순서가 지정됩니다. 이렇게 주어진 순서를 '탭 순서(tab order 또는 tab index)'라고 합니다.
'탭 순서'는 기술을 이용하여 변경시킬 수 있습니다.
예를 들어 HTML에서 기본적으로 초점(Focus)이 이동하는 순서는 요소가 배치된 순서와 동일합니다.
HTML소스의 순서가 브라우저에서 보이는 시각적 순서와 일치하는 경우 초점이 순서대로 이동하게 됩니다.
하지만 소스의 순서와 시각적 순서가 다른 경우 '탭 순서'는 시각적으로 보이는 콘텐츠의 논리적 관계를 반영해야 합니다.
예시
- 양식(form)에 순차적으로 입력해야 하는 두 개의 텍스트 입력필드가 있습니다.
첫 번째 텍스트 입력필드는 콘텐츠에서 첫 번째로 배치되어 있고 두 번째 입력 필드는 두 번째로 배치되어 있습니다. - 양식(form) 안에 두 개의 섹션(section)이 있습니다.
한 섹션 안에는 작성자에 대한 정보가 포함되어 있습니다. 다른 섹션에는 배우자에 대한 정보가 포함되어 있습니다.
작성자 정보가 포함된 섹션은 상호작용하는 요소로 구성되어 있어 배우자 정보가 포함된 섹션보다 먼저 포커스를 받아야 합니다. 각 섹션의 요소는 해당 섹션의 흐름 데로 포커스가 이동됩니다.
자료
H4: 링크, 양식 컨트롤 및 개체를 통해 논리적 탭 순서 만들기
SCR26: 트리거 요소 바로 다음에 문서 개체 모델에 동적 콘텐츠 삽입
SCR27: 문서 개체 모델을 사용하여 페이지 섹션 재정렬
SCR37: 장치 독립적인 방식으로 사용자 정의 대화 상자 만들기
점검절차
1. 콘텐츠에서 상호작용 요소의 순서를 결정합니다.
2. 상호작용 요소의 논리적 순서를 결정합니다.
3. 콘텐츠 내에 상호작용하는 요소의 순서가 논리적 순서와 동일한지 확인합니다.
3번 절차를 따라야 합니다.
나의 정리
여기에서 말하는 '상호작용하는 요소'를 알아보자.
사용자가 어떤 내용을 입력하면 그 내용을 서버로 보낸다. 그러면 서버는 그 내용을 확인하고 그에 해당하는 정보를 사용자에게 제공합니다. 즉 사용자와 서버가 서로 정보를 주고받는 것을 상호작용이라고 하며 이런 상호작용을 할 수 있게 해주는 요소가 폼(form)입니다.
폼 요소에서 대표적으로 사용하는 요소에는 <form>, <input>, <select>, <textarea> 등이 있습니다.
정리하면 '상호작용하는 요소'는 폼(form)에서 사용되는 <form>, <input>, <select>, <textarea>등의 요소를 말하는 것입니다.
이런 요소들은 주로 게시판 글쓰기나 회원가입, 로그인에서 많이 사용되는데요.
'상호작용하는 요소'들도 흐름에 맞게 HTML 코딩을 해야 한다는 것입니다.
이렇게 해야 하는 이유는 HTML 코딩에 배치된 순서대로 요소에 '탭 순서(tab order)'가 지정되기 때문입니다.
'탭 순서(tab order)'는 '탭(Tab)'키로 요소의 초점을 이동시키는 경우, 그 이동 순서를 지정해 주는 것입니다.
특별한 속성을 사용하지 않는 이상 코딩에 대치된 순서로 '탭 순서'가 지정됩니다.
예를 들어 '탭(Tab)'키로 초점을 이동시켜 아이디 입력한 다음에 비밀번호를 입력하게 하고 싶다면 아래와 같이 코딩해야 합니다.
...
<input type="text" name="id" id="id" title="아이디" />
<input type="password" name="password" id="password" title="비밀번호" />
...코딩에서 아이디가 먼저 선언되었기 때문에 '탭 순서'는 아이디가 먼저이고 그다음이 비밀번호입니다.
그래서 초점 이동 순서는 아이디가 먼저이고 그다음이 비밀번호 부분입니다.
다시 말하면 '탭'키를 누르면 아이디 부분에 먼저 초첨이 가고 다시 '탭'키를 누르면 비밀번호 부분으로 초점이 이동한다는 것입니다.
만약 이런 흐름을 무시하고 코딩을 순서 없이 작성하고, CSS를 이용하여 요소들의 위치를 조절하였다면 ‘탭(Tab)’키를 이용하여 초점을 이동하는 경우 브라우저에서 보여지는 데로 위에서 아래로, 좌측에서 우측으로 이동하는 것이 아니라, 상하좌우로 순서 없이 초점들이 이동하여 사용자에게 큰 혼란을 줄 것입니다.
보조기구를 사용하시는 분들이 회원가입이나 글쓰기 같이 폼(form)을 작성하는 경우, '탭(tab)'키를 이용하여 순서대로 작성할 수 있도록, 코딩을 할 때 이동 순서와 동일하게 작성해야 합니다.
G59: Placing the interactive elements in an order that follows sequences and relationships within the content
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G59.html
G59: Placing the interactive elements in an order that follows sequences and relationships within the content | Techniques for W
The objective of this technique is to ensure that interactive elements receive focus in an order that follows sequences and relationships in the content. When designing the content, the interactive elements such as links and form controls are placed in the
www.w3.org
'웹접근성지침(WCAG2.0)' 카테고리의 다른 글
| [웹접근성 지침-일반기술 G61] 페이지 마다 '반복되는 구성요소'가 있다면 '동일한 상대적 순서'에 따라 배치해야 한다. (0) | 2024.03.02 |
|---|---|
| [웹접근성 지침-일반기술 G60] 사운드는 3초 이내에 정지되어야 한다. (0) | 2024.02.25 |
| [웹접근성 지침-일반기술 G58] '텍스트'가 아닌 '콘텐츠' 옆에 '시간 기반 미디어의 대안'에 대한 링크 제공하기 (0) | 2024.02.17 |
| [웹접근성 지침-일반기술 G57] 콘텐츠의 의미에 맞게 순서대로 배치하자. (0) | 2024.02.14 |
| [웹접근성 지침-일반기술 G56] 영상이나 오디오에서 '배경소리'는 '음성'보다 최소 20데시벨 낮아야 한다. (0) | 2024.02.09 |
