웹 콘텐츠 제작기법

HOME > 지식마당 > 개발자아카이브 > 웹 콘텐츠 제작기법

1. 인식의 용이성(Perceivable)

1.1 적절한 대체 텍스트 제공

텍스트 아닌 콘텐츠에는 대체 텍스트를 제공해야 한다.

① 이미지 등 텍스트가 아닌 콘텐츠를 이용할 경우, 그 의미나 용도를 해당 이미지와 동등하게 인식할 수 있도록 적절한 대체 텍스트를 간단명료하게 제공해야 한다.

② 단순히 장식이나 시각적인 형태를 위해 사용되는 콘텐츠의 경우, 보조 기술을 통해 해당 설명을 제공받을 때 오히려 혼란을 일으킬 가능성이 있으므로 대체 텍스트를 공백문자로 제공하는 것이 바람직하다.

1.1.1 적절한 대체 텍스트 제공
- 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
텍스트 이미지에 대체 텍스트가 제공되지 않은 경우
잘못된 사례
사례 이미지
텍스트 이미지에 대체 텍스트가 제공되지 않은 경우 예시화면

<텍스트 이미지에 대체 텍스트가 제공되지 않은 경우 예시화면>

해당 사례의 원본소스
<tr>
<td>
<a href=""><img src="/nuguya/img/nicecert_renew/0000000000/btn_confirml.gif" /></a>
<a href=""><img src="/nuguya/img/nicecert_renew/0000000000/btn_cancel.gif" /></a>
</td>
</tr>
사례 설명
이미지에 대체 텍스트를 제공하지 않았습니다. 대체텍스트를 제공하지 않을 경우 시각장애인이 화면낭독기로 읽게 되면 영어로 된 긴 알파벳과 숫자가 어우러진 파일명만 읽어주므로 화면낭독기 사용자에게 혼란을 줍니다.
우수 사례
사례 이미지
게시물 이미지의 대체 텍스트가 제공된 경우 예시화면

<게시물 이미지의 대체 텍스트가 제공된 경우 예시화면>

해당 사례의 원본소스
<tr>
<td><img src="/files/11/[844]DSC_0532.jpg" alt="백화점 세일기간 길게 줄선 전경" /><br />
</td>
</tr>
사례 설명
게시물의 이미지는 그 성격에 따라 간단하게 게시물의 제목을 이미지의 내용으로 정할 수도 있고, 간단한 묘사가 들어갈 수도 있습니다. 해당 사진의 아주 구체적인 묘사보다는 그 이미지의 주제, 목적 등을 이해할 수 있는 수준에서 제공하는 것이 바람직합니다.
충분한 정보가 필요한 경우
잘못된 사례
사례 이미지
대체텍스트를 업데이트 하지 않은 경우 예시화면

<대체텍스트를 업데이트 하지 않은 경우 예시화면>

해당 사례의 원본소스
<div id="con_title">
<h2><img src="/images/sitemap.gif" alt="인사말씀" /></h2>
<p>Home > 사이트맵</p>
</div>
사례 설명
이전 텍스트이미지의 텍스트가 아마도 ‘인사말씀’이었던 것 같습니다. 비장애인들은 ‘사이트맵’이라고 인식하겠지만 시각장애인의 경우 지금 접근한 콘텐츠가 ‘인사말씀’이라고 생각하게 되는 문제가 발생합니다.
우수 사례
사례 이미지
배너에 충분한 대체텍스트를 제공한 경우 예시화면

<배너에 충분한 대체텍스트를 제공한 경우 예시화면>

해당 사례의 원본소스
<div class="banner-list-img-last">
<a title="새창에서 링크 열림" target="_blank" href="링크 주소">
<img src="/html/imgs/pres/08236_recruit.jpg" alt="2012 대한민국취업박람회, 고용노동부주최 일시 : 2012년 10월30일(화)~31일(수) 10시~17시, 장소: aT센터(서초구 양재동)제1전시장 사이트 방문 바로가기" />
</a>
</div>
사례 설명
배너이미지에서 중요한 것은 제목만 대체텍스트를 제공해서는 안 된다는 것입니다. 제목과 더불어 제공되는 일시나 장소 등 중요 정보는 반드시 같이 제공해야 합니다. 정보의 차별에 해당하는 생략이 있어서는 안 되기 때문입니다. 이렇게 배너이미지에서 중요한 정보들을 제공받게 되면 배너 선택의 이유가 확실해집니다. 배너의 주제뿐만 아니라 일시와 장소 등을 통해 나에게 필요한 정보라면 선택할 것이고, 그렇지 않다면 다음 콘텐츠로 넘어갈 수 있게 됩니다.
불필요한 설명을 제공하는 경우
잘못된 사례
사례 이미지
불릿 이미지에 대체 텍스트를 제공하지 않은 경우 예시화면

