인식의 용이성
인식의 용이성은 사용자가 장애 유무 등에 관계없이 웹 사이트에서 제공하는 모든 콘텐츠를 동등하게 인식할 수 있도록 콘텐츠를 제공하는 것을 의미한다.
<img>태그를 사용하는 경우,alt속성을 사용하여 짧은 대체 텍스트를 제공한다. 의미하는 바를 대체 텍스트로 충분한 설명이 불가능할 경우 추가적인 설명을 제공해야 한다.
<p><img src="chart.gif" alt="중앙기관 웹 접근성 조사결과"/></p>
<p>2008년도 중앙기관의 웹 접근성 조사결과에 따르면 ... <p><img src="chart.gif" alt="중앙기관 웹 접근성 조사결과" longdesc="dest_chart.html" />
<img>태그의 longdesc 속성은 이미지에 대한 부가적인 설명을 제공하는 URL을 명시합니다.
longdesc 속성은 html5에서는 사용하지 않는다!
- 이미지 맵을 사용할 경우,
<area>태그별로alt속성을 이용하여 해당 영역의 용도나 목적을 대체 텍스트로 제공한다. - 텍스트 설명이 함께 제공되는 이미지 또는 의미가 없는 글머리표 등과 같이 장식용으로 사용하는 이미지에는 대체 텍스트를 빈 공간(
alt="")으로 제공해야 한다.
IR(Image Replacement)
복잡한 구조의 콘텐츠를 가지는 이미지의 경우, 해당 이미지를 배경처리하여 보여주고 이미지와 동일한 내용의 html 콘텐츠을 삽입한 뒤 숨김처리하는 IR(Image Replacement) 기법을 활용 할 수 있다.
#content1 {background:url('content.jpg') no-repeat;}
.hidden {visibility:hidden;position:absolute;}이미지에 alt 값을 넣는 것에 비해 복잡한 구조의 콘텐츠를 제공할 수 있어 스크린리더기에 대해 효과적으로 접근성을 확보할 수 있으나, 약시자를 위한 고대비모드 환경에서는 배경이미지가 단색으로 처리되어 배경 이미지와 텍스트 양쪽 모두를 볼 수 없게 되는 취약점이 있다.
운용의 용이성
- 마우스로 접근 가능 기능이라면 키보드로도 접근이 가능해야 한다. 가능한 한 키보드와 마우스에 공통적으로 적용되는 이벤트 핸들러를 이용한다.
<a
href="#"
onmouseover="process('true', 'on');"
onmouseout="process('false','off');"
onfocus="process('true', 'on');"
onblur="process('false', 'off');">
</a>a,area,button,input,select,textarea요소에는 키보드 포커싱이 가능해야 한다.- 포커스가 되지 않는 요소에 스크롤이 있는 경우
tabindex="0"속성을 제공하거나textarea요소로 변경하여 해당 영역을 키보드 방향키로 스크롤할 수 있게 한다. - Tab 키와 Shift + Tab 키에 의한 초점의 이동 순서는 논리적이며 일관성이 있어야 한다.
- 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 하며, 읽고 있는 사용자가 충분한 읽을 시간을 얻기 위해 일시정지 시킬 수 있어야 한다.
- 링크나 버튼에 충분한 크기의 클릭 영역을 제공하여야 한다. (최소 10×10 px)
- 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다. (
title,h1) iframe태그 사용 시에는 해당 내용을 의미하는title속성을 지정해 주어야 한다.
<iframe title="빈 프레임"></iframe>이해의 용이성
이해의 용이성은 사용자가 장애 유무 등에 관계없이 웹 사이트에서 제공하는 콘텐츠를 이해할 수 있도록 제공하는 것을 의미한다.
- 링크가 스크립트를 통해 새창 또는 팝업창으로 열리는 경우,
title="새창으로 열림"값을 제공하여야 한다. (target="_blank" 를 제공하는 경우 생략 가능)
<a href="guide.html" onclick="window.open(this.href,'new','width=300,height=300');" title="새창으로 열림">우편번호 찾기</a><table>태그 사용 시, 테이블의 내용을 이해할 수 있도록<caption>태그를 제공해야 한다. (테이블 앞에 명확한 제목 요소가 있을 경우 생략 가능)
<table>
<caption>한국의 월별 강수랑</caption>HTML5 이전에는 table에 summary 속성을 사용하여 요약 정보를 제공했으나, W3C에서는 모든사람이 유용한 정보를 얻을 수 있도록 summary 속성으로 제공할 내용을 caption에 포함하거나, table 요소 이전 화면에 출력하는 방식으로 제공하는 것을 권장하고 있습니다.
-
가로, 세로 헤더가 있는 2차원 표에는
scope속성을 제공하여야 한다.<th>태그의scope속성은 해당 헤더 셀이 관련되는 셀의 종류를 명시합니다. (col, row, colgroup, rowgroup) -
테이블에서 대응하는 제목셀이 여러 개인 내용 셀의 경우(내용 셀이 colspan으로 병합된 경우) 제목 셀에
id를 지정하고header속성 으로 연결한다.
<!--1행 1열이 헤더인 테이블-->
<tr>
<th>구분</th>
<th scope="col" id="gold">골드</th>
<th scope="col" id="top">프리미엄</th>
<th scope="col" id="vip">VIP</th>
</tr>
<tr>
<th scope="row" id="fare">일반요금</th>
<td headers="gold fare">20,900원</td>
<td headers="top fare">31,100원</td>
<td headers="vip fare">34,200원</td>
</tr>
<tr>
<th scope="row" id="child">아동요금</th>
<td colspan="3" headers="gold top vip child">초등학생까지 일반 요금의 50%</td>
</tr>- 제목셀이 가로로 병합된 경우
scope="colgroup", 세로로 병합된 경우scope="rowgroup"속성을 지정한다.
<tr>
<th id="weekday" scope="col" rowspan="2">평일</th>
<th id="normal" scope="col" rowspan="2">정상요금</th>
<th id="member" scope="colgroup" colspan="3">회원요금</th>
</tr>- 장애인 등이 사용하는 정보통신 보조 기기도 일반적인 순서에 따라 콘텐츠를 이해할 수 있도록 설계해야 한다. 제목1-내용1-제목2-내용2... 순으로 내용을 배치하고, 목록에 대한 더보기는 코드상 목록의 아래에 배치하고 CSS로 위치를 조정한다.
- 웹 페이지를 구성하는 기본 언어를 정확히 명시하여야 한다.
<!doctype html>
<html lang="ko">
<head>- 입력 서식에는
<label>태그를 붙여줌으로써 양식을 쉽게 사용할 수 있어야 한다.
<label for="uid">아이디</label> <input type="text" id="uid" />
<label for="upw">비밀번호</label> <input type="password" id="upw" />대응하는 텍스트가 없을 시, title 속성을 이용하여 설명을 제공할 수 있다.
<input type="text" title="주민등록번호 앞자리" /> - <input type="password" title="주민등록번호 뒷자리" />견고성
- HTML 문법에 오류가 없어야 한다. (태그의 열고 닫음, 태그의 중첩, 중복 선언된 속성, 특정 태그에 넣을 수 없는 태그)
- 의미에 맞지 않는 마크업을 사용하지 않아야 한다.
- 낮은 버전의 브라우저에서도 기본적인 내용을 동일하게 제공하여야 한다.
- 화면확대, 고대비 모드에서 내용을 정상적으로 확인할 수 있어야 한다.
참고자료
