웹 접근성 지침 정리

1. 대체 텍스트 제공

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

1.1 텍스트 이미지

- 웹 접근성 준수를 위해서는 원래 제공하고자 했던 텍스트 이미지 내용을 그대로 대체 텍스트(alt="")로 제공.

1.2 그림과 사진

- 일반적인 인물, 풍경, 회사 로고, 상품 및 제품 사진 등에는 해당 인물의 이름, 풍경의 제목 및 간단한 묘사, 회사 이름, 상품이나 제품의 이름 등을 그대로 대체 텍스트로 넣는 것이 바람직함.

1.3 링크가 걸린 이미지

- 링크 자체에 링크의 성격을 기술해주는 title을 제공하는 것이 바람직. 특히 새창으로 열릴 경우에는 title="새창으로 이동"이라고 제공하는 것이 바람직.

- '이미지의 역할을 그대로 대체할 수 있는' 대체 텍스트를 제공해야 한다는 것. 즉, 이미지가 제공하는 의미적인(semantic) 내용을 대체 텍스트로 제공해야 함.

1.4 불릿 이미지 등 의미가 없는 그래픽 이미지

- 의미 없는 이미지의 대체 텍스트 제공을 위해서 그림 모양을 설명하는 또는 그림과 비슷한 모양의 문자를 넣는 것은 잘못된 방법 임. 대체 텍스트 속성을 아예 쓰지 않는 것도 잘못된 것임.

- 의미 없는 이미지에 대해서는 따옴표만 있고 아무 내용도 없는 (alt=""와 같은) 대체 텍스트를 반드시 넣어주어야 함.

1.5 여러 개가 합쳐진 한 이미지, 이미지 맵

- 큰 그림의 경우 간결하게 대체 텍스트를 넣기가 쉽지 않으므로, alt에는 제목만 넣고, title에 약간 자세한 설명, longdesc을 이용해 별도로 자세한 설명을 넣는 것이 바람직함.

1.6 소제목 텍스트 이미지

- 소제목 이미지에는 다음과 같이 대체 텍스트를 꼭 넣어 주어야 하며, 추가로 문서 전체에서 소제목이 차지하는 역할에 맞는 의미론적인 제목 태그인 h1, h2, h3 또는 h4 등을 넣어주는 것이 좋음.

1.7 공지사항 등의 more(전체보기) 링크

- more 버튼은 버튼 이미지와 동일한 정보를 제공해 주고(img 태그에 alt속성), 별도로 title을 이용하여 링크 페이지(a태그의 title속성)의 설명을 추가하여 링크의 목적지를 알려 줌.

1.8 약도

- 약도와 같이 복잡한 그림의 경우에는 원래 그림의 제시 목적인 위치 설명을 위해, alt, title, longdesc 속성 값을 통해 대체 텍스트를 제시해주는 것이 바람직함.

- 주의할 것은 설명이 긴 경우에 title이나 longdesc을 활용하더라도 alt 속성값은 절대 빠뜨려서는 안 됨.

1.9 조직도

- 시각장애인을 위한 대체 텍스트 제공은 longdesc 속성을 이용해 별도의 파일에서 자세하게 설명을 해야 함. 별도의 파일은 독립적으로 완전해야 하며, 위계적인 구조를 잘 표현할 수 있는 마크업(예를 들면 ul, dl, ol 이나 h1, h2, h3 등)을 사용하는 것이 바람직함.

- longdesc 속성을 사용해서 별도의 파일을 만들 경우에도 원래 이미지에 대한 alt 속성은 빠뜨리지 말고 반드시 넣어주어야 함.

1.10 사이트 맵

- 구조적인 마크업과 이미지를 사용 할 경우에는 반드시 대체 텍스트를 제공해야 함.

1.11 반복적 이미지

- 흔히 쇼핑몰이나 커뮤니티에서 볼 수 있는 것으로, 해당 제품이나 해당 글에 대한 고객의 평가를 시각적으로 나타내기 위해 ★★★ 과 같이 똑같은 이미지를 반복적으로 사용한 경우가 있음.

- 별 하나짜리 이미지(★)와 별 두 개짜리 이미지(★★), 별 세 개짜리 이미지(★★★)를 따로 제작한 다음, 이러한 묶음들에 대해 "매우우수", "우수", "보통"과 같이 대체 텍스트를 넣어주어 등급이 어떻게 되는지 파악할 수 있도록 해주어야 함.

1.12 전화번호와 주소

