학과 책장에 11년 전에 출간한 웹 접근성 책을 찾았습니다.
책 목차를 살펴보니 WCAG 표준에서 제정한 아래 4가지 원칙을 개별마다 많은 사례를 바탕으로 다루고 있네요.
- 인지할 수 있는(Perceivable)
- 조작 가능한(Operable)
- 이해할 수 있는(Understandable)
- 견고함(Robust)
자료가 오래되었지만 흥미 있는 사례집이라 읽어 보려고 합니다.
![2부 웹 접근성 기본 4원칙
3장 인식의 용이성: 모든 콘텐츠는 사용자가 인식할 수 있어야 한다
3.1
[검사항목 1] 적절한 대체 텍스트 제공 ... 111
3.1.1 [오류유형 1-1] 텍스트 이미지의 대체 텍스트 미 제공 ..• 113
3.1.2 [오류유형 1-1] 불충분한 대체 텍스트를 제공한 경우 ... 115
3.1.3 [오류유형 1-1] 대체 텍스트가 오타로 표기된 경우 ... 117
3.1.4 [오류유형 1-1] 이미지 버튼에 대체 텍스트를 제공하지 않은 경우 ... 118
3.1.5
[오류유형 1-1] 게시물의 이미지에 대체 텍스트가 제공되지 않은 경우 ... 119
3.1.6
[오류유형 1-2] 불릿 이미지에 대한 대체 텍스트를 제공하지 않은 경우 ... 121
3.1.7
[오류유형 1-2] 의미 없는 이미지에 대체 텍스트를 제공한 경우 ... 123
3.1.8 [오류유형 1-2] 분리된 이미지 조각의 대체 텍스트 제공 ... 124
3.1.9 [오류유형 1-3] 〈Iongdesc〉의 파일이 없거나 연결되지 않은 경우... 125
3.1.10 [오류유형 1-3] 〈longdesc〉 내용이 의미나 기능을 파악하기 어려운 경우 ... 126
3.1.11 [오류유형 1-4] 이미지맵의 〈img〉 요소에 alt 속성을 제공하지 않은 경우 ... 129
3.1.12 [오류유형 1-5] 조직도 이미지맵의 〈area〉로만 대체 텍스트를 제공한 경우 ... 131
3.1.13 [오류유형 1-6] 대체 텍스트를 tite만으로 제공하는 경우 ... 133
3.1.14 [오류유형 1-7 QR 코드의 이동 주소 정보를 대체 텍스트 등으로 제공하지 않은 경우
... 133
3.1.15 [오류유형 1-8] 의미 있는 배경 이미지의 대체 콘텐츠를 제공하지 않은 경우 ... 135
3.1.16 [오류유형 1-8] 의미 있는 색상 배경 이미지에 대체 콘텐츠를 제공하지 않은 경우 ... 137
3.1.17 [오류유형 1-9] 플래시 콘텐츠에 대체 텍스트를 제공하지 않은 경우 ... 138
3.1.18 [오류유형 1-9] 웹 애플리케이션의 대체 콘텐츠가 접근성이 없는 경우 ... 141](https://media.hackers.pub/note-media/936d8e0a-f0d2-46f4-809f-97294ac5d7e7.webp)
![4장 운용의 용이성: 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션할 수 있어야 한다
4.1
[검사항목 기 키보드 사용 보장 ... 191
4.1.1 [오류유형 1-1] 이미지에 onclick 이벤트를 적용하여 키보드로 제어할 수 없는 경우 ... 198
4.1.2 [오류유형 7-1] 키보드 이벤트를 적용하지 않아 키보드 접근이 안 되는 경우 ... 195
4.1.3 [오류유형 7-11 readonly 속성을 사용하여 대체 수단이 비활성화되는 경우 ... 197
4.1.4 [오류유형 1-1 마우스용 자바스크립트 사용으로 키보드 이용이 불가능한 경우 ... 198
4.1.5 [오류유형 7-2] 플래시 wmode 값 설정으로 키보드 이용이 불가능한 경우 ... 200
4.1.6 [주의사항 7-1] 웹 접근성 품질인증심사에서는 IE8 브라우저에서 키보드 테스트함 ... 203
4.1.7 [주의사항 7-21 onclick 이벤트 핸들러에 키보드로 제어가 불가한 경우 감점 ... 203
4.1.8 [주의사항 7-3] 예외 콘텐츠라도 주변 인터페이스는 키보드로 사용할 수 있어야 함 ... 203
4.1.9 [주의사항 7-4] 키보드로 탭메뉴에서 탭 내용을 확인할 수 없는 경우 감점 ... 204
4.1.10 [주의사항 7-5 oniocus="this.blur0;" 사용 시, 검사항목 7, 8, 16에서 감점 ... 204
4.1.11 [주의사항 7-61 wmode를 transparent, opaque로 지정 시 화면 낭독기 인식 불가능
... 205
4.2
[검사항목 8] 초점 이동 ... 206
4.2.1 [오류유형 8-1] 초점의 이동 순서가 논리적이지 않으며 일관성이 없는 경우 ... 207
4.2.2 [오류유형 8-21 초점의 위치가 시각적으로 표시되지 않은 경우 .•. 209
4.2.3 [오류유형 8-3] 〈area〉 요소의 순서가 키보드 순서와 다른 경우 ... 213
4.2.4 [주의사항 8-11 onfocus="this.blur0;" 사용 시, 검사항목 7, 8, 16에서 감점 ... 214
4.3
[검사항목 9] 응답시간 조절 ... 215
4.3.1 [오류유형 9-1] 페이지 재이동 시 회피할 수 있는 수단을 제공하지 않은 경우 ... 216](https://media.hackers.pub/note-media/ab959b1c-f2a1-416f-a9e9-f80c0b31bedf.webp)
![5장 이해의 용이성: 콘텐츠는 이해할 수 있어야 한다
5.1
[검사항목 15] 기본 언어 표시 ... 257
5.1.1
[오류유형 15-11 〈html〉에 lang 속성을 명시하지 않은 경우 ... 258
5.1.2
[오류유형 15-1] 〈html〉에 lang 속성을 잘못 명시한 경우 ... 259
5.1.3 [주의사항 15-1] lang 속성값에 국가별 지정언어 코드를 사용해야 함 ..• 260
5.1.4 [주의사항 15-21 페이지 중간에 언어가 바뀔 때 lang 속성으로 명시해주는 것을 권장 ... 262
5.2
[검사항목 16] 사용자 요구에 따른 실행 ... 263
5.2.1
[오류유형 16-1] 사용자가 예측하지 않은 새 창이 열리는 경우 ... 264
5.2.2
: [오류유형 16-1] 사전에 알리지 않은 새 창이 발생되는 경우 ... 267
5.2.3 [오류유형 16-2] 웹사이트 초기화면에 팝업창을 제공하는 경우 ... 268
5.2.4 [오류유형 16-3] 사용자가 의도하지 않은 초점 변화가 발생하는 경우 ... 271
5.2.5 [오류유형 16-4] 입력 서식의 값 변경만으로 제출되어 문맥이 바뀌는 경우 ... 273
5.2.6 [오류유형 16-4] 체크상자의 선택만으로 값이 제출되어 문맥이 바뀌는 경우 ... 274
5.2.7 [주의사항 16-1] onkeypress에 의해 포커스를 옮기는 동작만으로 새 창이 발생하면 감점
... 275
5.2.8 [주의사항 16-21 〈a targel="_blank">로만 새 창을 알린 경우는 감점하지 않음 ... 276
5.2.9
[주의사항 16-3] onfocus="this.blur)" 사용 시, 검사항목 7, 8, 16에서 감점 ... 276](https://media.hackers.pub/note-media/73ac2eb4-b098-4454-b5df-9c6757ffa581.webp)
![6장 견고성: 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 최대한 호환되어야 한다
6.1
[검사항목 21] 마크업 오류 방지 ... 317
6.1.1 [오류유형 21-1] 태그의 열고 닫음 오류 ... 318
6.1.2 [오류유형 21-2] 태그의 중첩 오류 ... 319
6.1.3 [오류유형 21-3] 중복 선언된 속성 오류 ... 320
6.1.4 [주의사항 21-1] ID 값 중복 선언은 오류유형 21-3에서 심사 ... 320
6.1.5 [주의사항 21-2] 위에 언급된 항목 이외의 표준문법 오류는 포함하지 않음 ... 321
6.1.6 마크업 오류 세부 사례 ... 321
6.1.6.1 [열고 닫음 오류 사례 1 (a) 요소 여는 태그 미 제공 ... 321
6.1.6.2 [열고 닫음 오류 사례 2 〈ul〉 요소 여는 태그 미 제공 ... 322
6.1.6.3 [열고 닫음 오류 사례 31 div》요소 여는 태그 미 제공 ... 323
6.1.6.4 [열고 닫음 오류 사례 41 〈a〉 요소 닫는 태그 미 제공 ... 323
6.1.6.5 [열고 닫음 오류 사례 5] 《strong〉 요소 닫는 태그 미 제공 ... 324
6.1.6.6 [열고 닫음 오류 사례 61 〈h 요소 닫는 태그 미 제공 ... 325
6.1.6.7 [태그의 중첩 오류 사례] 《p》와 《strong》의 중첩 제공 ... 326
6.1.6.8 [속성 중복 오류 사례 11 〈p〉 요소에 대한 style》 속성 중복 제공 ... 326
6.1.6.9 [속성 중복 오류 사례 2] ID 속성 중복 제공 ... 327
6.2
[검사항목 22] 웹 애플리케이션 접근성 준수 ... 330
6.2.1 [오류유형 22-1] 접근성이 없는 웹 애플리케이션의 대체 콘텐츠가 없는 경우 ... 331
6.2.2 [오류유형 22-1] 대체 콘텐츠가 핵심 기능을 동등하게 제공하지 못한 경우 ... 332](https://media.hackers.pub/note-media/fd2e3ccf-e307-4908-979f-80338e4b39ca.webp)
If you have a fediverse account, you can quote this note from your own instance. Search https://hackers.pub/ap/notes/0196b3cd-299a-7539-833d-72a039059430 on your instance and quote it. (Note that quoting is not supported in Mastodon.)