웹 콘텐츠 제작기법

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

2. 운용의 용이성(Operable)

2.1 입력장치 접근성

콘텐츠는 키보드로 접근할 수 있어야 한다.

키보드가 아닌 마우스나 태블릿 PC와 같이 정교한 조작을 요구하는 입력 장치로만 접근이 가능할 경우 손이 불편하거나 손을 자유롭게 사용할 수 없는 사용자는 접근이 불가능하기 때문에 사용자가 키보드의 버튼 입력만으로도 동등하게 사용할 수 있도록 해야 한다.

키보드 내비게이션 과정에서 키보드 초점을 받은 링크, 컨트롤 및 입력 서식은 초점을 받지 않은 객체들로부터 구분될 수 있어야 한다.

Tab 키와 Shift + Tab 키에 의한 초점의 이동 순서는 논리적이며 일관성이 있어야 한다. (좌측 상단 영역에서 우측 하단 영역으로 이동)

- 모든 기능은 키보드만으로 사용할 수 있어야 한다.

이미지에 onclick 자바스크립트 이벤트를 적용하여 키보드로 제어할 수 없는 경우

잘못된 사례

사례 이미지
키보드로 제어할 수 없는 버튼

<키보드로 제어할 수 없는 버튼>

해당 사례의 원본소스
<span><img src="" alt="왼쪽" onclick="this.src='';" /></span>
<span><img src="" alt="오른쪽" onclick="this.src='';" /></span>
사례 설명
다양한 배너들을 롤링 형태로 구성한 콘텐츠입니다.
<img>요소에 onclick 이벤트 핸들러를 적용하여 마우스로 클릭하면 기능을 이용할 수 있지만 키보드로는 진입이 불가능하여 이용할 수 없습니다.

우수 사례

해당 사례의 원본소스
<button type="button" class="prev" onclick="prev();">이전 내용</button>
<button type="button" class="next" onclick="next();">다음 내용</button>
사례 설명
잘못된 사례를 위와 같이 변경하면 마우스뿐만 아니라 키보드로도 진입이 되고 Enter 버튼을 이용하여 기능을 실행할 수 있습니다.
링크로 이동할 수 있도록 연결해주는 <a>, 서식에 정보를 입력할 수 있는 <input>, 몇 가지의 내용을 나열하여 선택할 수 있도록 보여주는 <select>, 글쓰기 등에 사용하는 편집창인 <textarea>, 액션을 실행 시킬 수 있는 <button>요소가 아닌 다른 요소에 스크립트를 통해 강제로 제어하게 되면 키보드 접근이 불가능하게 되므로 키보드 제어가 가능한 <a>, <input>, <select>, <textarea>, <button> 요소 등을 사용하여 키보드가 접근할 수 있도록 하는 것이 매우 중요합니다.

마우스에 종속적인 자바스크립트를 사용하여 키보드로 이용할 수 없는 경우

잘못된 사례

사례 이미지
키보드로 세부메뉴를 볼 수 없는 메뉴바

<키보드로 세부메뉴를 볼 수 없는 메뉴바>

해당 사례의 원본소스
// gnb --------------------------------------------
var $gnbmenu = $(".gnbmenu > ul > li > strong > a");
var $submenu = $(".gnbmenu > ul > p");
$gnbmenu.removeClass("on");
$submenu.hide();
$gnbmenu.hover(function(){
$(this).addClass("on");
$gnbmenu.not($(this)).removeClass("on");
$gnbmenu.each(function(i){
if($gnbmenu.eq(i).hasClass("on"))
{
$gnbmenu.eq(i).parent().next().show();
} else {
$gnbmenu.eq(i).parent().next().hide();
}
});
});
사례 설명
자바스크립트로 hover에만 기능을 제공함으로써 마우스로는 주 메뉴에 마우스를 올리면 색상의 변화도 있고, 상세메뉴를 드롭다운 하여 볼 수 있게 되지만 키보드로 접근했을 때는 아무 반응이 없습니다.

우수 사례

사례 이미지
키보드로 세부메뉴를 볼 수 있는 메뉴바

<키보드로 세부메뉴를 볼 수 있는 메뉴바>

