아이템을 잘 찾을 수 있게 색상, 모양, 크기, 상대적 위치 등의 감각정보를 제공해야 합니다.
기술설명
이 기술의 목적은 웹 페이지 내에 있는 아이템(Item)이 모양, 크기, 소리, 위치 등의 감각으로 인지 할 수 있는 경우,
그런 감각에 의존하지 않고도 콘텐츠에서 참조(=참고로 비교하고 대조 함)하여 인지하게 하는 것입니다.
예를 들어 참조 내용은 아이템 또는 레이블(Label)의 기능을 설명 할 수 있어야 합니다.
예시
[예제1] 양식(Form)이 있습니다. 작성한 내요을 제출하고 다음 단계로 넘어가기 위해서는 원형 버튼을 눌러야 합니다.
원형 버튼에는 '이동'이라고 적혀있습니다.
제공 되는 지침에는 "작성한 양식을 제출하려면 '이동'이라고 적혀있는 원형 버튼을 눌러야 합니다."라고 명시되어 있습니다. 여기에서 버튼을 찾는데 필요한 모양과 텍스트 정보를 제공했습니다.
[예제2] 온라인 교육을 제공하는 웹 페이지의 지침에는 "원하는 온라인 과정으로 이동하려면 오른쪽에 '수업 목록'이라고 되어 있는 링크 목록을 이용해주세요."라고 명시되어 있습니다.
이 설명은 링크 목록을 잘 찾을 수 있게 위치와 텍스트 정보를 제공했습니다.
[예제3] 아래 코드예제는 오른 쪽 아래 모서리에 버튼을 배치하였고 위치를 표시했습니다.
"오른쪽 하단의 [미리보기] 버튼을 눌러주세요."라고 되어있는 텍스트 라벨은 위치 정보가 의미 없는 선형화된 버전에서 사용자가 어떤 버튼에 접근해야 되는지를 명확하게 알려주고 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tbody>
<tr>
<td colspan="2">오른쪽 하단의 [미리보기] 버튼을 눌러주세요.</td>
<td><button>인쇄</button></td>
</tr>
<tr>
<td><button>최소</button></td>
<td><button>등록</button></td>
<td><button>미리보기</button></td>
</tr>
</tbody>
</table>
</body>
</html>
점검절차
1. 아이템의 모양, 크기, 상대적 위치를 알지 못해도 해당 아이템을 찾아서 식별할 수 있는 추가 정보가 참조 자료로 제공되는지 확인합니다.
나의 정리
'스크린 리더'를 사용하거나 시각적 문제가 있는 사용자의 경우, 양식(Form)을 작성할 때 폼에서 사용할 수 있는 '버튼'이나 '기능'을 알기에는 힘든 점이 많습니다. 그래서 양식(Form)을 작성하기 전에 사용방법을 먼저 알려주는 지침을 제공합니다. 지침에는 '버튼'이나 '기능'같은 아이템(Item)의 사용 방법 및 모양, 크기, 상대적 위치 등 감각으로 알 수 있는 정보도 같이 제공합니다.
예를 들면 지침에 "입력한 양식을 제출하려면 하단 좌측에 있는 [등록]이라고 된 파란색 원형 버튼을 눌러주세요.",
"양식을 다시 작성하고 싶다면 하단 우축에 있는 [다시 쓰기]라고 된 회색 네모 버튼을 눌러주세요."라고 제공해 주는 겁니다. 이렇게 정보를 제공하면 사용자 들은 원하는 항목을 빠르게 인지할 수 있습니다.
아이템을 잘 찾을 수 있게 색상, 모양, 크기, 상대적 위치 등의 감각정보를 제공해야 합니다.
G96: Providing textual identification of items that otherwise rely only on sensory information to be understood
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G96.html
G96: Providing textual identification of items that otherwise rely only on sensory information to be understood | Techniques for
The objective of this technique is to ensure that items within a Web page are referenced in the content not only by shape, size, sound or location, but also in ways that do not depend on that sensory perception. For example, a reference may also describe t
www.w3.org
