실무에 바로 적용하는 웹 접근성 가이드북

옮긴이 머리말 viii
추천의 글 x
베타리더 후기 xii
이 책에 대하여 xiv

CHAPTER 1 쉽게 이해하는 접근성 1
1.1 개념으로 이해하는 접근성 2
__1.1.1 접근성의 이해 2
__1.1.2 웹 접근성이란 3
1.2 장애 환경으로 이해하는 웹 접근성 4
__1.2.1 장애를 경험하는 사용자 이해하기 7
__1.2.2 모두가 경험할 수 있는 장애 환경 15
1.3 웹 접근성, 준수하면 어떤 이점이 있을까? 21
__1.3.1 공적 측면 22
__1.3.2 비즈니스 측면 25
__1.3.3 개발 측면 26

CHAPTER 2 웹 접근성의 기초 29
2.1 스크린 리더란? 30
__2.1.1 스크린 리더 사용자 대상 설문 31
__2.1.2 장애 유형 31
__2.1.3 주요 스크린 리더(데스크톱/노트북) 32
__2.1.4 운영체제(데스크톱/노트북) 33
__2.1.5 브라우저(데스크톱/노트북) 34
__2.1.6 모바일 스크린 리더 사용량 35
__2.1.7 주요 스크린 리더(모바일) 37
__2.1.8 브라우저(모바일) 39
__2.1.9 스크린 리더를 통한 정보 탐색 39
__2.1.10 랜드마크 탐색 41
2.2 접근성 트리 41
2.3 브라우저 개발자 도구로 접근성 트리 확인하기 42
2.4 접근성 트리 자세히 살펴보기 44
__2.4.1 역할 47
__2.4.2 이름 49
__2.4.3 설명 54

CHAPTER 3 HTML 태그, 의미 있게 사용하기 55
3.1 태그를 의미 있게 사용해야 하는 이유 55
__3.1.1 의미 있는 태그를 사용했을 때의 장점 55
__3.1.2 제목 57
__3.1.3 레이아웃 58
__3.1.4 텍스트 68
__3.1.5 목록 76
__3.1.6 양식 82
__3.1.7 표 108
__3.1.8 대화형 요소 120

CHAPTER 4 웹 콘텐츠 접근성 지침 126
4.1 WCAG 126
__4.1.1 원칙 127
__4.1.2 지침 127
__4.1.3 성공 기준 127
4.2 KWCAG 128
__4.2.1 인식의 용이성 128
__4.2.2 운용의 용이성 160
__4.2.3 이해의 용이성 202
__4.2.4 견고성 222

CHAPTER 5 WAI-ARIA 228
5.1 역할 230
5.2 상태 및 속성 232
5.3 자주 사용되는 ARIA 역할 235
__5.3.1 alert 235
__5.3.2 alertdialog 236
__5.3.3 dialog 239
__5.3.4 button 241
__5.3.5 link 242
__5.3.6 group 244
__5.3.7 heading 244
__5.3.8 img 245
__5.3.9 combobox 246
__5.3.10 listbox 250
__5.3.11 option 253
__5.3.12 menu 254
__5.3.13 menubar 258
__5.3.14 menuitem 263
__5.3.15 menuitemcheckbox 263
__5.3.16 menuitemradio 265
__5.3.17 presentation 266
__5.3.18 region 267
__5.3.19 slider 268
__5.3.20 spinbutton 271
__5.3.21 switch 274
__5.3.22 tab 276
__5.3.23 tablist 278
__5.3.24 tabpanel 279
5.4 자주 사용하는 ARIA 상태 및 속성 282
__5.4.1 aria-activedescendant 282
__5.4.2 aria-atomic 283
__5.4.3 aria-autocomplete 284
__5.4.4 aria-checked 286
__5.4.5 aria-controls 288
__5.4.6 aria-current 289
__5.4.7 aria-describedby 293
__5.4.8 aria-disabled 294
__5.4.9 aria-expanded 295
__5.4.10 aria-haspopup 297
__5.4.11 aria-hidden 298
__5.4.12 aria-label 300
__5.4.13 aria-labelledby 302
__5.4.14 aria-level 303
__5.4.15 aria-live 304
__5.4.16 aria-modal 305
__5.4.17 aria-multiselectable 306
__5.4.18 aria-orientation 307
__5.4.19 aria-pressed 308
__5.4.20 aria-readonly 309
__5.4.21 aria-required 310
__5.4.22 aria-selected 311
__5.4.23 aria-valuemax 311
__5.4.24 aria-valuemin 312
__5.4.25 aria-valuenow 312
__5.4.26 aria-valuetext 313