해당 사례의 원본소스
// gnb --------------------------------------------
var $gnbmenu = $(".gnbmenu > ul > li > strong > a");
var $submenu = $(".gnbmenu > ul > p");
$gnbmenu.removeClass("on");
$submenu.hide();
$gnbmenu.hover(function(){
$(this).addClass("on");
$gnbmenu.not($(this)).removeClass("on");
$gnbmenu.each(function(i){
if($gnbmenu.eq(i).hasClass("on"))
{
$gnbmenu.eq(i).parent().next().show();
} else {
$gnbmenu.eq(i).parent().next().hide();
}
});
});
$gnbmenu.keyup(function(){
$(this).addClass("on");
$gnbmenu.not($(this)).removeClass("on");
$gnbmenu.each(function(i){
if($gnbmenu.eq(i).hasClass("on"))
{
$gnbmenu.eq(i).parent().next().show();
} else {
$gnbmenu.eq(i).parent().next().hide();
}
});
});
사례 설명
자바스크립트 소스 상에 hover에 정의했던 기능을 keyup 이벤트에 추가하여 키보드 초점을 받았을 때도 동일하게 기능을 이용할 수 있습니다.
마우스나 키보드 어떤 방식으로 접근하더라도 주 메뉴의 세부메뉴까지 확인하고 선택할 수 있습니다.

웹 어플리케이션의 wmode값 설정으로 인해 키보드 이용이 불가능한 경우

잘못된 사례

사례 이미지
키보드가 접근할 수 없는 플래시 지도

<키보드가 접근할 수 없는 플래시 지도>

해당 사례의 원본소스
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://~~~" vspace="0" hspace="0">
<param name="movie" value="(파일명 flash/menu.swf)">
<param name="play" value="true">
<param name="loop" value="true">
<param name="quality" value="high">
<param name="wmode" value="transparent">
</object>
사례 설명
wmode를 transparent로 지정하게 되면 화면낭독기 상에서 키보드가 접근하지 못하게 됩니다.
이는 본 창 위에 투명한 레이어를 한 장 얹게 되는 것과 마찬가지로 본 창의 내용을 미리 읽어 들이는 가상커서 방식으로는 접근하지 못하는 문제가 발생합니다.
즉 MS에서 제공하는 접근성 API인 MSAA를 통해 읽어 들일 수 있는 정보들이 들어 있는 창 위에 플래시 콘텐츠를 올려놓는 모양이 되어 키보드로 진입이 가능해야 하는 버튼이나 콘텐츠가 존재함에도 불구하고 아무 것도 실행할 수 없게 됩니다.

우수 사례

해당 사례의 원본소스
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://~~~" vspace="0" hspace="0">
<param name="movie" value="(파일명 flash/menu.swf)">
<param name="play" value="true">
<param name="loop" value="true">
<param name="quality" value="high">
<param name="wmode" value="window">
</object>
사례 설명
플래시 콘텐츠의 wmode 값을 window로 지정해주었기 때문에 MSAA를 통해 본문에 포함된 플래시 콘텐츠를 화면낭독기에서 인식할 수 있게 됩니다. 즉 하나의 레이어 안에서 콘텐츠를 인식하게 되므로 키보드 접근이 가능해지게 됩니다. 간단한 방법을 통해 접근성을 확보할 수 있지만 투명하게 레이어를 얹어 놓은 디자인적인 효과 때문에 transparent를 많이 사용하고 있습니다.
따라서 HTML문서 위에 플래시 콘텐츠를 구성하는 경우 투명한 느낌을 주려면 아예 플래시 저작도구 내에서 레이어를 겹치는 효과를 만들어 내고 웹 문서 안에서는 wmode 값을 window로 지정해주는 방법이 있습니다.
- 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.

초점의 이동순서가 논리적이지 않으며 일관성이 없는 경우

잘못된 사례

사례 이미지
키보드 초점이 논리적이지 않은 경우

<키보드 초점이 논리적이지 않은 경우>

