Internet Web Contents Accessibility Guideline

접근성 있는 웹 콘텐츠 설계

웹사이트에서 서비스하고 있는 모든 콘텐츠는 누구나 쉽게 인식할 수 있도록 설계되어야 한다.

항목 1.1 (텍스트 아닌 콘텐츠(non-text contents)의 인식) 텍스트 아닌 콘텐츠 중에서 글로 표현될 수 있는 모든 콘텐츠는 해당 콘텐츠가 가지는 의미나 기능을 동일하게 갖추고 있는 텍스트로도 표시되어야 한다.

용어 정리

텍스트 아닌 콘텐츠(non-text contents)란 그림,이미지 등으로 제작된 텍스트,애니메이션, 아스키(ASCII) 그림문자, 목록표시 이미지, 그래픽 버튼, 음성음향자료 또는 비디오 자료 등의 오디오와 영상과 같이 표준 문자(부호) 체계가 아닌, 시각적 또는 청각적 정보가 포함된 콘텐츠를 의미한다. 한글 부호의 경우에는 유니코드, 조합형 또는 완성형 부호체계를 사용하여 작성된 텍스트 외의 모든 경우를 의미한다.
빈 문자(blank text)란 아무런 정보도 가지고 있지 않은 문자열을 의미한다. HTML 등의 문법에서 빈 문자는 “”을 가리킨다. 즉, 빈 문자를 스크린 리더에서 읽으면 아무런 소리도 나지 않는다.

요구 조건

텍스트 아닌 콘텐츠 중에서 글로 표현될 수 있는 콘텐츠는 모두 해당 콘텐츠와 정확하게 일치하는 텍스트 콘텐츠(text contents)와 함께 제공해야 한다.
만약, 텍스트 아닌 콘텐츠 중에서 글로 표현될 수 없는 경우는 해당 콘텐츠에 대한 설명을 텍스트로 반드시 제공해야 한다. 이 때, 제공되는 텍스트 콘텐츠는 설명하고자 하는 원래의 콘텐츠의 내용이나 형태 등의 상세한 정보를 제공해야 한다.
텍스트 아닌 콘텐츠를 대체하거나 설명하기 위해 제공되는 텍스트는 콘텐츠 제작자가 원래의 콘텐츠를 사용해 표현하고자 했던 의미나 기능도 포함하여 설명해야 한다.
텍스트 아닌 콘텐츠를 대체하거나 설명하기 위해 제공되는 텍스트를 읽어줌으로 인하여 의미의 혼동을 줄 경우에는 빈 문자(blank text)를 대체 텍스트로 사용해야 한다.

적용시 장점

시각장애 또는 인지장애 등으로 인해 시각으로 정보를 습득하는 데에 어려움을 겪는 사용자들이 스크린 리더(screen reader)와 같은 보조기술을 사용하여 텍스트 콘텐츠를 음성을 통해 읽음으로써 접근권을 보장받을 수 있게 된다.
청각장애나 다른 이유로 음향 정보를 알아들을 수 없는 사용자들을 위해 그 내용을 텍스트로 표시하거나 수화로 해당 내용을 번역함으로써 접근이 가능하게 된다.
시각장애인은 물론 시각장애와 청각장애를 함께 갖고 있는 사용자 역시 해당 콘텐츠를 점자로 변환해 읽음으로써 접근권을 보장받을 수 있게 된다.
몇 개의 자료를 순서대로 나열하는 목록 등 해당 이미지가 단순히 홈페이지를 아름답게 꾸미기 위해 사용된 경우에는 이미지에 대한 대체 텍스트(alt-text)로 빈 문자를 사용하면 의미의 불필요한 혼동을 줄일 수 있다.

적용 예

