데이터 입력의 액세스빌리티

* 데이터 입력의 액세스빌리티

** 데이터 입력 폼과 가이드라인
 - 온라인으로 데이트를 입력받는 폼을 디자인할 때, 특수 브라우즈를 사용하는 사람들도 관련 정보, 입력 필드, 입력과 제출에 필요한 기능에 액세스할 수 있도록 해야 한다.(508조)
 - 폼. 특수 브라우저에서도 폼을 이용할 수 있더록 하라.
 - 특수 브라우저 등이 레이블과 폼 컨트롤의 연관 관계를 외적으로 표현할 수 있을 때까지, 내적관계를 규정한 레이블 등을 포함한 폼 컨트롤을 이용하여 모든 폼에 대한 레이블의 위치를 명확하게 지정해야 한다.(WAI 레벨2)
 - 레이블과 그 컨트롤의 상관 관계를 명시하라.(WAI 레벨2)
 - 스크린 리더 등의 특수 브라우저에 컨트롤이 빠진 위치를 자동 체그하는 기능이 포함될 때까지, 입력 필드(edit box)와 텍스트 영역 안에 그 요소들이 들어갈 자리를 반드시 표시해 넣도록 하라.(WAI 레벨3)
  -- 최근 스크린 리더는 DOM을 사용하여 문제해결. 무의미 해짐
 - 정보의 양이 많으면, 쉽게 관리할 수 있는 그룹 단위로 적당히 나누어라.(WAI)
  -- http://www.w3.org/TR/WCAG10/wai-pageauth.html
  -- 예를 들어, HTML에서 <select> 내부의 <option>은 optgroup을 사용하고, 폼 컨트롤은 fieldset이나 legend를 사용하여 그룹핑하며, 문서를 구조화시키기 위해서는 헤딩을 사용한다.

** HTML 폼
 - 푸시 버턴 <input type="button"> <input type="submit">
 - 이미지 버턴 <input type="image"> <button>
 - 텍스트 입력 필드 <input type="text"> <textarea>
 - 라디오 버턴 <input type="radio">
 - 체크박스 <input type="checkbox">
 - 선택 메뉴 <select>

** 액세스가 불가능한 폼
 - 테이블과 폼 태그가 중첩되어 있을 경우
  -- <table><form><tr><td><input type='text"></td></tr></form></table>

** 액세스가 가능한 폼
 - 정해진 위치대로 HTML을 코딩하지 않으면, 스크린 리더나 보이스 브라우저는 이용자에게 정보를 주지 못하거나 잘못된 정보를 전달하게 된다.
 - 테이블과 폼 태그가 중접되지 않을 경우
  -- <form><table><tr><td><input type="text"></td></tr></table></form>
 - 텍스트 입력 필드와 콤보박스 : 컨트롤의 위쪽이나 왼쪽에 위치시켜라
 - 체크박스와 라디오 버튼 : 컨트롤의 우측에 위치시켜라
 - 버튼 : value 속성을 이용하여 컨트롤의 일부로 프롬프트를 포함시켜라.
 - <label> 태그에 각 폼 컨트롤에 대응하는 텍스트를 연결시켜라.
 - <input> 태그의 목적을 분명히 밝히는 title 속성을 포함시켜라

** 텍스트 프롬프트가 없는 폼 컨트롤
 - 우편번호, 전화번호등에서 2번째 이후로 들어가는 <input>태그일 경우

** 명확한 의미 전달 및 액세스빌리티 개선을 위한 폼 컨트롤의 그룹핑
 - <fieldset>은 입력 필드를 채우는 과정을 단순화시키고 각 컨트롤 그룹의 의도를 명확히 하기 위해서 폼의 몇 개의 부분으로 그룹핑하기 위해 사용된다.
 - <fieldset>
   <legend accesskey="c">입력 항목1 (ALT+C)</legend>
   </fieldset>
   <fieldset>
   <legend accesskey="a">입력 항목2 (ALT+A)</legend>
   </fieldset>

** PDF 폼
 - 애플릿, 플러그인을 비롯한 기타 애플리케이션이 필요한 웹 페이지는 클라이언트 시스템에 저장하여, 해당 페이지에서 직접 플러그인이나 애플릿으로 연결되는 링크를 제공하도록 한다.(508조)
 - 온라인으로 데이터를 입력받을 수 있는 폼을 디자인할 때는, 특수 브라우저를 사용하는 사람들도 관련 정보, 입력 필드, 입력과 제출에 필요한 기능을 액세스할 수 있도록 해야 한다.

** 청각장애인을 위한 폼의 액세스빌리티
 - 은행 등의 서비스 제공업체에서는 청각장애인을 위한 텔레커뮤니케이션 디바이스(Telecommunication Device for the Deaf)를 사용하여 청각장애인과 통화하는 방법은 전혀 모르기 때문에, 대출이나 계좌이체 등의 트랙잭션은 중단될 수 밖에 없다.
 - 웹의 폼 양식에 희망 커뮤티게이션 유형을 지정하는 필드를 추가하라.
  -- Phoin(Voice), Phone(TTD), E-mail, Wireless Device, Fax

** 시간제한
 - 응답 시간에 제한을 둘 필요가 있다면, 기준 이상의 시간이 필요한 이용자에게 미리 알려서 충분할 시간을 확보할 수 있게 한다.(508조)
 - 시간 제한이 잇는 컨텐츠의 지정된 시간을 조절할 수 잇게 하거나, 가능하면 충분한 시간을 주도록 하라.(WCAG 2.0)

** 폼 디자인 체크리스트
 - 텍스트 입력 필드와 콤보박스의 위쪽이나 왼쪽에 프롬프트 넣어라.
 - 체크박스와 라디오 버튼의 오른쪽에 프롬프트를 넣어라
 - 위의 두 가지 경우 이외에 프롬프트의 위치 선정이 필요한 경우에는 <label>에 for 속성을 사용하여 입력 컨트롤과 프롬프트와의 관계를 나타내어라.
 - <label> 태그 대신 <input> 태그에 title 속성을 사용하여 레이블이나 프롬프트를 지정할 수도 있다.
 - <fieldset>과 <legend>는 복잡한 폼 문서를 구조화하여 쉽고 명확하게 이해시키려 할 때 사용하라.
 - 연락처를 입력할 때는 청각장애인을 위해 희망하는 역락방식(TDD,호출기,이메일 등)도 함께 기입하도록 하라.
 - 폼 기입에 시간 제한을 두지 말라. 시간 제한이 필요하다면, 이용자에게 사전에 설명하고 마감 시간이 되기 전에 경고 메시지를 주도록 한다.

※ 웹 액세서빌리티 - 접근하기 쉬운 웹 사이트 구축하기 / 정보문화사 / 짐 대처 외 7인 공저, 우유미 역 / ISBN 89-5674-087-9