해당 사례의 원본소스
<table>
<tr>
<td>
<input type=“text” value=“아이디”>
</td>
<td rowspan=“2”>
<input type=“image” src=“” alt=“로그인”>
</td>
</tr>
<tr>
<td>
<input type=“password”>
</td>
</tr>
</table>
사례 설명
로그인 구조를 테이블로 만든 경우입니다.
키보드 초점이동시 테이블 상에서의 초점이동 순서인 좌측에서 우측, 위에서 아래로 초점이 이동하여 아이디, 로그인, 비밀번호의 순으로 초점이 이동합니다.

우수 사례

사례 이미지
키보드 초점이 논리적인 경우

<키보드 초점이 논리적인 경우>

해당 사례의 원본소스
<ul>
<li><input type=“text” value=“아이디”></li>
<li><input type=“password”></li>
<li class=“btn”><input type=“image” src=“” alt=“로그인”></li>
</ul>
사례 설명
콘텐츠들을 테이블을 사용하여 위치시키지 않고, 논리적인 순서로 소스코드를 배열하여 CSS를 활용하여 시각적으로 동일한 배치효과를 가지는 로그인 입력 폼으로 아이디, 비밀번호, 로그인의 초점이동 순서를 갖습니다.

초점 또는 키보드의 위치를 나타내는 요소를 자바스크립트로 감춘 경우

잘못된 사례

사례 이미지
초점이 시각적으로 표시되는 경우

<초점이 시각적으로 표시되는 경우>

해당 사례의 원본소스
<a href=“” onfocus=“this.blur();”><img src=“” alt=“점자도서실 이용안내 배너”></a>
<a href=“” onfocus=“this.blur();”><img src=“” alt=“축제참여하기 배너”></a>
사례 설명
팝업 존에서 보이는 배너 선택 요소에 onfocus="this.blur();"을 사용한 경우입니다.
onfocus="this.blur();"는 웹 접근성 관점에서는 반드시 없어져야 하는 코드로 초점을 보이지 않게 하면서 초점의 위치를 페이지 상단으로 강제 이동시킵니다.
따라서 키보드로 웹 페이지를 탐색하는 시각 장애인과 상지 장애인들에게는 이 콘텐츠에서 더 나아갈 수 없게 되며, 위치에 대한 혼란을 가중시킵니다.

우수 사례

사례 이미지
초점이 시각적으로 표시되는 경우

<초점이 시각적으로 표시되는 경우>

해당 사례의 원본소스
<a href=“”><img src=“” alt=“점자도서실 이용안내 배너”></a>
<a href=“”><img src=“” alt=“축제 참여하기 배너”></a>
사례 설명
잘못된 사례의 원본 소스를 onfocus="this.blur();"를 제거하여 위와 같이 변경하면 현재 위치가 팝업 존의 첫 번째 콘텐츠임을 시각적으로 인지할 수 있습니다.
- 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.

HTML 태그 속성과 스타일을 이용한 크기와 여백 조절

우수 사례

사례 이미지
콘텐츠간 여백을 준 경우의 예

<콘텐츠간 여백을 준 경우의 예>

사례 설명
디스플레이 장치별 화면크기와 해상도에 따라 보여지는 콘텐츠의 크기가 매번 달라지게 된다. 디스플레이 장치와 무관한 콘텐츠 사용의 편의성을 고려하여 콘텐츠의 크기는 window 표준 해상도(96DPI)와 17인치 모니터를 기준으로 대각선 방향 길이로 6mm 이상이 되도록 HTML 태그와 스타일 속성의 width, height를 조절하고 콘텐츠의 선택시 이웃한 콘텐츠와 선택이 중첩되지 않도록 콘텐츠 안쪽 여백은 1픽셀 이상이 되도록 스타일 속성의 padding을 이용하여 조절하면 된다.

컨트롤의 크기가 너무 작고 인접해 있는 경우

잘못된 사례

사례 이미지
콘텐츠간 여백이 없는 경우의 예

<콘텐츠간 여백이 없는 경우의 예>

사례 설명
콘텐츠를 가로 컬럼으로 배치한 테이블을 사용하는 간단한 예이다. 2개의 컨텐츠가 인접해 있고, 크기가 작아 조작이 힘든 경우이다.

우수 사례

사례 이미지
콘텐츠간 여백을 수정한 경우의 예