버튼으로 사용된 이미지 : 간단한 기능 설명부가 슬라이드 쇼에서 다음 슬라이드로 넘어가는 역할을 하도록 만든 오른쪽 화살표 모양의 이미지 링크(image link)의 경우에 이 버튼 이미지와 함께 "다음 슬라이드"라는 대체 텍스트를 함께 제공한다면 스크린 리더는 이 이미지 버튼을 "링크 - 다음 슬라이드"라고 읽어줄 수 있게 된다.
<img src="/button/b_next.gif" alt="다음 슬라이드" />
데이터 차트 : 간단한 레이블과 충분한 설명을 함께 제공 예를 들어 어떤 상품의 6월, 7월 및 8월의 판매실적을 비교해 보여주는 차트에 "그림 1 : 6월, 7월 및 8월의 판매 현황"이라는 간단한 레이블(label)을 붙이고, 차트에 대한 보다 긴 설명문(longdesc)을 붙인다면 해당 차트의 내용과 해당 차트가 표시하고 있는 정보를 사용자에게 전달할 수 있다.
<img src="image/exam/Pic2.png" longdesc="chart.html" alt="그림 1 : 6월, 7월 및 8월의 판매 현황" />
```
<chart.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>
<ol>
	<li>6월 : 41%</li>
	<li>7월 : 32%</li>
	<li>8월 : 27%</li>
</ol>
</body>
</html>
```
애니메이션 : 간단한 레이블과 충분한 설명을 함께 제공 예를 들어 매듭을 짓는 방법을 보여주는 애니메이션의 경우에 "매듭을 만드는 형태를 보여주는 애니메이션"이라는 간단한 레이블과 함께 매듭짓기 위하여 손놀림하는 동작을 자세하게 설명하는 설명문을 붙인다면 매듭을 만드는 전 과정을 이용자가 자세하게 알 수 있다.
연설 녹음자료 : 간단한 레이블과 긴 설명을 함께 제공 웹 페이지에 음성 데이터가 포함되어 있는 경우에 이 데이터와 함께 간단한 제목을 레이블로 구성하고 음성 데이터의 내용에 대한 텍스트를 함께 제공한다면 청각장애인의 경우에도 모든 정보를 얻을 수 있다.
음악 자료 : 간단한 레이블 제공 예를 들어 베토벤의 교향곡 제 5번의 연주실황을 제공하는 음악 파일을 웹 페이지에서 제공하고 있는 경우에 이 음악 파일과 함께"베토벤 교향곡 제5번, 빈 필하모닉 오케스트라의 연주"라는 레이블을 함께 제공한다면 청각장애인의 경우에 음악 파일이 무슨 내용을 담고 있는지를 쉽게 알 수 있다.

항목 1.2 (영상매체의 인식) 시간에 따라 변화하는 영상매체는 해당 콘텐츠와 동기 되는 대체 매체를 제공해야 한다.

용어 정리

시간에 따라 변화하는 영상매체(time-dependent presentation)란 영화와 같이 소리와 영상정보가 동시에 제공되는 경우 혹은 콘텐츠 재생 과정의 특정 시점에서 사용자와의 상호작용 또는 대화가 필요한 매체를 말한다.
대체 매체(equivalent media)란 영상매체의 음향정보를 캡션과 같이 시각적으로 보여주거나 영상의 기본적인 내용을 화면해설 형태로 제공하는 매체를 의미한다.
화면해설(audio descriptions)이란 영상의 광경, 동작, 비언어적 표현, 그래픽 등의 상태나 변화를 음향정보로 나타내거나 텍스트로 제공하여 필요한 설명을 제공하는 것을 의미한다.화면해설은 해당 이벤트와 동기 되어 진행되어야 한다.
캡션(Captions)이란 영상매체에 포함된 말, 음향 및 주변소리 등을 텍스트로 표현한 매체를 의미한다. 따라서 캡션은 영상매체의 진행에 따라 해당 이벤트와 동기 되어야 한다.

요구조건

음향 정보로부터 사용자가 충분한 정보를 얻을 수 없는 모든 영상매체는 캡션을 함께 제공해야 한다.
캡션은 영상매체나 음향매체와 동기 되어야 한다.
모든 생방송은 캡션을 실시간으로 제공해야 한다. 단 음성이 없는 음악 방송의 경우에는 예외로 한다.
콘텐츠는 사용자가 캡션과 영상정보를 동시에 접해야 그 내용을 이해할 수 있도록 구성되어서는 안 된다. 즉, 캡션과 영상정보는 서로 보완관계가 되지 않아야 한다.

적용시 장점

청각장애인은 음향매체와 함께 제공되는 캡션을 통해 음성이나 음향 정보에 접근이 가능하게 된다. 또한, 캡션을 활용하면 해당 콘텐츠에 대한 인덱스를 작성 하거나 내용을 검색할 때에도 유용하게 사용될 수 있다.
장애인이 아닌 경우에도 영상매체와 함께 동기 되는 대체 매체가 제공되는 경우에 보다 편리하게 콘텐츠를 활용할 수 있다. 예를 들어 캡션은 소란한 환경이나 오디오 재생기능이 갖추어져 있지 않은 경우 유용하며, 외국어 습득과 같이 언어능력이나 읽기 능력을 높이는데 활용될 수 있다.
화면해설의 경우에는 화면을 보지 않더라도 중요한 정보를 음성으로 알 수 있게 해주므로 시각을 통해 사물을 인식하기 어려운 장애인의 경우에는 화면해설을 통해 화상정보를 인지할 수 있다. 그러나 화면해설은 필수사항으로 분류하지 않는다.

