우리들의 이야기
웹 접근성 향상을 위한 체크리스트
등록일2013.03.29
적절한 대체 텍스트 제공
- <img>, <input type="image">, <area>, <applet> : alt 속성으로 의미나 용도를 이해할 수 있도록 적절한 대체 텍스트 제공
- 블릿 이미지 등 의미없는 이미지에 alt 속성을 제공 <img src="..." alt="">
- <img> 요소에 longdesc 속성을 제공하여도 alt 속성에 이미지에 대한 설명을 추가해야 함
- 배경이미지 (IR기법) : 의미있는 배경 이미지를 사용하였을 경우, 배경이미지에 대한 대체 텍스트 제공
- 링크, 버튼 : 용도가 명확한 이미지 링크, 이미지 버튼 등은 핵심 기능에 대한 설명을 구체적으로 대체 텍스트를 제공 (아이콘 포함)
- 웹 애플리케이션을 제공할 때, 동등한 기능을 수행 할 수 있는 대체 콘텐츠를 함께 제공
정보전달을 위한 영상 및 음성 정보에 텍스트 (자막, 원고) 또는 수화를 제공
- 멀티미디어 컨텐츠 : 동등하게 인식할 수 있도록 자막, 원고 또는 수화를 제공
- 사용자 생성 컨텐츠 (UGC, UCC) : 사용자가 대체 수단을 제공받을 수 있는 환경을 제공
- 음성없이 텍스트만 제공되는 동영상의 경우, 음성을 제공하지 않으면 전맹, 저시력인은 정보를 접할 수 없게 되므로 텍스트와 동일한 음성을 제공
- 텍스트로 된 대본을 따로 제공하여 스크린리더나 점자정보단말기, 모바일의 VoiceOver, TalkBack과 같은 도구로 영상에 대한 정보를 인지할 수 있도록 해야 함
- 대체 텍스트 또는 설명, 오디오 해설 제공 등의 방법으로 대체 수단을 제공
- 동영상, 음성 등 멀티미디어 컨텐츠에 대한 동기화된 자막과 원고를 제공
색에 무관한 컨텐츠 인식
- 특정한 색을 구분할 수 없는 사용자나 흑백 디스플레이 사용자 등이 색을 배제하여도 컨텐츠를 인식할 수 있도록 제공
- 컨텐츠(그래프, 차트, 지도 등)는 색에 관계없이 인식될 수 있게 제공
- 색상만으로 컨텐츠 (그래프, 차트, 지도, 페이지 네비게이션 등)를 분별 하도록 제공 했는지 체크
- 페이지 네비게이션, 메뉴, 현재 위치등의 정보를 명암,패턴등의 변화없이 색상만으로 제공했는지 체크
W3C Validation을 통과 (마크업 오류 방지)
- 브라우저가 잘못해석하여 레이아웃이 깨지거나 동작을 하지 않는 등의 문제를 최소한으로 방지하여 모든 사용자 환경에서 동일한 형태의 웹 콘텐츠를 제공하기 위함
- 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 함
- 태그의 열고 닫음 체크
- 태그의 중첩이 올 바른지 체크
- 한 요소에 중복된 속성 선언 여부 체크
- 한 페이지에 중복된 id 속성값 선언 여부 체크
HTML 코드에 주언어 관련 속성(lang) 선언
- 시각 장애 환경에서 스크린리더나 점자정보단말기, 모바일의 VoiceOver, TalkBack 등으로 웹에 접근하는 경우, 주언어가 명시되어 있으면 해당 언어에 알맞게 출력되어 콘텐츠의 이해가 수월해짐
- DTD가 XHTML 계열이 아닌 경우 : <html lang="ko">
- DTD가 XHTML 계열인 경우 : <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
- 주언어 명시는 콘텐츠가 있을 때 필요한 것이므로, 내용이 없는 빈 프레임의 경우 선언하지 않아도 오류 아님
- 모바일 환경에서 주언어 관련 속성의 유무 확인 : Firefox 도구 메뉴 User Agent Switcher 의 Defalut User Agent 설정으로 원하는 모바일 기기 환경을 선택한 후, N-WAX를 활용
배경음 사용금지
- 자동으로 재생되는 배경음 (동영상, 음성, 음악) 사용금지
- 배경음 사용시 사전 경고나 제어할 수 있는 수단 제공
- 3초 이상 자동으로 재생되는 배경음 사용 여부 체크
- 3초 이상 자동으로 배경음을 제어할 수 있는 수단을 제공하고 있는지 체크
- 3초 이상 자동으로 배경음을 제어할 수 있는 수단이 화면 낭독 프로그램 음량에 영향을 주는지 체크
- 마우스 오버, 키보드 초점을 받아 3초이상 재생되는 배경음 사용 여부 체크
표의 구성
- 표의 제목을 <caption> 요소로 제공
- 표의 구조 또는 내용에 대한 요약을 summary 속성으로 제공
- <thead>, <tbody>, <tfoot>으로 그룹핑
- 표의 헤더 셀은 <th>요소로 마크업, 데이터 셀은 <td>요소로 마크업
- 표의 헤더 셀은 scope 속성을 선언
- th로 그룹핑 안될경우 <thead>생략가능, tbody만 있을 경우 <tbody>생략 가능
- 레이아웃용 테이블에 데이터 테이블 엘리먼트 (caption, th, tbody, thead, tfoot)를 사용하면 오류로 처리
주요 콘텐츠 블록의 제목을 <h1> ~ <h6>로 마크업
- 스크린리더, VoiceOver, TalkBack에서는 머리말 역할의 헤딩 태그 <h1> ~ <h6>으로만 이동하는 기능이 있고 자주 사용됨
- 헤딩태그가 없거나 해딩 태그가 너무 많으면 시각장애 환경에서는 웹 페이지 내용 파악에 어려움을 느낌
- 주요 콘텐츠 블록의 제목을 h2로 제공
- 화면에는 표시되지 않지만 콘텐츠의 바른 이해를 위해 숨김 제목을 제공
- 너무 많은 헤딩은 오히려 페이지 파악에 어려우므로 핵심 콘텐츠 블록에만 헤딩을 사용
키보드 사용 보장
- 키보드와 마우스 이벤트 핸들러 제공 : 마우스로 접근 가능한 기능이라면, 키보드로 접근 가능해야 함
- 마우스 드래그와 드롭 기능에서의 키보드 이용 보장 : 마우스 드래그 및 드롭 방법만으로 구현하지 않고 체크상자, 선택 버튼기능등을 제공함으로써 키보드 사용이 보장될 수 있도록 해야 함
- 부가 애플리케이션 (Flash, 실버라이트 등) 제공시 키보드 이용이 가능해야 함
- 사용자 상호작용이 필요한 컨텐츠를 대화형 컨텐츠로 구현해야 함
포커스가 논리적인 순서로 이동
- 포커스 이동만으로 웹을 탐색할 때 모든 요소에 논리적인 순서 (위→ 아래, 왼쪽 → 오른쪽, 메뉴 → 내용 등)로 접근 가능해야 하며, 포커스가 같은 영역에서 맴돌거나 더 이상의 이동이 어려운 경우가 발생하지 않도록 해야 함
- 아이프레임이나 플래시처럼 기본 맥락과 다른 형태의 콘텐츠가 삽입되더라도 무리 없이 포커스 이동만으로 탐색 가능해야 함
- 논리적인 순서는 위→ 아래, 왼쪽 → 오른쪽, 메뉴 → 콘텐츠, 탭1 → 탭1내용 → 탭2 → 탭2내용, 메뉴1 → 메뉴1-1/메뉴 1-2 → 메뉴2 → 메뉴 2-1 순서로 이동하는 것을 의미함
포커스의 시각적 구별
- 키보드를 이용해 탐색 시 특정 영역이 포커스를 받았을 때, 그 지점을 시각적으로 인지할 수 있어야 함
- 브라우저마다 약간의 차이는 있으나, 텍스트 인풋 박스에 커서가 깜박거리거나 링크 영역에 포커스가 받았을 때 점선 모양이 표시되는 것이 해당됨
- this.blur()나 outline:none 스타일을 지정하여 브라우저에서 기본적으로 제공되는 포커스 표시를 없애지 않도록 함
- this.blur()를 사용하면 포커스가 페이지 첫부분으로 날아가기 때문에 키보드 사용자는 웹페이지 탐색을 할 수 없게 됨
- 포커스를 받았음을 인지할 수 있는 다른 방법을 제공한다면 outline:none을 사용하여도 무방함
프레임의 제목이 title 속성 값에 반영
- 스크린리더나 점자정보단말기, 모바일의 VoiceOver, TalkBack 등은 <frame>, <iframe>에 제공된 title속성 값을 읽어줌
- 프레임에 title이 없을 경우 "프레임시작, 프레임끝" 으로 읽어주며 어떤 프레임인지 알 수 없기 때문에 시각장애환경에서 웹페이지 사용에 어려움이 있음
- <frame>, <iframe>에 title속성 / 속성값이 존재하는지 확인
- 프레임 제목을 title로 제공
- 기능이나 내용이 없는 프레임에도 "빈프레임", "내용없음" 등의 title을 넣어주어야 함
반복되는 콘텐츠(메뉴 등) 건너뛰기
- 대메뉴 등 반복되는 영역은 건너뛰기 링크를 제공
- 건너뛰기 링크는 육안으로 보이게 하는 것을 권장하며 최소한 키보드로 접근시에는 보여져야 함
- 건너뛰기 링크 대상 요소의 hasLayout 속성이 false이면 IE9 이하에서 키보드 포커스 이동이 되지 않음
- 건너뛰기 링크를 4개 이상 제공한 경우, 오류는 아니나 3개 이하를 권장함
- Opera와 Webkit 계열의 브라우저에 건너뛰기 링크 대상 요소로 키보드 포커스 이동이 되지 않은 버그가 있음
적절한 링크 텍스트
- 링크 텍스트만으로도 링크의 목적이나 용도를 이해할 수 있도록 제공
- 링크가 단독으로 쓰였을 때 그 목적지를 알 수 없으면 앞뒤 문맥을 모두 파악해야 하므로 링크가 단독으로 쓰였을 때도 용도나 목적지가 모호하지 않도록 제공
- UI상 정확한 링크 텍스트 제공이 어려워 (공간이 협소한 경우 등) 숨김 텍스트 혹은 title로 제공한 경우는 오류 아님
- 한 페이지에 다른 목적지를 가진 동일한 링크 텍스트가 두개 이상 들어간 경우가 없는지 체크
사용자 요구에 따른 실행
- 실행은 onclick, enter로 가능하게 적용
- 자바스크립트로 새창을 띄웠으나 target="_blank"를 함께 사용한 경우는 오류 아님
- window.open을 사용하면 새창을 띄우는 요소에 title="새창"을 제공해야 함
- 웹 사이트 로딩시 자동으로 실행되는 콘텐츠 (팝업창, 레이어 팝업, 배경음) 사용 금지
- 플래시 등에서 제공하는 새창에서도 Name, Description값에서 새창 안내가 없으면 오류
폼 콘트롤 요소에 label을 제공, 폼 콘트롤 요소의 id값과 <label>의 for값을 동일하게 제공
- <input> 의 id값과 label의 for값이 일치해야 함
- 폼 콘트롤 요소에 매칭할 레이블이 존재하는대도 title만 제공하였는지 체크
- UI상 label이 들어갈 공간이 협소하여 title로 제공할 경우에는 오류 아님
- 폼 콘트롤 요소에 레이블이 바르게 선언되었는지 확인
오류정정
- 입력 서식을 잘못 작성한 경우, 해당 서식 필드로 초점 이동 제공
- 입력 값 또는 형식에 대한 예시 제공
- 필수 입력사항이나 일정한 양식에 따른 입력란에 대해 사용자가 입력하지 않거나 잘못 입력한 경우 사용자의 실수가 어떤 것인지 안내 제공
- 검색 버튼을 눌렀을 때 아무런 오류 메세지 없이 검색 결과 페이지로 이동되면 오류 아님
웹 애플리케이션 접근성 준수
- 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 함
- <a>요소 href 속성 값에 JavaScript를 사용한 경우 체크
- <form>요소 action 속성 값을 제공하지 않은 경우 체크
- <button type="submit">, <input type="submit">, <input type="image">가 없는 <form>요소 체크
기타
- 웹페이지의 제목이 웹브라우저의 제목으로 사용
- <title>엘리먼트에 반복되는 특수문자를 제공한 경우 체크
- <title>엘리먼트를 제공하지 않은 경우 체크
- 게시판의 경우에도 글읽기, 글보기, 목록 등 각각의 게시판 용도에 맞는 페이지 제목을 제공해야 함
- 각 페이지의 핵심 내용을 페이지의 제목으로 사용