<콘텐츠간 여백을 수정한 경우의 예>

사례 설명
CSS를 사용하여 크기 지정 및 여백을 조정한다.

2.2 충분한 시간 제공

콘텐츠를 읽고 사용하는 데 충분한 시간을 제공해야 한다.

시간제한이 있는 콘텐츠는 시간적인 제약이 있음을 사용자에게 반드시 알려주어야 한다. (예외의 경우에 해당하는 콘텐츠를 제외한 모든 콘텐츠는 시간제약을 회피하거나 우회할 수 있는 수단을 함께 제공)

저시력자나 지적장애인 등은 이동하거나 스크롤 되는 콘텐츠를 인지하기가 어렵다. 때문에 웹 콘텐츠는 사용자가 이동이나 스크롤을 일시 정지시키거나 지나간 콘텐츠 또는 앞으로 나타날 콘텐츠를 사용할 수 있도록 제공한다.

- 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.

페이지 재 이동시 회피할 수 있는 수단을 제공하지 않은 경우

잘못된 사례

사례 이미지
페이지 재 이동시 회피수단이 없는 경우

<페이지 재 이동시 회피수단이 없는 경우>

해당 사례의 원본소스
<SCRIPT>
setTimeout("location.href='http://www.example.com'", 5000);
</SCRIPT>
사례 설명
매우 짧은 시간 안에 메인페이지로 재 이동시키는 경우입니다.
일반적인 사용자도 읽기 어려운 시간에 장애인과 같이 더 많은 시간을 필요로 하는 사용자에게는 현재 일어나는 상황이 무엇인지 인지하지 못한 채 페이지가 이동되어 혼란을 일으킬 수 있습니다.

우수 사례

사례 이미지
페이지 재 이동시 회피수단이 있는 경우

<페이지 재 이동시 회피수단이 있는 경우>

해당 사례의 원본소스
<p>10초 뒤에 메인페이지로 이동하시겠습니까?</p>
... 중략 ...
<a href=“url”>확인</a>
사례 설명
메인 페이지로 이동하는 것에 대하여 사용자가 선택을 할 수 있도록 확인과 취소 버튼을 제공하며, 충분한 시간을 제공하고 있습니다.
다양한 장애유형에 따른 사용자라 하더라도 인지할 수 있도록 고려하여 콘텐츠를 제공해야합니다.
- 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.

시간에 따라 변화하는 콘텐츠에 정지, 이전, 다음 기능이 없는 경우

잘못된 사례

사례 이미지
자동 배너에 움직임을 제어할 수 없는 경우

<자동 배너에 움직임을 제어할 수 없는 경우>

사례 설명
자동으로 움직이는 배너이지만 정지, 다음, 이전 기능이 아예 제공되고 있지 않아 제어할 수가 없습니다.
사용자의 의도와 상관없이 일방적으로 시간에 따라 변하는 콘텐츠이므로 해당 콘텐츠를 이해하기 위해 여러 차례 확인해야 하는 어려움이 있습니다.

우수 사례

사례 이미지
자동 배너에 움직임을 제어할 수 있는 경우

<자동 배너에 움직임을 제어할 수 있는 경우>

사례 설명
자동으로 움직이는 배너를 제어할 수 있는 기능을 제공하게 되면 자동으로 움직여서 놓친 정보라 하더라도 컨트롤하여 정보를 인식할 수 있습니다.
이런 경우 정지, 이전, 다음 버튼을 소스의 순서 상 앞에 나올 수 있도록 하여 컨트롤할 수 있는 기능이 있음을 먼저 알 수 있도록 제공하는 것이 바람직합니다.
배너보다 위치가 뒤에 있다 하더라도 소스의 순서에는 앞에 오도록 하고 CSS를 통해 위치를 정해주는 것이 하나의 방편이 되겠습니다.

잘못된 사례

사례 이미지
자동으로 움직이는 콘텐츠를 제어할 수 없는 경우

<자동으로 움직이는 콘텐츠를 제어할 수 없는 경우>

