개발자를 위한 웹 표준 HTML의 이해 3(Web Content Accessibility Guidelines 1.0)

 
2011/02/15 - [Developer/웹개발 기초] - 개발자를 위한 웹 표준 HTML의 이해 1(DTD[Document Type Definition])
2011/02/15 - [Developer/웹개발 기초] - 개발자를 위한 웹 표준 HTML의 이해 2(Block elements, Inline elements)

이번 시간에는 HTML이라기 보다는 웹 컨텐츠에 대한 사용자의 접근성을 향상하기 위한 W3C의 지침의 내용을 한번 살펴 볼까 합니다.

 

1. 일반적인 경우
2. 이미지와 이미지맵을 사용한 경우
3. 표를 사용한 경우
4. 프레임을 사용한 경우
5. 애플릿과 스크립트를 사용한 경우
6. 멀티미디어를 사용한 경우
7. 다른 모든 조치가 불가능한 경우

 

위와 같은 분류의 내용으로 중요도를 3단계로 나누어 설명되어 있습니다.

 

저는 중요도 1에 해당하는 내용만 설명 드리고자 합니다.

 

• 중요도 1 : Web Contents 개발자가 Contents 제작 시 반듯이 따라야 할 체크 포인트입니다.
• 중요도 2 : Web Contents 개발자가 Contents 제작 시 되도록 지켜야 할 체크 포인트입니다.
• 중요도 3 : Web Contents 개발자가 Contents 제작 시 지키는 것이 좋습니다. 그렇지 않은 경우 일부 사용자들이 정보에 접근하는 것에 다소 어려움을 격을 수 있습니다.

 

1. 일반적인 경우
1. 텍스트가 아닌 Contents에 대해서는 대체 텍스트를 제공해야 됩니다.
   

   <img src="http://static.naver.com/www/u/2010/0611/nmms_215646753.gif" alt="네이버" />

2. 색깔과 함께 전달되는 모든 정보는 색깔이 없더라도 맥락이나 다른 element와의 구분이 되어야 합니다.
   몸이 다소 불편하신 분들을 위한 것으로 판단됩니다.
3. 문서의 텍스트나 대체 텍스트의 언어가 바뀌면 반듯이 명시를 해주어야 합니다.
   

   <p>국기에 대한 경례 <br />
   <span style="color:red;" lang="en" title="국기에 대한 경례">Salute!</span>
   
   </p>
   <p>
   바로 <br />
   <span style="color:red;" lang="en" title="바로">Ease.</span></p>

4. 스타일 시트가 깨지더라도 해당 문서를 읽을 수 있도록 해야 됩니다.
5. 동적인 Conents가 변하면 대체물(equivalents)도 변해야 합니다.
   http://www.w3.org/TR/WCAG10-HTML-TECHS/#applet-text-equivalent
6. 웹 표시 장치가 사용자들에게 박임을 조절할 수 있게 하기 전까지는 화면에 깜박임을 넣지 않는다.
7. Site Contents에 적합한 가장 명확하고 간결한 언어를 사용하라.
   
   
2. 이미지와 이미지 맵을 사용한 경우
1. 서버측 이미지 맵을 사용할 때에는 그림의 각 활성화 영역마다 중복적인 텍스트 링크를 제공해준다.
2. 기하학적인 도형으로 정의가 안 되는 영역이 있는 경우를 제외하고는 서버측 이미지 맵 대신에 반드시 클라이언트측 이미지 맵을 사용한다.
   
   
3. 표를 사용한 경우
1. 데이터가 들어있는 표에는 제목열과 제목행(통칭하여 header)을 명시한다.
   http://www.w3.org/TR/WCAG10-HTML-TECHS/#identifying-table-rows-columns
2. 두 개 이상의 논리적인 제목행이나 제목열을 갖는 데이터가 들어있는 표에서는 데이터 칸끼리 또는 제목 칸끼리 관련 짓는 마크업을 사용한다.
   http://www.w3.org/TR/WCAG10-HTML-TECHS/#identifying-table-rows-columns
   
   
4. 프레임을 사용한 경우
1. 프레임을 구분하고 프레임간의 탐색을 위해 모든 프레임에 이름을 붙여야 한다
   

   <frameset cols="10%, 90%" title="Our library of electronic documents">  
       <frame src="nav.html" title="Navigation bar">  
       <frame src="doc.html" title="Documents">
       <noframes>
          <a href="lib.html" title="Library link">   
                Select to go to the electronic library</A>  
       </noframes>
   </frameset>
   
   

5. 애플릿과 스크립트를 사용한 경우
1. 스크립트나 애플릿, 또는 다른 프로그램 객체를 사용하지 않거나 지원하지 않는 경우에도 페이지의 내용을 이해할 수 있어야 한다. 그것이 불가능하다면, 대안적으로 접근 가능한 페이지에 그것들을 대체할만한 정보를 제공하라.
   
   
6. 멀티미디어를 사용한 경우
1. 시각적인 트랙에 대응하는 텍스트를 자동으로 읽어주는 웹 표시 장치가 널리 보급되기 전에는, 멀티미디어 프리젠테이션을 할 때에 시각적인 트랙의 중요한 정보에 대해서는 음성 설명을 제공해주도록 한다.
2. 시간을 기반으로 한 멀티미디어 프리젠테이션(예를 들면 동영상이나 애니메이션)과 그에 상응하는 대체물(예를 들면 시각적인 트랙에 대한 캡션(텍스트 자막)이나 음성 설명)은 동기시켜야 한다.
   
   
7. 다른 모든 조치가 불가능한 경우
1. 약 모든 노력을 해보았어도, 접근성이 높은 페이지를 만들 수 없다면, W3C의 기술을 사용하고, 접근 가능하며, 원래의 페이지와 동일한(equivalent) 정보(또는 기능)를 담고 있으며, 원래 페이지만큼 자주 업데이트되는 별도의 대안적인 페이지를 제공하라.

 

여기까지 입니다.

 

위의 나열된 모든 항목은 필수입니다.

 

하지만.. 지키기가 쉽지 않습니다.

개발 시간도 두 배 이상으로 소비 될 뿐만 아니라..

 

하지만 표준 권고안에 어떤 내용이 있는지 한번쯤을 읽어 보시라고 작성하였습니다.

 

참고 하시기 바랍니다.

 

 

어떤 것이듯. 무엇이든. 아는 것이 힘입니다.

 

참고 사이트 : Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0

감사합니다.