- 시각적인 깔끔함을 목적으로 텍스트 대신 이미지로 처리된 전화번호와 주소의 경우에는 반드시 적절한 대체 텍스트를 넣어주어야 함.

- 특히 주소를 나타내는 address 태그를 사용하면 의미적으로 해당 부분이 주소임을 나타내줄 수 있음.

1.13 캡챠의 음성지원

- 자동 가입방지를 위한 캡차[CAPTCHA]의 경우에도 시각장애인이 해당 문자를 인지할 수 있도록 음성 데이터를 제공해야 함.

- 자동가입 방지를 위하여 영문의 조합을 자동으로 이미지로 생성하는데 대체텍스트를 제공.

2. 동영상의 자막제공

정의 : 시간에 따라 변화하는 영상 매체는 해당 콘텐츠와 동기되는 대체 매체를 제공해야 한다.

2.1 동영상과 멀티미디어 객체

- 동영상 및 멀티미디어 객체에 대한 접근성 보장을 위해 브라우저 자체적으로 표현할 수 없는 요소들에 대한 고려가 필요. 즉, 브라우저 자체적으로 표현되기 어려운 플래시, 동영상, 애니메이션, 애플릿 프로그램 등을 나타내기 위해서 HTML의 object라는 요소를 사용해야 하며, 현존 브라우저에서 object요소에 포함되는 모든 동영상이나 애플릿 프로그램을 정확히 보여준다는 보장이 없으므로 계층적으로 대체 콘텐츠를 제공해야 함.

- Flash 동영상에 자막을 제공.

- Flash가 없을 경우를 대비하여 Flash player 다운로드 링크를 제공

2.2 캡션(Caption)

- 캡션이란 동영상 비디오의 오디오 트랙 부분에 대한 텍스트 원고 가운데 비디오 및 오디오 트랙과 동기화된 것을 말하며, 실시간으로 나오는 텍스트 자막을 캡션이라고 생각하면 됨.

2.3 원고/대본(Transcripts)

- 원고/대본은 비디오나 오디오의 음성 부분을 별도의 텍스트로 제공하는 것을 말하며, 단순한 대사 외에 추가적인 상황 설명 등이 포함됨.

3. 색상에 무관한 인식

정의 : 콘텐츠가 제공하는 모든 정보는 색상을 배제하더라도 인지할 수 있도록 구성되어야 한다.

3.1 색상을 이용한 정보 구분

- 웹 콘텐츠 제작자의 색상 선택에 대한 제한 및 색상을 이용해 강조를 하지 말라는 것은 아니며, 오직 색상으로만 정보를 전달하는 형태를 피하라는 것임. 웹 콘텐츠 제작자가 색상으로만 정보를 전달하려 한다면, 따라서, 색상으로만 정보를 구분하기보다는 색상 이외의 것 - 맥락, 마크업, 언어적인 설명, 구분 기호 등 - 을 통해서도 정보가 구분되도록 웹 콘텐츠를 제작해야 함.

4. 이미지 맵 사용의 제한

정의 : 이미지 맵 기법이 필요할 경우에는 클라이언트측 이미지 맵을 사용하거나 서버측 이미지 맵을 사용할 경우에는 동일한 기능을 하는 텍스트로 구성된 대체 콘텐츠를 제공해야 한다.

4.1 클라이언트 이미지 맵

- 이미지에 alt 속성을 이용하여 대체 텍스트를 제공.

- area 요소를 사용하여 각 영역에 alt 속성을 제공.

4.2 서버측 이미지 맵

- 서버측 이미지 맵(지도 서비스 같은)은 그림을 분할하는 영역의 모양이 너무 복잡해 불가피한 경우가 아니라면 사용하지 않는 것이 좋으며,또한, 서버측 이미지 맵은 링크에 대한 정보가 서버에 있기 때문에 화면 낭독 프로그램 등의 보조 기기가 그 내용을 해석할 수 없음.

5. 프레임 사용의 제한

정의 : 콘텐츠를 구성하는 프레임의 수는 최소한으로 하며, 프레임을 사용할 경우에는 프레임별로 제목(title)을 붙여야 한다.

5.1 프레임 제목 붙이기

- 각 프레임을 설명할 수 있는 name과 title 속성을 제공.

6. 깜박거리는 개체 사용 제한

정의 : 콘텐츠는 스크린의 깜박거림을 피할 수 있도록 구성되어야 한다.

6.1 깜박이는 콘텐츠의 회피 수단 제공

- 움직이는 그림(animated gif)이나 애플릿 및 스크립트를 사용한 움직임, 플래시를 사용한 깜박임 등이 모두 대상이 되며,이러한 깜박임과 움직임을 사용할 경우, 깜박거림의 주파수 범위가 3hz에서 49hz이며 광과민성 발작의 원인이 됨.