사례 설명
좌우 화살표 마우스 오버 시 정지해있으나 키보드 접근 시에는 정지하지 않고 배너가 오른쪽에서 왼쪽으로 계속 흐르는 현상을 보여 멈출 수 있는 기능제공이 필요합니다.

우수 사례

사례 이미지
자동으로 움직이는 콘텐츠를 제어할 수 있는 경우

<자동으로 움직이는 콘텐츠를 제어할 수 있는 경우>

사례 설명
키보드와 마우스 모두 사용자가 콘텐츠를 제어할 수 있는 정지 버튼을 제공하여 접근성 향상 시킵니다.

2.3 광과민성 발작 예방

광과민성 발작을 일으킬 수 있는 콘텐츠를 제공하지 않아야 한다.

깜빡임의 주기와 크기, 변화의 정도에 따라 광과민성 증후군이 있는 사용자에게 발작이나 졸도 등을 유발할 수 있으므로 깜빡이는 콘텐츠의 사용에 유의하여야 한다. (명도 대비나 채도 대비가 큰 화면이 주파수 초당 3~50회 이상으로 깜박 거리는 경우)

- 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.

사전 경고 없이 초당 3~50회 깜빡이는 콘텐츠가 존재할 경우

잘못된 사례

사례 이미지
포켓몬스터 제 38화 폴리곤 화면

<포켓몬스터 제 38화 폴리곤 화면>

사례 설명
위의 그림은 ‘폴리곤 발작사건’의 관련 화면입니다. 각기 다른 단색이 교대로 빠르게 깜빡거림으로 인해 광과민성 발작을 일으킬 수 있습니다. 특히 빨간색 화면과 타 색상이 교차하는 경우를 주의해야 합니다.

우수 사례

사례 이미지
움직임, 깜빡임이 전혀 없는 메인화면

<움직임, 깜빡임이 전혀 없는 메인화면>

사례 설명
깜박임, 움직임이 전혀 없으나 각 콘텐츠 별로 정리정돈이 잘 되어 보이고, 원하는 정보를 쉽게 찾을 수 있게 되어 있습니다.
blink, marquee등과 같이 텍스트에 적용되는 깜박임이나 움직임과 관련된 태그를 사용하지 않았습니다.

2.4 쉬운 내비게이션

콘텐츠는 쉽게 내비게이션 할 수 있어야 한다.

&nbsp;반복 영역을 화면 낭독 프로그램이 읽어주기 전 또는 읽는 도중에 사용자가 핵심 콘텐츠로 이동할 수 있는 수단을 제공해야 한다. 또, 건너뛰기 링크는 시각장애인 뿐 아니라 지체장애인도 키보드 조작 횟수를 줄일 수 있게 하는 효과적인 수단이므로 화면의 디자인측면을 고려하지 않아도 된다면 항시 보이도록 제공하는 것을 권장하고, 디자인측면을 고려해야 한다면 키보드 진입시 보이도록 제공해야 한다.

&nbsp;제목은 불필요한 특수기호를 반복적으로 사용하지 말아야 하고 간단명료해야 한다.&nbsp;그리고 해당 웹 사이트의 어느 페이지와도 다른 제목이어야 한다.


&nbsp;프레임의 경우 아무런 내용이 없는 프레임이라면&nbsp;"빈 프레임"&nbsp;등으로 제목을 제공해야 하고,&nbsp;콘텐츠 블록에 대하여&nbsp;

,

태그 등을 부여하여 제목과 본문을 구분할 수 있도록 제공하는 것이 좋다.

④ 링크 텍스트를 직관적이고 의미 있게 구성하고, 또한 주변 맥락을 통해서도 용도나 목적지를 명확히 이해 할 수 있게 제공해야 한다.

- 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.

건너뛰기 링크를 제공하지 않은 경우

잘못된 사례

사례 이미지
건너뛰기 링크를 제공하지 않은 경우

<건너뛰기 링크를 제공하지 않은 경우>

해당 사례의 원본소스
<body>
<div id=“contents”>
... 중략 ...
</div>
사례 설명
보통 건너뛰기 링크는 <body>요소 다음에 오게 되는데 위 그림은 건너뛰기 링크를 제공하지 않았습니다.
그렇기 때문에 키보드 사용자는 수많은 메뉴들을 반드시 순차적으로 거쳐야지만 본문에 도달할 수 있습니다.
따라서 다음 페이지로 이동하더라도 공통으로 적용되는 주 메뉴를 다시 반복적으로 거쳐야 하는 불편함이 발생합니다.

