액세스 가능한 컨텐츠 제작

* 액세스 가능한 컨텐츠 제작
 - 이미지를 대신할 텍스트
 - 오디오를 대신할 텍스트
 - 색상으로 표현된 정보
 - 명암
 - 액세스 가능한 테이블
 - 플래시 기능배제

** 비텍스트
 - 이미지는 alt, longdesc 로 설명을 추가하라
 - 이미지에 링크가 연결되어 있을 때에는 alt 속성을 통해 링크로 연결되는 대상의 정보를 전달한다.
 - 불릿 등의 특별할 의미가 없는 이미지에는 alt=""를 이용하여 어떤 정보도 전달하지 않도록 한다. ""사이에 공란이 있어서도 안 된다.
 - 인접한 링크들이 서로 중복되지 않도록 하라. 이미지와 그 주위의 텍스트가 동일한 href 속성을 가진 링크를 가지고 있다면, 하나의 <a>태그로 통합하고 이미지에 alt="" 속성을 넣어라. 단, 메뉴 버튼 이미지의 alt 속성에 null 값을 넣어서 모든 이미지의 정보가 중복되게해서는 안된다.
 - <input> 태그의 type=image인 경우에는 해당 버튼을 넣은 목적을 분명히 밝히는 alt 텍스트를 넣어야 한다.
 - <map>의 <area> 태그에는 반드시 alt 텍스트를 넣어서 이미맵의 각 핫 스팟의 목적을 구분하여 명시한다.

*** alt 텍스트 스타일
 - alt 텍스트는 개발자의 스타일과 판단에 따라 텍스트 내용이 선택된다.
 - 길이가 짧은 alt 텍스트를 제공하라. 스크린 리더를 사용하는 이용자가 전체 내용을 듣는 시간을 단축시켜 주기 위함이다. 일반 이용자는 이미지맵을 한 눈에 훑어보고, 필요 없는 내용은 즉시 걸러낸 다음, 주된 내용에 포커스를 맞출 수 있다.
 - 특수 브라우저에서 어떻게 읽힐 것인지를 염두에 두고 alt 텍스트를 선정한다면 "University of Arizona" 대신 "U of A"를 사용한 것에 의문을 가지지 않을 것이다.
 - 그러나 "UA"가 아니라 "U of A"를 사용했는가? 라는 의문을 가질 수 있다. 그러나 스크린리더가 UA와 같은 약자를 발음하는 것을 수없이 들어온 경험상 "UA"로 읽어서는 원하는 정보를 제대로 전달할 수 없다고 판단된다.

*** 데코레이션 이미지와 포맷팅 이미지
 - 문서 포맷을 맞추기 위해 사용되는 이미지에는 alt 텍스트를 넣을 필요가 없다. alt=""

*** 많은정보가 전달되는 이미지
 - longdesc (long description) 사용한다.
  -- <img src="chart22.gif" width="455" height="325" alt="food sales for 2000" longdesc="sales2000.htm">
 - D-LINK를 longdesc대안으로 사용한다. D-LINK는 longdesc와 동일한 값을 포함한 파일이나 페이지로 연결되는 링크이다.
  -- <img src="chart22.gif" width="455" height="325" alt="food sales for 2000" longdesc="sales2000.htm"><a href='sales2000.html'>D</a>
 - 인라인 텍스트로 이미지의 정보를 텍스트로 설명한다.

*** 오디오 원고
 - WCAG 1.1 : 비텍스트 요소에는 텍스트를 제공하라("alt", "longdesc" 등) 비텍스트 요소에는 이미지, 텍스트의 크래픽 표현(심볼 등), 이미지맵, 애니메이션(애니메이션 GIF 등), 애플릿, 프로그래밍 객체, ASCII 코드, 프레임, 스크립트, 리스트 항목 표시 사용용된 이미지, 그래픽 버튼, 사운드(유저 인터랙션에 따라 연주), 오디오 파일, 비디오의 오디오 트랙, 비디오 등이 포함된다.
 - 멀티미디어, 중요한 오디오 컨텐츠에는 자막이나 원고를 추가로 제공하라, 중요한 비디오 컨텐츠에는 텍스트나 오디오로 설명을 추가하라.
 - 정보 전달형 오디오 파일에는 쉽게 이용할 수 있는 텍스트 원고를 추가하라.