적용 예

동영상 : 화면해설과 캡션 활용 예를 들어, 한 아이가 강아지를 자신의 침대로 오도록 과자를 늘어놓고는 강아지에게 웅얼거리며 무언가를 말하고 있는 장면을 가정한다면, 화면을 볼 수 없는 사람은 이 장면을 이해할 수 없다.따라서 이 경우에"이 아이가 계단으로부터 자기 침실에 이르는 계단마다 과자를 하나씩 늘어놓았다"라는 화면해설과"아이가 웅얼거린다"라는 캡션을 제공한다면 청각장애인이나 시각장애인 모두 그 내용을 정확히 이해할 수 있다.
```
<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="320" height="304">
	<param name="URL" value="mediafile.wmv">
	<param name="autoStart" value="True">
	<param name="uimode" value="full">
	<param name="captioningID" value="captions">
	<param name="SAMIFileName" value="samifile.smi">
</object>
<div id="captions" style="background-color:black; color:white; width:320px; height:70px"></div>
```
뉴스 동영상 : 영상과 동기되는 캡션 제공 예를 들어, 홍수가 난 대도시의 광경을 기자가 설명하고 있다고 가정할 경우에 기자가 하는 말을 캡션으로 표시하면 청각장애인이 기자의 이야기를 인식할 수 있게 된다.
무언극 : 장면별로 장면소개 텍스트 제공 예를 들어, 사다리를 올라가는 무언극(팬터마임 : pantomime)의 한 장면을 애니메이션으로 구성하였을 경우에“사다리를 올라가는 장면”이라는 대체 텍스트를 애니메이션에 포함시키면 이로써 충분한 정보를 사용자에게 제공할 수 있다.

항목 1.3 (색상에 무관한 인식) 콘텐츠가 제공하는 모든 정보는 색상을 배제하더라도 인지할 수 있도록 구성되어야 한다.

용어 정리

고 대비(high contrast) 모드란 흑백과 같이 대비차가 매우 크도록 조정하여 화면에 표시하는 방식을 의미한다.

요구조건

콘텐츠가 제공하는 텍스트나 그래픽 정보는 색상을 제거하더라도 그 내용을 인지할 수 있어야 한다.
웹 페이지에서 보여주는 정보와 배경색 간에는 충분히 대비가 되어야 한다. 특히 웹 페이지의 내용을 고 대비(high contrast) 모드로 표시했을 때에도 충분히 명암대비가 되도록 콘텐츠를 설계하여야 한다.

적용시 장점

색상의 차이가 정보의 다름을 나타내지 않으므로 색각(색맹 또는 색약) 이상자의 경우에도 혼동을 일으킬 염려가 없게 된다.
도표 등의 경우에 사용하는 색상의 명암 대비가 충분하므로 약시자의 경우에도 도표를 정확히 인지할 수 있다.
고대비 모드를 사용할 수밖에 없는 사용자들도 콘텐츠의 내용이나 구조를 손쉽게 이해할 수 있다.

적용 예

그래프 및 차트 : 색깔보다는 무늬를 이용한 표현 권장 파이 차트, 막대그래프나 꺾은 선 그래프 등을 이용하여 정보를 표시하는 경우에 각각의 영역을 색깔로 구분하기보다는 여러 가지 무늬를 이용하여 표시하면 색상을 인식할 수 없는 사용자들,예를 들면 약시자나 색각이상자가 쉽게 이해할 수 있다.
<색상만으로 항목을 구분할 수있는 도표 - 아래> <여러 가지 무늬 항목으로 구분할 수있는 도표 - 아래>
중요한 항목 표시 : 색깔보다는 특수기호 사용 권장 예를 들어,가입자의 신상 정보를 입력하는 웹 페이지에서 필수항목을 색깔(예를 들어 빨간색)을 사용하여 표시하는 경우에 이 색깔을 인지하지 못하는 색각 이상자의 경우에는 이 항목의 중요도를 인지할 수 없다.따라서 색깔 대신 특수 기호(예를 들어 별표)를 이 항목에 추가하면 대부분의 사용자가 이 항목이 중요한 항목인지를 쉽게 인지할 수 있다.

회원가입(* 필수 입력항목입니다.) 아이디*
닉네임
- 이하생략 -