한국형 웹 콘텐츠 접근성 지침 2.0(KICS.OT-10.0003/R1, 2010년 12월 31일 제정)을 기준으로 작성한 웹 접근성을 고려한 콘텐츠 제작 기법 2.0 입니다.
[목 차]
Ⅰ. 웹 접근성의 이해 | 11
Ⅱ. 웹 접근성을 고려한 콘텐츠 제작기법 | 29
원칙 1. 인식의 용이성(Perceivable): 모든 콘텐츠는 사용자가 인식할 수 있어야 한다. | 29
검사항목 1.1.1 (적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다. | 31
검사항목 1.2.1 (자막 제공) 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다. | 55
검사항목 1.3.1 (색에 무관한 콘텐츠 인식) 콘텐츠는 색에 관계없이 인식될 수 있어야 한다. | 62
검사항목 1.3.2 (명확한 지시사항 제공) 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다. | 70
검사항목 1.3.3 (텍스트 콘텐츠의 명도 대비) 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다. | 77
검사항목 1.3.4 (배경음 사용 금지) 자동으로 재생되는 배경음을 사용하지 않아야 한다. | 83
원칙 2. 운용의 용이성(Operable): 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다. | 93
검사항목 2.1.1 (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다. | 106
검사항목 2.1.2 (초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다. | 115
검사항목 2.2.1 (응답시간 조절) 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다. | 115
검사항목 2.2.2 (정지 기능 제공) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다. | 119
검사항목 2.3.1 (깜빡임과 번쩍임 사용 제한) 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다. | 123
검사항목 2.4.1 (반복 영역 건너뛰기) 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다. | 128
검사항목 2.4.2 (제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다. | 133
검사항목 2.4.3 (적절한 링크 텍스트) 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다. | 137
원칙 3. 이해의 용이성(Understandable): 콘텐츠는 이해할 수 있어야 한다. | 140
검사항목 3.1.1 (기본 언어 표시) 주로 사용하는 언어를 명시해야 한다. | 142
검사항목 3.2.1 (사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능(새 창, 초점 변화 등)은 실행되지 않아야 한다. | 145
검사항목 3.3.1 (콘텐츠의 선형화) 콘텐츠는 논리적인 순서로 제공해야 한다. | 154
검사항목 3.3.2 (표의 구성) 표는 이해하기 쉽게 구성해야 한다. | 165
검사항목 3.4.1 (레이블 제공) 입력 서식에는 대응하는 레이블을 제공해야 한다. | 174
검사항목 3.4.2 (오류 정정) 입력 오류를 정정할 수 있는 방법을 제공해야 한다. | 183
원칙 4. 견고성(Robust): 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다. | 201
검사항목 4.1.1 (마크업 오류 방지) 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다. | 202
검사항목 4.2.1 (웹 애플리케이션 접근성 준수) 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다. | 209
[적용 기술 목차]
적용 기술 1) 이미지 등에 대한 대체 텍스트 제공 | 31
적용 기술 2) 버튼 이미지에 대한 대체 텍스트 제공 | 32
적용 기술 3) Java 애플릿 등에 대한 대체 텍스트 제공 | 32
적용 기술 4) 이미지 맵에 대한 대체 텍스트 제공 | 35
적용 기술 5) 텍스트 이미지, 그래픽 문자 등에 대한 대체 텍스트 제공 | 35
적용 기술 6) 플래시 콘텐츠의 대체 텍스트 제공 | 37
적용 기술 7) 실버라이트 콘텐츠의 대체 텍스트 제공 | 38
적용 기술 8) 그래프 등에 대한 설명문 제공 | 39
적용 기술 9) 생방송 콘텐츠에 대한 대체 텍스트 제공 | 40
적용 기술 10) CAPTCHA에 대한 대체 텍스트 제공 | 41
적용 기술 11) 온라인 시험 등에 대한 대체 텍스트 제공 | 42
적용 기술 12) 대체 텍스트를 빈 공간(alt="")이나 생략해서 제공해야 하는 경우 · 42
적용 기술 13) 열린 자막 제공 | 55
적용 기술 14) 닫힌 자막 제공 | 56
적용 기술 15) 대본 또는 원고 제공 | 56
적용 기술 16) 수화 제공 | 57
적용 기술 17) 음성이 없는 동영상의 대체 수단 제공 | 57
적용 기술 18) 색을 보완하는 텍스트 제공 | 62
적용 기술 19) 색을 보완하기 위하여 글자모양을 이용하는 방법 | 63
적용 기술 20) 색을 보완하기 위하여 무늬 또는 모양을 이용하는 방법 | 64
적용 기술 21) 시각 정보를 이용한 지시문의 보완 | 70
적용 기술 22) 청각 정보를 이용한 지시문의 보완 | 71
적용 기술 23) 배경과 텍스트 콘텐츠의 색 지정 방법 | 77
적용 기술 24) 배경과 텍스트 콘텐츠 색을 기본 값으로 지정하는 방법 | 78
적용 기술 25) 배경과 텍스트 콘텐츠 색을 변경하는 컨트롤의 제공 | 78
적용 기술 26) 재생 시간이 3초 미만인 배경음의 사용 | 83
적용 기술 27) 배경음을 정지 상태로 제공하는 방법 | 84
적용 기술 28) 플래시 콘텐츠의 배경음 자동 실행 방지 | 84
적용 기술 29) 실버라이트 콘텐츠의 배경음 자동 실행 방지 | 89
적용 기술 30) 키보드와 마우스 이벤트 핸들러 제공 | 95
적용 기술 31) 마우스 드래그와 드롭 기능에서의 키보드 이용 보장 | 97
적용 기술 32) 웹 애플리케이션 제공 시 키보드 이용 보장 | 98
적용 기술 33) 실버라이트 플러그인의 키보드 접근 제공 | 101
적용 기술 34) 콘텐츠 화면 순서와 동일한 키보드 내비게이션 순서 제공 | 106
적용 기술 35) 시각적으로 표시 가능한 초점 표시 방법 | 107
적용 기술 36) 플래시에서 키보드 내비게이션 순서 제공 방법 | 110
적용 기술 37) 실버라이트에서 키보드 내비게이션 순서 제공 방법 | 111
적용 기술 38) 제한 시간 연장 방법 제공 | 115
적용 기술 39) 메타 태그를 이용한 페이지 재 이동 방법 제공 | 116
적용 기술 40) 변화하는 콘텐츠를 일시정지 시키고, 일시정지 된 곳으로부터 다시 시작할 수 있도록 제공 | 119
적용 기술 41) 전체 배너를 보여줄 수 있는 방법 제공 | 120
적용 기술 42) 전체 배너의 리스트 제공 | 120
적용 기술 43) 사용자 요구에 의한 업데이트 방법 제공 | 120
적용 기술 44) 깜빡이는 시간이 3초 이내인 콘텐츠만 제공 | 124
적용 기술 45) 경고 페이지 제공 | 125
적용 기술 46) 반복적인 콘텐츠 영역의 시작 부분에 건너뛰기 링크 제공 | 128
적용 기술 47) 건너뛰기 링크의 화면 표시 | 129
적용 기술 48) 웹 페이지의 제목 제공 | 133
적용 기술 49) 콘텐츠 블록의 제목 제공 | 134
적용 기술 50) 프레임 제목 제공 | 134
적용 기술 51) 링크의 목적을 설명하는 링크 텍스트 제공 | 137
적용 기술 52) <html> 태그에 주 사용 언어 지정 | 142
적용 기술 53) 초점 변화에 의해 맥락을 변화시키지 말고, 해당 인터페이스가 활성화(activate)되었을 때 기능을 실행 | 145
적용 기술 54) 명확한 서식 제출(submit) 버튼 제공 | 146
적용 기술 55) 새 창 열림을 사전에 알림 | 146
적용 기술 56) 콘텐츠를 의미 있는 순서로 배열 | 154
적용 기술 57) 스타일을 이용한 글자 간격 조절 | 157
적용 기술 58) 동적으로 생성된 요소는 그것을 유발시킨 요소 바로 뒤에 위치 | 158
적용 기술 59) 표 제목을 <caption>으로 제공 | 165
적용 기술 60) 표의 구조 또는 내용에 대한 요약을 summary로 제공 | 166
적용 기술 61) 표의 헤더 셀과 데이터 셀의 관계 정의 | 167
적용 기술 62) 입력 서식과 <label>의 명시적 관계 제공 | 174
적용 기술 63) <label>을 제공할 수 없는 입력 서식에 title 제공 | 176
적용 기술 64) 여러 개의 유사한 입력 서식 묶기 | 178
적용 기술 65) 입력 값 또는 형식에 대한 예시 제공 | 183
적용 기술 66) 서버측 오류 검사 | 184
적용 기술 67) 클라이언트측 적합성 검사와 본문에 오류 메시지 표시 | 185
적용 기술 68) 오류 메시지를 스크립트 경고창으로 제공 | 194
적용 기술 69) 중요한 서식 제출 시 재확인 절차 제공 | 197
적용 기술 70) 여는 태그와 닫는 태그의 정확한 사용 | 202
적용 기술 71) 속성 이름과 속성 값의 정확한 사용 | 203
적용 기술 72) 태그의 정확한 중첩관계 | 204
적용 기술 73) 표준에 부합하는 태그와 속성 이름, 값 사용 | 205
적용 기술 74) 플러그인 플랫폼이 제공하는 접근성 API 활용 | 209
적용 기술 75) 웹 애플리케이션의 대체 콘텐츠 제공 | 210
적용 기술 76) 용도, 목적지, 종류, 사용법에 맞는 사용자 인터페이스 요소 사용 · 212
[잘못된 사례 목차]
잘못된 사례 1) 의미나 기능이 있는 텍스트 아닌 콘텐츠에 빈 문자열을 대체 텍스트로 제공 | 45
잘못된 사례 2) 복잡한 정보를 하나의 이미지로 표현하고 간단한 대체 텍스트로만 제공 | 47
잘못된 사례 3) 주기적으로 변하는 콘텐츠의 대체 텍스트를 변경하지 않는 경우 | 48
잘못된 사례 4) 의미 있는 정보를 배경 이미지로 제공 | 48
잘못된 사례 5) 빈칸 이미지의 대체 텍스트가 콘텐츠의 인식을 방해하는 경우 | 50
잘못된 사례 6) 도와 같은 텍스트 아닌 콘텐츠에 대한 설명이 불충분한 경우 | 51
잘못된 사례 7) 중요한 정보를 색으로만 제공하는 경우 | 51
잘못된 사례 8) alt 속성이 아닌 title 속성을 이용하여 대체 텍스트 제공 | 52
잘못된 사례 9) QR 코드에서 URL을 대체 텍스트로 알려주지 않는 경우 | 53
잘못된 사례 10) 자막, 원고, 수화 중 어느 한 가지도 제공하지 않는 경우 | 58
잘못된 사례 11) 동영상의 내용을 요약하여 제공하는 자막 또는 원고의 경우 | 59
잘못된 사례 12) 대체 수단에 대한 또 다른 대체 수단임을 알려주지 않는 경우 | 60
잘못된 사례 13) 열린 자막이 수화를 가리는 동영상 | 61
잘못된 사례 14) 동영상의 해상도가 낮아 수화를 볼 수 없는 경우 | 61
잘못된 사례 15) CSS로 인하여 링크임이 구분되지 않는 경우 | 65
잘못된 사례 16) 색으로만 필수 입력 항목을 표시한 경우 | 66
잘못된 사례 17) 오류 메시지를 색으로만 구분하도록 한 경우 | 67
잘못된 사례 18) 그래프를 색으로만 인식하도록 하는 경우 | 68
잘못된 사례 19) 일정 구분을 색으로만 구분하도록 한 경우 | 69
잘못된 사례 20) 방향, 위치 정보만을 이용하여 사용법을 알려주도록 구현한 경우 | 72
잘못된 사례 21) 화면 위치만을 이용하여 객체를 지정한 경우 | 74
잘못된 사례 22) 버튼 모양만을 이용하여 사용법을 알려준 경우 | 74
잘못된 사례 23) 특수 기호만을 이용하여 사용법을 알려준 경우 | 76
잘못된 사례 24) 전경색은 기본 값으로 두고 배경색만을 지정한 경우 | 79
잘못된 사례 25) 배경색은 기본 값으로 두고 전경색만을 지정하는 경우 | 80
잘못된 사례 26) 배경음이 3초 이상 지속되도록 구현한 경우 | 91
잘못된 사례 27) 마우스 오버 또는 키보드 초점을 받으면 자동적으로 배경음이 실행되는 경우 | 92
잘못된 사례 28) 마우스로만 접근 가능한 이미지 버튼을 제공하는 경우 | 101
잘못된 사례 29) 키보드로 접근할 수 없는 플래시 메뉴 | 102
잘못된 사례 30) 마우스로만 접근할 수 있는 링크를 제공한 경우 | 103
잘못된 사례 31) 키보드만으로 이전 입력 서식 이동이 불가능한 경우 | 105
잘못된 사례 32) 초점을 일부러 보이지 않도록 한 경우 | 112
잘못된 사례 33) 키보드 이동순서가 비논리적인 경우 | 113
잘못된 사례 34) 페이지 재 이동 시 회피 수단을 제공하지 않는 경우 | 116
잘못된 사례 35) 마우스로만 정지할 수 있는 콘텐츠를 제공한 경우 | 121
잘못된 사례 36) 자동으로 변하는 배너 | 122
잘못된 사례 37) 깜빡이는 콘텐츠가 많은 경우 | 125
잘못된 사례 38) 발작 가능성이 있는 동영상을 제공한 경우 | 126
잘못된 사례 39) 번쩍임이 지속되는 영상을 제공한 경우 | 127
잘못된 사례 40) 건너뛰기 링크를 제공하지 않은 경우 | 130
잘못된 사례 41) 건너뛰기 링크를 과도하게 제공한 경우 | 131
잘못된 사례 42) 콘텐츠가 다른 페이지에 동일한 제목을 제공한 경우 | 135
잘못된 사례 43) 프레임 제목이 누락된 경우 | 135
잘못된 사례 44) 특수문자(▩▩▩▩)기호를 제공한 경우 | 136
잘못된 사례 45) 목적이나 용도를 알기 어려운 링크 텍스트 | 138
잘못된 사례 46) 목록 선택 상자에서 초점 변경만으로 새 창이 열리는 경우 | 148
잘못된 사례 47) 체크 상자의 선택만으로 페이지가 다시 로드되는 경우 | 150
잘못된 사례 48) 텍스트 입력 서식에 값을 넣으면 자동으로 제출되는 경우 | 151
잘못된 사례 49) 페이지가 로드될 때 자동으로 팝업 창이 열리도록 한 경우 | 152
잘못된 사례 50) 상위 메뉴와 하위 메뉴의 읽는 순서가 잘못된 경우 | 160
잘못된 사례 51) 배치용 표를 잘못 사용한 경우 | 162
잘못된 사례 52) 표를 이미지로 표현하고, 표 제목을 제공하지 않은 경우 | 170
잘못된 사례 53) 이메일 입력 서식의 레이블을 잘못 제공한 경우 | 180
잘못된 사례 54) 오류 정보를 확인한 후 오류 발생 페이지로 돌아가지 못하는 경우 · 199
잘못된 사례 55) 아이디를 중복 선언한 경우 | 206
잘못된 사례 56) 태그의 중첩관계에 오류가 있는 경우 | 207
잘못된 사례 57) 이미지 링크를 자바스크립트로 잘못 구현한 경우 | 214
잘못된 사례 58) 잘못된 이미지 버튼 구현 사례 | 214
출처 : 한국정보화진흥원 |
원문자료
네이버블로그글쓰기API스팩문서(20100420).docx
KW3CSetup.zip
manual.pdf