7. 키보드만으로의 운용가능

정의 : 키보드(또는 키보드 인터페이스)만으로도 웹 콘텐츠가 제공하는 모든 기능을 수행할 수 있어야 한다.

7.1 장치독립적인 이벤트 사용

- 마우스 오버이벤트 보단 클릭이벤트 사용을 권장

7.2 키보드 탐색

- accesskey 속성을 사용 할 수 있는 태그 - a, area, button, input, label, legend, textarea

- accesskey 속성은 사용 자제

- 주민등록번호 앞자리를 입력 완료 했을 때 자동으로 뒷자리 입력창으로 넘어가도록 하면 화면을 보지 않고 타이핑하는 사용자가 Tab키를 이용하여 서식간 이동하고자 할때 예측하지 않은 상황을 발생시키므로 사용자 커서는 자동으로 이동시켜서는 안됨

8. 건너뛰기 링크제공

정의 : 웹 콘텐츠는 반복 네비게이션 링크를 뛰어넘어 페이지의 핵심 부분으로 직접 이동할 수 있도록 구성하여야 한다.

8.1 건너뛰기 링크

- 사이트 구조상 네비게이션 링크가 페이지마다 되풀이 될 경우에는 건너뛸 수 있도록 링크를 넣어주어야 함.

8.2 사이트맵

- 사이트 맵이 복잡한 웹을 탐색하는 데에 매우 큰 도움을 주므로 사이트 맵은 매우 쉽게 접근성을 높힐 수 있는 방법임.

8.3 페이지 내 목차

- 한 페이지 내에서 원하는 곳을 찾으려면 모든 문서를 순차적으로 읽어내려 가야 하므로 전체 내용의 목차를 먼저 보여주고 목차를 클릭하면 해당 내용으로 이동하도록 구성해야 함.

9. 반응시간의 조절기능

정의 : 실시간 이벤트나 제한된 시간에 수행해야 하는 활동 등은 사용자가 시간에 구애받지 않고 읽거나 상호작용 하거나 응답할 수 있어야 한다.

9.1 페이지 자동 이동

- 사용자가 시간제한 기능을 동작하지 않도록 할 수 있게 정지 버튼 생성

9.2 빠른 내용의 전환

- 최신 뉴스를 전하기 위해 수 초마다 내용이 갱신되거나, 좌우 또는 상하로 내용이 흐르도록 할 경우, 글 읽는 속도가 느리거나(정신지체 장애인, 어린이 등) 마우스 조작이 어려운 사람(노인, 지체 장애인, 컴퓨터 초보자 등)은 원하는 뉴스나 뉴스 기사를 선택할 수 없음[해결방법 : 최신뉴스를 버튼을 이용하여 이동되게 히고, 자동갱신되지 않게 하면 됨.]

9.3 새창, 팝업 창

- 새창을 사용하지 않고 현재창에서 보여주는게 접근성 측면에서 좋음. 부득이하게 새창을 사용할 경우 a요소에 title="새창 열림" 속성 추가.

10. 데이터 테이블

정의 : 데이터 테이블은 테이블을 구성하는 데이터 셀의 내용에 대한 정보가 충분히 전달될 수 있어야 한다.

10.1 제목 및 요약정보 제공

- 테이블을 쉽게 이해할 수 있도록 제목 caption과, summary을 제공.

- 내용셀과 제목셀은 각각 td와 th요소를 이용해서 구성함.(thead, tbody, tfoot)

10.2 제목 셀과 내용 셀 구분

- 표의 제목셀과 내용셀을 올바르게 짝짓기(scope 속성을 이용해 표시해주는 방법임)

11. 논리적 구성

정의 : 콘텐츠의 모양이나 배치는 논리적으로 이해하기 쉽게 구성하여야 한다.

11.1 스타일 시트와 테이블을 이용한 배치 비교

- 스타일 시트로 코딩.

11.2 스타일 시트의 바른 사용

- 스타일 시트를 이용해서 내용물의 위치를 지정할 때에는 스타일 시트를 제거했을 때에도 논리적으로 이해가 가능해야 함.

11.3 배치용 테이블(layout table)

11.4 문서의 제목 붙이기

- 문서에 제목을 넣어주는 이유는, 문서를 화면 낭독 프로그램(screen reader)를 통해 순차적으로 탐색하게 되는 시각 장애인의 경우, 문서와 문서를 이동할 때에 해당 문서에 어떤 내용이 들어있는지 제목을 통해 쉽게 파악할 수 있게 되지만,