우수 사례

사례 이미지
건너뛰기 링크를 제공한 경우

<건너뛰기 링크를 제공한 경우>

해당 사례의 원본소스
<body>
<ul>
<li><a href="#contents">본문 바로가기</a></li>
</ul>
<div id=“contents”>
...
</div>
사례 설명
본문 바로가기를 제공함으로써 키보드로 웹 페이지를 탐색하는 사용자도 마우스 사용자와 같이 본문으로 바로 이동할 수 있어 콘텐츠를 운용하는데 원활해집니다. 이와 같이 주 메뉴 뿐만 아니라 반복되는 콘텐츠 영역은 건너뛸 수 있도록 제공함으로써 운용의 용이성을 높일 수 있게 됩니다.

건너뛰기 링크는 제공하고 있으나 동작이 안 되는 경우

잘못된 사례

사례 이미지
건너뛰기 링크를 잘못 연결한 경우

<건너뛰기 링크를 잘못 연결한 경우>

해당 사례의 원본소스
<body>
<ul>
<li><a href="#contents">본문 바로가기</a>
<li><a href="#footer">하위메뉴 바로가기</a>
</ul>
<div id=“main”>
...
</div>
사례 설명
본문 바로가기를 제공하고 있지만 건너뛰기 링크의 아이디와 본문 바로가기의 타겟이 되는 본문영역의 아이디가 서로 연결되지 않아 건너뛰기 링크를 눌러도 초점이 이동되지 않습니다.
결론적으로 제공하지 않은 것과 마찬가지가 됩니다.

우수 사례

해당 사례의 원본소스
<body>
<ul>
<li><a href="#contents">본문 바로가기</a>
<li><a href="#footer">하위메뉴 바로가기</a>
</ul>
<div id=“contents”>
...
</div>
사례 설명
위와 같이 본문 바로가기 링크의 아이디를 본문 영역의 아이디와 연결시켜줌으로써 정상적으로 건너뛰기 링크를 이용할 수 있습니다.

건너뛰기 링크의 화면 표시

우수 사례

사례 이미지
본문 바로가기 이미지

<본문 바로가기 이미지>

사례 설명
건너뛰기 링크는 시각장애인 뿐 아니라 지체장애인도 키보드 조작 횟수를 줄일 수 있게 하는 효과적인 수단이므로 화면의 디자인측면을 고려하지 않아도 된다면 항시 보이도록 제공하는 것을 권장하고, 디자인측면을 고려해야 한다면 키보드 진입시 보이도록 제공해야 한다.
- 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야한다.

페이지 제목의 title 속성을 제공하지 않은 경우

잘못된 사례

사례 이미지
페이지 제목을 제공하지 않은 경우

<페이지 제목을 제공하지 않은 경우>

해당 사례의 원본소스
<head>
<title></title>
</head>
사례 설명
제목을 제공하지 않았기 때문에 웹브라우저 상단의 탭에 URL이 그대로 노출되고 있습니다.
페이지 제목을 제공하지 않을 시, 해당 페이지에 무슨 정보가 들어있는지 알 수 없기 때문에 직접 페이지의 내용을 탐색해야만 내가 찾고 있는 페이지가 맞는지 확인할 수 있습니다.

우수 사례

사례 이미지
페이지 제목을 제공한 경우

<페이지 제목을 제공한 경우>

해당 사례의 원본소스
<head>
<title>KBS 라디오</title>
</head>
사례 설명
제목을 제공하였기 때문에 현재의 페이지가 ‘KBS 라디오’에 관한 정보가 담겨있는지 알 수 있게 됩니다.
페이지의 제목은 해당 페이지의 가장 대표적인 주제나 내용으로 짧게 제공해주는 것이 좋습니다.

페이지 제목이 내용과 다른 의미의 제목을 사용한 경우

잘못된 사례

사례 이미지
페이지 제목이 내용과 다른 의미일 경우

