접근성 가이드

온라인 서식을 포함하는 콘텐츠는 서식 작성에 필요한 정보, 서식 구성 요소, 필요한 기능, 작성 후 제출 과정 등, 서식과 관련한 모든 정보를 제공해야 한다.

이해의 용이성
작성자
관리자
작성일
2022-06-24 15:35
조회
895

온라인 서식을 포함하는 콘텐츠는 서식 작성에 필요한 정보, 서식 구성 요소, 필요한 기능, 작성 후 제출 과정 등, 서식과 관련한 모든 정보를 제공해야 한다.

직접적으로 대응하는 WAI의 지침은 지침 10 "잠정적인 접근성 보장 기법을 사용한다"의 체크포인트 10.2, 10.3, 10.4이며 중요도 선별에 있어서 미 섹션 508의 paragraph(n)을 따른 것으로 보입니다.

동 항목은 현실적으로 폼(form)의 처리와 관련되며 스크린 리더등의 처리 능력에 달려 있긴 하나 다음 3가지를 준수하여야 합니다. 첫째, 항목간 탐색이 쉽게 되기 위해 레이블을 붙여주어야 합니다. 둘째, input에는 기본 텍스트를 표시하여야 합니다. 셋째, text area 안에는 미리 정해진 기본값을 넣어두어야 합니다.
현재 많이 사용되는 플래쉬는 아직 접근성 지원이 미흡하며 따라서 선진국 어느 나라도 플래시 메뉴등의 기법은 사용하지 않고 있습니다. 그러나 모범을 보여야 할 정부중앙부처(특히 보건복지부!)까지도 플래시로 메뉴를 구성하는 것이 현실입니다. 애플릿 및 플러그인 종류는 접근성을 저해하는 근본적인 요소이므로 메뉴 및 폼등에서는 사용을 자제하도록 해야 합니다.

 

[대상 장애]

 - 웹 접근성 지침 제정 목적에 언급된 모든 장애

 

사용예

■ <label>를 사용하는 경우

전화번호 : 지역번호 국번 가입자번호   

<span>전화번호 :
<label for="t1"><img src="" width="1" height="1" alt="지역번호"></label>
<label for="t2"><img src="" width="1" height="1" alt="국번"></label>
<label for="t3"><img src="" width="1" height="1" alt="가입자번호"></label>
</span>
<span>
<input type="text" name="t1" id="t1">
<input type="text" name="t2" id="t2">
<input type="text" name="t3" id="t3">
</span>

예제와 같이 작성된 스크린 리더로 페이지를 읽던중 "전화번호"라는 프롬프트(입력을 요구하는 지시자)를 만나게 되면 첫번째 입력 필드에 전화 번호를 적게 됩니다. 그런데, 두번째 입력 필드를 만나면 그때서야 두자리로 나눠서 써야 한다는것을 인지하게 됩니다. 세번째 입력 필드를 만나면 세자리로 나눠서 써야 한다는것을 깨닫고 다시 고쳐써야 하는 문제가 발생할 수 있습니다.
위의 예제에서는 1x1 픽셀의 이미지를 추가하여 alt 속성에 입력 필드의 설명을 적어주고 <label> 태그를 사용해서 해결해 보려고 한것입니다. 이 처럼 사용하게 되면 최소한 이미지의 alt 값을 읽어 주게되어 입력 필드의 갯수가 3개라는것을 이용자에게 미리 알려주게 되는것입니다.


위와 같은 경우 스크린 리더에 종류에 따라 이미지를 무시할 수도 있습니다.그래서, 다음은 <input> 태그에 title 속성을 넣어 같은 효과를 얻는 소스 코드를 제시 하였습니다.

<span>전화번호 : </span>
<span>
<input type="text" name="t1" title="지역번호">
<input type="text" name="t2" title="국번">
<input type="text" name="t3" title="가입자번호">
</span>

top