*** 색상
 - 정보전달을 위한 색상의 독자적 사용 제한
 - 색상을 통해 정보를 전달할 때에는 해당 페이지에 추가 설명 텍스트, 이미지(alt 텍스트 포함), 폰트 변화 등의 다른 방법을 이용하여, 동일 정보를 다른 경로를 통해서도 파악할 수 있도록 하라.
 - 웹 페이지에서 색상으로 표현된 모든 정보는 색상 없이도 이용할 수 있도록 그 내용이나 코딩 내용 등의 선정에 주의하여 디자인해야 한다.
  -- http://www.access-board.gov/sec508/guide/1194.22.htm
 - 색상으로 표현된 모든 정보는 색상 없이도 이용할 수 있도록 그 내용이나 코딩 내용 등의 선정에 주의를 기울여라
  -- http://www.w3.org/TR/WCAG10/full-checklist.html
 - 색상과 명암, 색상으로 표현된 정보는 색상 없이도 전달될 수 있어야 하며, 여러 색상이 사용된 이미지의 경우 색상별 의미를 파악할 수 있도록 색상간 명암 구분이 확실해야 한다.
  -- http://www-3.ibm.com/able/wbchecklist12.html
 - form의 필수 입력을 *로 구분하는 것과 같이, 색상 없이도 의미를 전달할 수 있는 방법은 많다.

** 색상 대비
 - 색약이 있거나, 흑백 모니터로 보는 이용자들을 고려하여 전경색과 배경색은 확실히 대비되로록 하라.
  -- http://www.lighthouse.org/color_contrast.htm

** 테이블
 - 테이블 선형화 : 테이블의 내용을 읽는 방법을 "선형화(linearization)"라고 한다. 1행 1열(Cell 1 1)을은 다음, 1행 2열(Cell 1 2)을 읽는다. 즉 1열의 데이터를 차례대로 읽은 다음에는 2열로 이동하여 같은 과정을 반복하게 된다.
 - 선형화해서 데이터가 제대로 전달되지 않는다면, 레이아웃 테이블 사용을 자제하라, 그러나 반드시 사용해야 한다면, 테이블 내용을 제대로 전달하기 위한 대안을 제시해야 한다.(WCAG 레벨2)
 - 테이블을 레이아웃에 사용한다면, 문서 포맷을 시각적으로 컨트롤하기 위한 목적의 구조정보 관련 코딩을 포함시켜서는 안된다.(WAI 레벨2)
  -- 레이아웃용 테이블에서 <th>를 사용한다면 특수 브라우저에서 그것을 데이터 테이블로 생각하고, 그 방식대로 읽는다.
 - 특수 브라우저 등이 순서에 맞게 텍스트를 읽을 때까지, 레이아웃 테이블을 선형적으로 읽을 수 있도록 행과 열의 데이터를 하나로 묶어 표시하라(현재 페이지 혹은 다른 페이지 이용도 가능).(WCAG 레벨3)

*** 테이터 테이블에 대한 가이드라인
 - 다음 2가지 조건을 만족시키면 간단한 데이터 테이블이라고 할 수 있다.
  -- 특정 셀에 해당하는 열의 헤더는 그 셀과 같은 열에 속해 있다.
  -- 특정 셀에 해당하는 행의 헤더는 그 셀과 같은 행에 속해 있다.
 - 데이터 테이블에서 행과 열의 헤더는 구분해야 한다.(테크 아트 프로젝트 연합 장애인 복지법 508조, 혹은 재활법 508조)
 - 데이터 테이블에서 행과 열의 헤더는 구분해야 한다.(WCAG 5.1)
 - 테이블 헤더, 테이블의 헤더를 마크업하려면 <th>를 사용하라. 복잡한 데이터 테이블의 셀에는 헤더 속성을 사용하라. (IBM)