<페이지 제목이 내용과 다른 의미일 경우>

해당 사례의 원본소스
<title>입학전형 일정표</title>
사례 설명
현재 페이지에 대한 제목을 제공하였지만 본문의 내용과 일치하지 않아 사용자에게 혼란을 주게 됩니다.
일반 사용자들에게는 ‘제목이 잘못되었구나.’ 정도로 이해하겠지만 화면 낭독기 사용자의 경우에는 제목을 보고 본문 안에서 정보를 탐색하기 때문에 큰 혼란을 초래하게 됩니다.

우수 사례

사례 이미지
페이지 제목이 내용과 의미가 동일한 경우

<페이지 제목이 내용과 의미가 동일한 경우>

해당 사례의 원본소스
<title>모집요강 > **대학교</title>
사례 설명
‘모집요강’이라는 현재 페이지의 주된 내용을 제목으로 제공함으로써 주된 내용을 추측할 수 있게 됩니다.
되도록 본문의 제목과 같이 뚜렷한 제목을 페이지의 제목으로 제공하는 것이 좋습니다.

페이지 제목에 반복되는 특수문자를 제공한 경우

잘못된 사례

사례 이미지
반복된 특수문자를 제공한 경우

<반복된 특수문자를 제공한 경우>

해당 사례의 원본소스
<title>☆☆☆안녕하세요. 국립***학교입니다.☆☆☆</title>
사례 설명
모양을 위해 연속된 특수기호를 사용하게 되면 화면낭독기에서 “스타스타스타안녕하세요, 국립…” 등과 같이 불필요한 음성을 출력함으로 혼란을 줄 수 있는 사례입니다.
대다수 이런 경우 저작도구에서 셋팅되어서 나오는 경우가 많습니다.

우수 사례

사례 이미지
반복된 특수문자 없이 제공한 경우

<반복된 특수문자 없이 제공한 경우>

해당 사례의 원본소스
<title>안녕하세요. 국립***학교입니다.</title>
사례 설명
반복된 특수문자를 제거함으로써 정확하게 제목을 인식할 수 있게 되었습니다.
페이지의 제목이 화면 낭독기에서 읽는 용도라는 사실을 모른 채 시각적으로만 장식하기 위해 반복되는 특수문자를 사용하는 경우가 없도록 해야 합니다.

페이지 제목의 분류가 더 가능함에도 불구하고, 상위 범주로 제목을 제공한 경우

잘못된 사례

사례 이미지
상위 범주로 제목을 제공한 경우

<상위 범주로 제목을 제공한 경우>

해당 사례의 원본소스
<title>지방세 - ***은행</title>
사례 설명
계좌이체 납부라는 최종적인 제목이나 웹 사이트에서 유일한 제목을 사용할 수 있음에도 불구하고 “지방세”라는 제목을 제공하게 되어 지방세 하위 페이지 간에는 제목이 중복될 수 있는 우려가 있습니다.

우수 사례

사례 이미지
상세 페이지 제목으로 잘 제공한 경우

<상세 페이지 제목으로 잘 제공한 경우>

해당 사례의 원본소스
<title>조회/납부 - ***은행</title>
사례 설명
지방세 하위의 조회/납부를 제목으로 제공하여 좀 더 분류할 수 있는 페이지까지 유일한 제목을 제공하여 페이지 간의 구분을 분명하게 할 수 있도록 정보를 제공합니다.

<frame>, <iframe>, <frameset> 요소의 title 속성이 없거나 값을 비워둔 경우

잘못된 사례

해당 사례의 원본소스

<iframe id=“d” name=“frame” src=“url”></iframe>


<iframe id=“d” title=“” name=“frame” src=“url”></iframe>
사례 설명
<frame>, <iframe>, <frameset> 요소에는 반드시 <title> 속성을 이용하여 제목을 제공해야 합니다. 제목을 제공하지 않게 되면 프레임 내의 페이지의 목적이나 용도를 확인할 수 없어 원치 않는 광고 프레임과 같은 페이지도 접근하여 확인해야 하는 불편함이 발생합니다.

우수 사례