- 문서에 제목이 없을 경우에는, 비장애인들은 한눈에 쉽게 알 수 있는 프레임의 내용일지라도, 시각장애인들은 문서의 내용을 짐작할 수 없으며, 문서의 내용을 모두 다 읽어보아야 하는 불편함이 생김.

- 모든 문서(팝업창, 프레임 문서, 내부 프레임(iframe) 문서 포함)에는 예외 없이, 그 문서의 속성을 가장 잘 대표하는 제목을 붙여야 함.

12. 온라인 서식 구성

정의 : 온라인 양식을 포함하는 콘텐츠는 양식 작성에 필요한 정보, 양식 구성 요소, 필요한 기능, 작성 후 제출 과정 등 양식과 관련한 모든 정보를 제공 해야 한다.

12.1 양식의 접근성

- 웹에서는 양식을 통해 사용자로부터 다양한 방법으로 값을 입력받아 그 결과를 웹 서버에 전송하고 그 결과에 따라 서로 다른 페이지를 보여줄 수 있게 되므로 가장 기본적인 상호작용 방법으로 활용됨.

- 웹 페이지에 양식을 삽입할 때에는 양식의 현재 위치, 빠른 이동, 정확한 맥락 제공, 오류 방지, 작업의 취소, 충분한 시간적 여유 제공 등 접근성을 향상시키기 위한 문제를 신중하게 고려해야 함.

- 예를 들어 관련사이트 바로가기 select박스에서 option값을 선택하자 마자 다른 사이트로 이동하게 되는 셀렉트 박스는 실수로 클릭하게 되면 만회할 방법이 없음. 따라서 항목을 선택한 후 그것을 최종적으로 실행하는 "가기", "확인", "Go" 등의 버튼을 별도로 두는 것이 바람직함.

12.2 각 컨트롤에 정확한 이름 붙이기

- label을 붙여주자

12.3 유사한 컨트롤의 묶음

- Fieldset : 회원 가입, 구독 신청 등과 같이 많은 정보를 양식을 통해 입력받을 때에는 적절하게 비슷한 컨트롤들을 묶어줌으로써 순차적으로 양식을 입력해야 하는 장애인들에게는 현재의 맥락을 쉽게 파악하고, 양식 입력의 오류를 줄일 수 있게 함. 유사한 컨트롤들은 fieldset 요소를 통해 묶어주고, legend 요소를 이용해 제목을 붙임.

- optgroup

- 나치게 목록이 많아지면 정확히 원하는 항목을 선택하기가 어려워지며, 이런 어려움을 부분적으로 해결해주는 것이 유사한 항목을 그룹으로 묶어주는 optgroup 요소임.

13. 신기술 사용 제한

정의 : 스크립트, 애플릿 또는 플러그 인(plug-in) 등과 같은 프로그래밍 요소들은 현재의 보조기술의 수준에서 이들 프로그래밍 요소들의 내용을 사용자에게 전달해줄 수 있을 경우에만 사용하여야 한다.

13.1 스크립트, 애플릿 삽입

- 웹 브라우저가 기본적으로 지원하지 않는 객체를 삽입하려면 object 요소를 사용하며 object 요소에 삽입된 내용을 브라우저가 제대로 표시하지 못할 경우에 대비하여 대체 콘텐츠를 삽입해 주어야 함.

13.2 플래시

- 사이트 전체를 플래시로 제작하고, 플래시 플러그인이 설치 되지 않았거나, 자바스크립트가 지원되지 않는 환경일 경우 이미지와 텍스트로 구성 된 화면을 보여 줌.

- 동등한 내용을 접근할 수 있는 대체 콘텐츠를 제공하고 있으면 준수한 것으로 판단.

13.3 PDF(Portable Document Format)

13.4 자바스크립트로만으로 구현된 기능의 오류

- 브라우저에서 기본적으로 제공하는 기능[새창열기, 복사, 소스보기 등]을 자바스크립트를 이용하여 제한하지 않아야 함.

14. 별도의 페이지 제공

정의 : 콘텐츠가 13개 지침을 만족하도록 최대한 노력하였으나 해결되지 않는 부분이 남아있다면 텍스트만의 콘텐츠를 제공하는 웹 페이지 (또는 웹 사이트)를 별도로 제공해야 한다.

14.1 대체 페이지

- 대체 페이지를 별도로 만들어 제공.

출처 : 웹 접근성 연구소(www.wah.or.kr/)