Coming soon
실무에 바로 적용하는 웹 접근성 가이드북
접근성의 개념부터 태그 의미 있게 사용하기, WAI-ARIA, 리액트 컴포넌트 만들기까지
$45.36
SKU
9791194587064
COMING SOON [판매 예정] 상품입니다.
[판매 예정] 상품은 출간일(Publication Date) 이후 주문이 가능합니다.
▷출간일 이후에도 아직 [판매 예정]으로 보이는 경우 info@kbookstore.com 으로 문의주세요.
주문 가능 여부를 확인 후 안내해 드리겠습니다.
COMING SOON [판매 예정] 상품입니다.
[판매 예정] 상품은 출간일(Publication Date) 이후 주문이 가능합니다.
* 출간일 이후에도 아직 [판매 예정]으로 보이는 경우 info@kbookstore.com 으로 문의주세요.
[Free shipping over $100]
Standard Shipping estimated by Fri 05/2 - Thu 05/8 (주문일로부 10-14 영업일)
Express Shipping estimated by Tue 04/29 - Thu 05/1 (주문일로부 7-9 영업일)
* 안내되는 배송 완료 예상일은 유통사/배송사의 상황에 따라 예고 없이 변동될 수 있습니다.
| Publication Date | 2025/05/08 |
| Pages/Weight/Size | 188*245*22mm |
| ISBN | 9791194587064 |
| Categories | IT 모바일 > 웹사이트 |
Description
웹은 모든 사람에게 평등해야 한다
이 책은 웹 접근성을 고려한 개발이 단순한 규칙 준수를 넘어, 모든 사용자가 편리하게 웹을 이용할 수 있도록 돕는 강력한 방법임을 보여준다. 프런트엔드 개발자를 위해 웹 접근성 가이드라인, ARIA 활용법, 리액트 실습 예제를 체계적으로 정리했으며, API 문서처럼 활용할 수 있는 참고 자료까지 포함해 실무에서 곧바로 적용할 수 있도록 구성했다. 웹 접근성을 처음 배우는 입문자뿐만 아니라, 이미 경험이 있는 개발자에게도 더 나은 사용자 경험을 제공하는 방법과 실무 적용 노하우를 제시한다. 웹 접근성을 고려한 개발이 곧 더 효율적인 개발임을 이 책을 통해 직접 경험해보자.
이 책은 웹 접근성을 고려한 개발이 단순한 규칙 준수를 넘어, 모든 사용자가 편리하게 웹을 이용할 수 있도록 돕는 강력한 방법임을 보여준다. 프런트엔드 개발자를 위해 웹 접근성 가이드라인, ARIA 활용법, 리액트 실습 예제를 체계적으로 정리했으며, API 문서처럼 활용할 수 있는 참고 자료까지 포함해 실무에서 곧바로 적용할 수 있도록 구성했다. 웹 접근성을 처음 배우는 입문자뿐만 아니라, 이미 경험이 있는 개발자에게도 더 나은 사용자 경험을 제공하는 방법과 실무 적용 노하우를 제시한다. 웹 접근성을 고려한 개발이 곧 더 효율적인 개발임을 이 책을 통해 직접 경험해보자.
Contents
옮긴이 머리말 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
추천의 글 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