해당 사례의 원본소스
<iframe title=“회원가입용” id=“d” name=“frame” src=“url”></iframe>
사례 설명
프레임의 목적이나 용도를 알 수 있도록 <title>을 이용하여 제목을 제공하였습니다. 이제 해당 프레임에 접근할지 다른 페이지로 이동할지에 대한 선택권을 주게 되어 운용이 용이해졌습니다.

내용 또는 기능이 없는 프레임에 title 속성이 없거나 값을 비워둔 경우

잘못된 사례

해당 사례의 원본소스

<iframe src=“” title=“” id=“d” name=“frame” width=“0” height=“0”></iframe>


<iframe src=“” id=“d” name=“frame” width=“0” height=“0”></iframe>
사례 설명
빈 프레임으로 제공되는 경우라 하더라도 <title>을 사용하여 “빈 프레임”이라는 정보를 제공해야합니다.

우수 사례

해당 사례의 원본소스
<iframe src=“” title=“공인인증서 데이터 처리용 프레임” id=“d” name=“frame” width=“0” height=“0”></iframe>
사례 설명
프레임의 목적이나 용도를 알 수 있도록 <title>을 이용하여 “공인인증서 데이터 처리용 프레임”이라고 하였습니다. 또는 “빈 프레임”이라고 제공하여 해당 프레임이 내용을 가지고 있지 않다는 것을 알려주는 것도 바람직합니다. 프레임에 대한 목적을 명확히 작성하여 시각장애인이 해당 프레임에 접근하기 전에 목적을 사전에 알 수 있게 됩니다.

콘텐츠 블록에 <h1~6>을 사용하여 제목을 제공하지 않은 경우

잘못된 사례

사례 이미지
콘텐츠 블록을 사용하지 않은 경우

<콘텐츠 블록을 사용하지 않은 경우>

해당 사례의 원본소스
<em>구조조정정보</em>
<ul>
<li><a href=“”>구조조정의 정의</a></li>
...
...
</ul>
사례 설명
제목을 강조하기 위해 <em>구조조정정보</em>을 사용한 경우입니다.
<em>은 단순하게 강조를 위해 사용되는 요소지만 콘텐츠 영역의 제목으로 구분되어지는 요소는 아닙니다.

우수 사례

해당 사례의 원본소스
<h2>구조조정정보</h2>
<ul>
<li><a href=“”>구조조정의 정의</a></li>
...
...
</ul>
사례 설명
제목이란 용도로 제공되는 <h>요소를 사용하여 제목을 제공하게 된다면 시각적으로도 구분을 지어주지만 <h2>구조조정정보</h2>로 구현하여 콘텐츠 영역의 제목으로 의미 있는 정보를 제공하게 됩니다.
화면낭독기에서는 제목 간 이동이 가능하므로 더욱 운용이 용이해지게 됩니다.
- 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

목적이나 용도를 알기 어려운 링크 텍스트를 제공한 경우

잘못된 사례

사례 이미지
목적을 알기 어려운 링크 텍스트

<목적을 알기 어려운 링크 텍스트>

해당 사례의 원본소스
<a href="/file/kdf.pdf">PDF보기</a>
사례 설명
목적이나 용도를 이해하기 어려운 단순 동작에 대한 내용만을 담은 링크 텍스트로 제공하여 직관적으로 해당 파일의 성격이 무엇인지 이해하기 어렵습니다.
무엇을 위한 PDF보기인지에 대해서 설명이 없기 때문에 실제로 PDF를 열어봐야 해당 내용을 확인할 수 있도록 제공한 링크라고 할 수 있습니다.

우수 사례

사례 이미지
목적을 이해할 수 있는 링크 텍스트

<목적을 이해할 수 있는 링크 텍스트>

해당 사례의 원본소스
<a href="/file/kdf.pdf" title=“2011년 은행계정 재무상태표”>PDF보기</a>
사례 설명
어떤 데이터의 PDF파일인지 title속성으로 안내해줌으로서 마우스 사용자는 툴팁으로, 화면낭독기 사용자는 title을 읽음으로써 좀 더 명확하게 파일의 성격을 구분할 수 있게 되었습니다.

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

(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)

위로가기