<불릿 이미지에 대체 텍스트를 제공하지 않은 경우 예시화면>

해당 사례의 원본소스
<ul>
<li><a href="#"><img src="/imges/dot_notice.gif" />2012년 함께 누리는 일자리 한마당..</a></li>
<li><a href="#"><img src="/imges/dot_notice.gif" />참여예산 주민총회 결과(사업별 우선순위 현황..</a></li>
<li><a href="#"><img src="/imges/dot_notice.gif" />폐수배출시설 환경오염도 검사 결과 알림</a></li>
<li><a href="#"><img src="/imges/dot_notice.gif" />참여예산 주민총회 경품 추첨결과를 알려드립니다.</a></li>
<li><a href="#"><img src="/imges/dot_notice.gif" />우산수선센터 축제</a></li>
</ul>
사례 설명
불릿은 주목을 끌기 위해 제공하는 의미 없는 이미지를 뜻합니다. 의미가 없다는 이유로 대체텍스트 자체를 제공하지 않으면 파일명을 그대로 읽게 되어 화면낭독기 사용자들에게 혼란을 주게 됩니다.
우수 사례
사례 이미지
의미 없는 이미지에 대한 대체텍스트를 적절하게 제공한 경우 예시화면

<의미 없는 이미지에 대한 대체텍스트를 적절하게 제공한 경우 예시화면>

해당 사례의 원본소스
<dl>
<dt><img src="/images/txt01.gif" alt="종합민원안내" /></dt>
<dd>
<p><img src="/images/img02.gif" alt="" /><img src="/images/txt02.gif" alt="민원안내" /></p>
<p><img src="/images/img03.gif" alt="" /><img src="/images/txt03.gif" alt="여권민원" /></p>
</dd>
</dl>
사례 설명
빈값(alt="")의 대체텍스트를 제공함으로써 의미 없는 정보를 생략하게 되어 정보를 이해하는데 더욱 짧고 명확하게 이해할 수 있습니다.
1.2 멀티미디어 대체 수단

동영상, 음성 등 멀티미디어 콘텐츠를 이해할 수 있도록 대체 수단을 제공해야 한다.

① 멀티미디어 콘텐츠는 자막, 원고 또는 수화를 멀티미디어 콘텐츠와 동등한 내용을 제공해야 한다.

② 가장 바람직한 방법은 닫힌 자막을 오디오와 동기화시켜 제공하는 것이다.

1.2.1 자막 제공
- 멀티미디어 콘텐츠에는 자막, 대본 또는 수화를 제공해야 한다.
멀티미디어 콘텐츠에 대체 수단을 제공하지 않은 경우
잘못된 사례
사례 이미지
멀티미디어 콘텐츠에 대체 수단을 제공하지 않은 경우

<멀티미디어 콘텐츠에 대체 수단을 제공하지 않은 경우>

사례 설명
자막, 수화 또는 원고 등이 제공되지 않아서 청각 장애인의 경우 어떤 설명을 하고 있는지 내용을 이해할 수가 없게 됩니다.
우수 사례
사례 이미지
텍스트만 제공하는 영상 콘텐츠에서 동등한 음성을 제공한 경우

<텍스트만 제공하는 영상 콘텐츠에서 동등한 음성을 제공한 경우>

사례 설명
영상 안에서 텍스트 정보가 제공되고 있으나 이를 음성으로 제공하지 않으면 청각 장애인의 경우 내용을 인식하는데 문제가 없으나 음성정보에 의존하는 시각장애인의 경우 아무 내용도 없는 것으로 생각할 수 있으므로 텍스트 내용을 그대로 음성 출력해주거나 관련 음성파일을 다운 받을 수 있도록 해주는 것이 원칙이며 원고를 제공하여 화면 낭독기로 내용을 파악할 수 있도록 해주는 것도 좋은 방법입니다. 만약 원고의 내용이 길어진다면 스크롤을 주어 영상화면과 함께 원고 내용을 볼 수 있도록 하여야 합니다.
1.3 명료성

콘텐츠는 명확하게 전달되어야 한다.

① 콘텐츠에서 제공하는 모든 정보는 색을 배제하여도 특정한 색을 구별할 수 없는 사용자나 흑백 디스플레이 사용자, 흑백 인쇄물을 보는 사용자가 해당 콘텐츠를 인식할 수 있도록 제공해야 한다.

② 다른 감각을 통해서도 지시사항을 인식하는 데 문제가 없도록 제공해야 한다.

③ 웹 페이지에 보이는 핵심 텍스트 콘텐츠와 배경 간의 충분한 대비를 제공하여 저시력자, 색각 이상자, 고령자 등도 콘텐츠를 인식할 수 있도록 제공해야 한다

④ 화면 확대가 가능하도록 구현한 콘텐츠(텍스트 및 텍스트 이미지)의 명도대비는 3:1을 만족해야 한다.

⑤ 자동으로 소리가 재생되지 않아야 한다.

1.3.1 색에 무관한 콘텐츠 인식
- 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
색상으로만 정보를 제공한 경우
잘못된 사례
사례 이미지
색상으로만 정보를 제공한 경우

<색상으로만 정보를 제공한 경우>

사례 설명
비장애인의 경우 색상만으로 각 해당 영역의 범례 정보를 인식할 수 있지만 색을 인식하지 못하는 사용자의 경우에는 영역의 범례 정보를 인식할 수 없을지도 모릅니다.
우수 사례
사례 이미지
필수 입력 항목을 패턴으로 표시한 경우

<필수 입력 항목을 패턴으로 표시한 경우>

사례 설명
색상으로 구별한 정보에 체크표시를 함으로써 색상이 제공되지 않더라도 패턴으로 필수입력 항목을 구분할 수 있게 됩니다. 또한 좀 더 주목시키기 위해 사용했던 주황색 텍스트에도 느낌표(!) 아이콘을 넣어줌으로써 중요 문장임을 알려주고 있습니다.
1.3.2 명확한 지시 사항 제공
- 지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
지시사항을 소리정보로만 제공한 경우
잘못된 사례
사례 이미지
지시사항을 소리정보로만 제공한 경우

<지시사항을 소리정보로만 제공한 경우>

사례 설명
퀴즈의 정답을 맞히게 될 경우 ‘딩동댕’ 소리로 정답임을 알려주고 있고, 오답일 경우 ‘땡’ 소리로 문제가 틀렸음을 알려주고 있습니다. 하지만 청각장애나 스피커가 없는 사용자에게는 파악할 수 없는 콘텐츠가 되는 문제가 있습니다.
우수 사례
사례 이미지
고유대명사로 정보를 제공한 경우

<고유대명사로 정보를 제공한 경우>

사례 설명
‘전송’이라는 명확한 목적과 용도를 이해할 수 있을 뿐만 아니라 색, 크기, 모양, 방향 등의 감각을 활용할 수 없는 사용자라 하더라도 지시사항을 명확하게 이해할 수 있게 됩니다. 물론 전제조건은 전송버튼에 레이블 또는 대체텍스트가 있어야 하는 것입니다.
1.3.3 텍스트 콘텐츠의 명도 대비
- 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다.
텍스트의 명도대비가 4.5:1 미만인 경우
잘못된 사례
사례 이미지
텍스트의 명도대비가 4.5:1 미만인 경우

<텍스트의 명도대비가 4.5:1 미만인 경우>

사례 설명
12px 크기의 검은색 텍스트로 정보를 제공하고 있지만 주변 바탕색이 너무 어두워 텍스트를 제대로 읽기 힘든 상황입니다. 특히 저시력자들에게는 화면을 확대하여 본다 하더라도 단순히 어두운 바탕색만 있다고 생각할 수밖에 없게 됩니다.
우수 사례
사례 이미지
14pt미만으로 텍스트명도대비 준수기준 4.5:1 기준을 만족하는 경우

<14pt미만으로 텍스트명도대비 준수기준 4.5:1 기준을 만족하는 경우>

사례 설명
이미지 텍스트의 경우 글자의 크기는 파이어폭스의 부가기능을 이용하여 확인할 수 있으며 글자 크기를 측정한 결과 13px로 픽셀정보를 절대크기로 환산해보더라도 14pt이하인 것을 알 수 있습니다. 명도대비 도구로 측정한 결과 4.9:1로 기준에 부합합니다.
1.3.4 자동 재생 금지
- 자동으로 소리가 재생되지 않아야 한다.
자동 재생되는 동영상 콘텐츠
잘못된 사례
사례 이미지
자동 재생되는 동영상 콘텐츠

<자동 재생되는 동영상 콘텐츠>

사례 설명
웹 페이지에 진입을 하자마자 페이지 내에서 동영상 콘텐츠가 자동으로 실행되는 사례입니다. 이 영상 콘텐츠에서 들리는 배경음으로 인해 화면낭독기 음성을 통한 콘텐츠의 접근에 어려움을 겪게 됩니다. 영상 콘텐츠를 정지시키고 싶어도 어디서 어떻게 제어할 수 있는지 알 수 없게 됩니다. 원치 않는 콘텐츠일 수 있음에도 강제적으로 시작시키는 것은 선택 없이 원치 않는 콘텐츠를 보여주는 경우로써도 적절치 않습니다.
우수 사례
사례 이미지
마우스나 키보드로 선택해야만 실행되는 동영상

<마우스나 키보드로 선택해야만 실행되는 동영상>

사례 설명
마우스 클릭하거나 키보드로 접근 후 선택을 해야 동영상이 실행되도록 영상 콘텐츠를 구현하고 있어 배경음으로 인한 방해가 없도록 제공되었습니다.
1.3.5 콘텐츠 간의 구분
- 이웃한 콘텐츠는 구별될 수 있어야 한다.
테두리를 이용하여 구분하는 방법
잘못된 사례
사례 이미지
테두리가 없는 경우의 예

<테두리가 없는 경우의 예>

사례 설명
이웃한 콘텐츠를 시각적으로 구분하기 위해 모든 콘텐츠에 테두리선을 표시하거나 콘텐츠와 콘텐츠 사이에 구분선 또는 무늬를 추가하여 콘텐츠를 표현할 수 있어야 합니다.
우수 사례
사례 이미지
테두리가 있는 경우의 예

<테두리가 있는 경우의 예>

사례 설명
HTML로 표현되는 컨텐츠 관련 태그들에 border 속성을 추가하여 테두리 선 굵기를 px(픽셀) 단위로 지정하거나, CSS 스타일시트를 이용하여 콘텐츠에 border 속성을 지정할 수 있다.
서로 다른 배경색 또는 무늬를 이용하여 구분하는 방법
우수 사례
사례 이미지
배경색을 다르게 적용하는 경우의 예

<배경색을 다르게 적용하는 경우의 예>

사례 설명
색의 차이가 정보의 다름을 나타내지 않으므로 색을 인지하는 데 장애가 있는 사용자도 혼동을 일으킬 염려가 없게 된다.
콘텐츠 배경색 간의 명도대비(채도)를 달리하여 구분하는 방법
우수 사례
사례 이미지
명도 대비를 달리하여 구분한 경우의 예

<명도 대비를 달리하여 구분한 경우의 예>

사례 설명
흑백 스크린(구형 PDA 등) 또는 경조(硬調: 고대비) 모드사용자들도 콘텐츠의 내용이나 구조를 손쉽게 이해할 수 있다. HTML 태그의 bgcolor 속성을 사용하거나, CSS 스타일시트의 background-color 속성을 사용하여 콘텐츠간의 명도(채도) 차이를 두어 구분할 수 있다.
줄 간격 및 글자 간격을 조절하여 구분하는 방법
우수 사례
사례 설명
인지 장애를 가진 많은 사람들이 한 줄씩 텍스트를 읽는다. 그러므로 줄간격을 늘리는 증가 버튼을 제공한다면, 보다 편하게 콘텐츠를 읽을 수 있을 것이다. 단락과 단락 사이의 분리를 위해, 단락간격 또는 줄간격은 적어도 텍스트크기의 1.5 배 이상이 적당하다.
기타 콘텐츠를 시각적으로 구분할 수 있는 방법 등
우수 사례
사례 설명
텍스트 레이어는 CSS의 font-style 속성으로 텍스트 구성 요소를 강조하고 이미지 레이어는 CSS의 background-image를 사용하여 텍스트 뒤에 그림을 표시하여 시각적으로 구분한다.
이웃한 콘텐츠간의 구분이 어려운 경우
잘못된 사례
사례 이미지
이웃한 콘텐츠간의 구분이 어려운 경우

<이웃한 콘텐츠간의 구분이 어려운 경우>

사례 설명
사용자가 온라인 설문조사를 완료하려고 할 때 설문조사 양식 아래에 있는 버튼 중 하나를 선택해야 하는데 버튼의 기능이나 형태를 구별할 수 없는 경우이다.
우수 사례
사례 이미지
이웃한 콘텐츠간의 구분이 가능한 경우

<이웃한 콘텐츠간의 구분이 가능한 경우>

사례 설명
CSS를 사용하여 버튼의 기능과 형태를 식별할 수 있도록 background, border, margin, padding 속성 등을 지정한다.
단어 내에서 글자간격을 제어하기 위해 공백 문자를 사용하거나 텍스트 내용의 열(column) 구조를 맞추기
잘못된 사례
사례 이미지
W ELCOM 전자

<W ELCOM 전자>

사례 설명
단어의 중간에 공백을 추가하는 경우, 스크린 리더가 단어로 읽지 않고 각각의 문자로 읽게 된다.
우수 사례
사례 이미지
HELLO

<HELLO>

사례 설명
공백문자로 단어가 분리된 경우는 CSS 의 글자간격(letter-spacing)을 사용한다.

웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.

(The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)

팀 버너스 리 경 - 웹의 창시자 (Tim Berners - Lee , W3C Director and inventor of the World Wide Web)

위로가기