CHAPTER 6 웹 접근성을 준수한 React 컴포넌트 만들기 part 1 315
6.1 Accordion 317
__6.1.1 Accordion이란? 318
__6.1.2 구성 요소 318
__6.1.3 접근성 대응 319
6.2 Loader 328
__6.2.1 Loader란? 328
__6.2.2 접근성 대응 329
6.3 Notification 335
__6.3.1 Notification 종류 336
6.4 Tab 346
__6.4.1 Tab이란? 347
__6.4.2 구성 요소 347
__6.4.3 접근성 대응 348
6.5 Toggle 359
__6.5.1 Toggle이란? 359
__6.5.2 접근성 대응 362

CHAPTER 7 웹 접근성을 준수한 React 컴포넌트 만들기 part 2 370
7.1 Carousel 370
__7.1.1 Carousel이란? 371
__7.1.2 구성 요소 371
__7.1.3 접근성 대응 371
7.2 Dialog(Modal) 409
__7.2.1 Dialog란? 409
__7.2.2 접근성 대응 411
7.3 MenuBar 422
__7.3.1 MenuBar란? 422
__7.3.2 구성 요소 423
__7.3.3 접근성 대응 423
7.4 SelectMenu 454
__7.4.1 SelectMenu란? 455
__7.4.2 구성 요소 455
__7.4.3 접근성 대응 456
7.5 Slider 470
__7.5.1 Slider란? 470
__7.5.2 구성 요소 470
__7.5.3 접근성 대응 471
7.6 SpinButton 485
__7.6.1 SpinButton이란? 486
__7.6.2 구성 요소 486
__7.6.3 접근성 대응 487

CHAPTER 8 놓치기 쉬운 사례들로 알아보는 접근성 502
8.1 놓치기 쉬운 접근성 사례 502
__8.1.1 눌리면 다 똑같은 거 아니야? ?? 502
__8.1.2 뭐가 틀린 거지? ?? ?? 505
__8.1.3 목록인데 목록이 아니야? ?? 507
__8.1.4 안 보인다고 다 안 보이는 게 아니야! ?? 510
__8.1.5 내가 생각한 이모티콘은 이게 아닌데.. ?? 511
__8.1.6 내가 만든 페이지는 검색 화면에 어떻게 노출될까? 513
8.2 유용한 사이트 소개 514
__8.2.1 웹 표준 514
__8.2.2 접근성 지침 및 체크리스트 515
__8.2.3 접근성 가이드 516

마치며 517
찾아보기 519

시력이 저하되거나 색맹이 있는 사용자를 고려해 웹에서 제공하는 정보의 텍스트 크기를 크게 조정하고, 텍스트와 배경의 명도 차이를 설정하여 정보를 뚜렷하게 인식할 수 있도록 돕습니다. 이는 시력이 저하되거나 색상 구분이 어려운 사용자뿐만 아니라, 모든 사용자에게 정보를 더 쉽고 편리하게 이해할 수 있는 환경을 제공합니다. 상지장애(절단, 관절, 마비)가 있는 사용자를 위한 음성 입력 기능은 무거운 짐을 들거나 운전을 하고 있어 일시적으로 손을 사용하기 힘든 사용자에게도 도움이 됩니다.

<br> 태그는 ‘줄바꿈’을 뜻하는 Line Break의 약자로 텍스트를 줄바꿈할 때 사용합니다. 스크린 리더를 통해 웹페이지를 탐색 중에 <br> 태그를 만나면 음성이 중단되고 다음 탐색을 위해 사용자가 수동으로 조작을 해야 합니다. 또한 스크린 리더 종류에 따라 <br> 태그를 ‘줄바꿈’ 또는 ‘비어 있음’으로 안내하는 경우도 있기 때문에 단순히 스타일적인 간격을 주기 위한 용도로 사용해서는 안 됩니다. 요소 간 간격이나 텍스트 간 줄간격을 조정하고 싶을 때는 CSS를 사용해야 합니다.