*** 복잡한 데이터 테이블
 - 두 개 이상의 논리적 단계로 구성된 데이터 테이블의 행과 열 헤더를 표시하려면, 데이터 셀이나 헤더 셀을 조합하여 마크업에 활용하라(WAI & WCAG )
 - 각 헤딩 셀에는id를 할당하고, 데이터 셀의 header 속성에서 id를 사용하여 그 데이터 셀의 헤딩 셀이 어떤 것인지 식별해 내도록 하라.
 - 헤더를 프로그래밍적으로 식별하여 데이터 테이블을 볼 수 있는 특수 브라우저의 범위를 넓히기 위해, 헤딩 셀의 scope 속성과 함께 헤딩의 위치를 활용하라.
 - 데이블 헤더, 데이블의 헤더를 마크업하려면 <th>를 사용하라, 복잡한 데이터 테이블의 셀에는 헤더 속성을 사용하라(IBM)
  -- <th id="c2"> <th id="c3">
  -- <th id="r2">
  -- <td headers="c2 r2 r3">37.74</td>

*** 테이블 액세서빌리티를 위한 가이드라인
 - 헤더는 1행과 1열에 배치하여 각 행과 열의 헤더임을 분명히 하라.
 - 헤더에 해당하는 셀에는 <th> 태그를 사용하라. <th>를 사용함으로써 해당 셀이 자동으로 볼드체의 중앙정렬로 디자인되는 것을 원하지 않는다면, scope="row" 또는 scope="col"을 사용하라. 헤더 정보가 1행이나 1열에 위치하지 않는 경우, 이러한 헤더 표시가 반드시 필요하다.
 - 헤더 정보와 데이터 셀의 관련성을 명확이 표시하려면 header 속성을 사용하라. 테이블이 간단하지 않은 경우에는, 이러한 표시를 이용하여 해당 데이터 셀의 헤더 정보가 그 셀과 동일 행과 열에 있지 않다는 점을 밝히도록 한다.

*** 플리커 효과 자제
 - 계속 바뀌는 이미지, 플래시 효과, 깜박이는 아이콘등이 있는 웹 페이지는 예민한 이용자에게 경미한 발작을 일으킬 수도 있다.
 - 플래시 효과가 너무 강렬하거나 2~55㎐대역에서 사용되는 경우에 발생할 수도 있는 일이다.
 - 브라우즈에서 이용자가 플리커 효과를 컨트롤할 수 있는 기능을 넣을 때까지, 스크린에 이러한 효과를 포함시켜서는 안된다.(WAI WCAG)
 - 2~55㎐ 빈도 대역의 플리커 효과를 사용하지 않도록 웹 페이지를 디자인하라.(WAI WCAG)
 - 깜박이거나 움직이는 플리커 효과의 컨텐츠. 컨텐츠에 깜박이거나 움직이는 등의 플리커 효과를 넣지 않도록 하라.(IBM)
 - <marquee> 태그의 속성을 수정하여 텍스트가 2㎐ 이상의 빈도로 점프하거나 움직이게 될 수도 있으며, ESC키로도 동작을 멈추지 못하는 경우
 - <blink>, <marquee> 태그는 정식 HTML이 아니며 브라우저에 그 효과를 컨트롤할 수 없으므로 사용을 자제하는 것이 좋다.
 - 애니메이션 GIF의 깜박임 빈도는 2㎐보다 낮거나 너무 높지 않도록 하고, 동시에 여러 개의 애니메이션 GIF를 사용하지 않도록 한다.
 

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