인식의 용이성
웹사이트에서 서비스하고 있는 모든 콘텐츠는 누구나 쉽게 인식할 수 있도록 설계되어야 한다.
텍스트 아닌 콘텐츠(non-text contents)의 인식
텍스트 아닌 콘텐츠 중에서글로 표현될 수 있는 모든 콘텐츠는 해당 콘텐츠가 가지는 의미나 기능을 동일하게 갖추고 있는 텍스트로도 표시되어야 한다.
용어 정리
- 텍스트 아닌 콘텐츠(non-text contents)란
- 그림,이미지 등으로 제작된 텍스트,애니메이션, 아스키(ASCII) 그림문자, 목록표시 이미지, 그래픽 버튼, 음성음향자료 또는 비디오 자료 등의 오디오와 영상과 같이 표준 문자(부호) 체계가 아닌, 시각적 또는 청각적 정보가 포함된 콘텐츠를 의미한다. 한글 부호의 경우에는 유니코드, 조합형 또는 완성형 부호체계를 사용하여 작성된 텍스트 외의 모든 경우를 의미한다.
- 빈 문자(blank text)란
- 아무런 정보도 가지고 있지 않은 문자열을 의미한다. HTML 등의 문법에서 빈 문자는 “”을 가리킨다. 즉, 빈 문자를 스크린 리더에서 읽으면 아무런 소리도 나지 않는다.
요구 조건
- 텍스트 아닌 콘텐츠 중에서 글로 표현될 수 있는 콘텐츠는 모두 해당 콘텐츠와 정확하게 일치하는 텍스트 콘텐츠(text contents)와 함께 제공해야 한다.
- 만약, 텍스트 아닌 콘텐츠 중에서 글로 표현될 수 없는 경우는 해당 콘텐츠에 대한 설명을 텍스트로 반드시 제공해야 한다. 이 때, 제공되는 텍스트 콘텐츠는 설명하고자 하는 원래의 콘텐츠의 내용이나 형태 등의 상세한 정보를 제공해야 한다.
- 텍스트 아닌 콘텐츠를 대체하거나 설명하기 위해 제공되는 텍스트는 콘텐츠 제작자가 원래의 콘텐츠를 사용해 표현하고자 했던 의미나 기능도 포함하여 설명해야 한다.
- 텍스트 아닌 콘텐츠를 대체하거나 설명하기 위해 제공되는 텍스트를 읽어줌으로 인하여 의미의 혼동을 줄 경우에는 빈 문자(blank text)를 대체 텍스트로 사용해야 한다.
적용시 장점
- 시각장애 또는 인지장애 등으로 인해 시각으로 정보를 습득하는 데에 어려움을 겪는 사용자들이 스크린 리더(screen reader)와 같은 보조기술을 사용하여 텍스트 콘텐츠를 음성을 통해 읽음으로써 접근권을 보장받을 수 있게 된다.
- 청각장애나 다른 이유로 음향 정보를 알아들을 수 없는 사용자들을 위해 그 내용을 텍스트로 표시하거나 수화로 해당 내용을 번역함으로써 접근이 가능하게 된다.
- 시각장애인은 물론 시각장애와 청각장애를 함께 갖고 있는 사용자 역시 해당 콘텐츠를 점자로 변환해 읽음으로써 접근권을 보장받을 수 있게 된다.
- 몇 개의 자료를 순서대로 나열하는 목록 등 해당 이미지가 단순히 홈페이지를 아름답게 꾸미기 위해 사용된 경우에는 이미지에 대한 대체 텍스트(alt-text)로 빈 문자를 사용하면 의미의 불필요한 혼동을 줄일 수 있다.
적용 예
- 버튼으로 사용된 이미지
- 간단한 기능 설명부가
- 슬라이드 쇼에서 다음 슬라이드로 넘어가는 역할을 하도록 만든 오른쪽 화살표 모양의 이미지 링크(image link)의 경우에 이 버튼 이미지와 함께 "다음 슬라이드"라는 대체 텍스트를 함께 제공한다면 스크린 리더는 이 이미지 버튼을 "링크 - 다음 슬라이드"라고 읽어줄 수 있게 된다.
-
- X (BAD)
-
<a href="#"><img src="image.gif" /></a>
- O (GOOD)
-
<a href="#"><img src="image.gif" alt="다음 슬라이드" /></a>
- 데이터 차트
- 간단한 레이블과 충분한 설명을 함께 제공
- 예를 들어 어떤 상품의 6월, 7월 및 8월의 판매실적을 비교해 보여주는 차트에 "그림 1 : 6월, 7월 및 8월의 판매 현황"이라는 간단한 레이블(label)을 붙이고, 차트에 대한 보다 긴 설명문(longdesc)을 붙인다면 해당 차트의 내용과 해당 차트가 표시하고 있는 정보를 사용자에게 전달할 수 있다.
-
- O (GOOD)
-
<img src="image.gif" alt="그림 1 : 6월, 7월 및 8월의 판매 현황" longdesc="datachart.html" />
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>6월, 7월 및 8월의 판매 현황</title> </head> <body> <dl> <dt>6월</dt> <dd>100</dd> <dt>7월</dt> <dd>90</dd> <dt>8월</dt> <dd>60</dd> <dt>9월</dt> <dd>50</dd> </dl> </body> </html>
- 애니메이션
- 간단한 레이블과 충분한 설명을 함께 제공
- 예를 들어 매듭을 짓는 방법을 보여주는 애니메이션의 경우에 "매듭을 만드는 형태를 보여주는 애니메이션" 이라는 간단한 레이블과 함께 매듭짓기 위하여 손놀림하는 동작을 자세하게 설명하는 설명문을 붙인다면 매듭을 만드는 전 과정을 이용자가 자세하게 알 수 있다.
- 연설 녹음자료
- 간단한 레이블과 긴 설명을 함께 제공
- 웹 페이지에 음성 데이터가 포함되어 있는 경우에 이 데이터와 함께 간단한 제목을 레이블로 구성하고 음성 데이터의 내용에 대한 텍스트를 함께 제공한다면 청각장애인의 경우에도 모든 정보를 얻을 수 있다.
- 음악 자료
- 간단한 레이블 제공
- 예를 들어 베토벤의 교향곡 제 5번의 연주실황을 제공하는 음악 파일을 웹 페이지에서 제공하고 있는 경우에 이 음악 파일과 함께"베토벤 교향곡 제5번, 빈 필하모닉 오케스트라의 연주"라는 레이블을 함께 제공한다면 청각장애인의 경우에 음악 파일이 무슨 내용을 담고 있는지를 쉽게 알 수 있다.
Copyright © 2008Hyunsun. All rights reserved. Designed by Hyunsun.