2025년 05월 08일 출간 | ISBN : 1194587062 | 540쪽

옮긴이 머리말 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

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

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

광과민성 장애를 경험하는 사용자도 웹 콘텐츠에 접근이 가능해집니다. 광과민성 장애를 경험하는 사용자는 순간적으로 번쩍거리는 빛에 민감하게 반응하여 발작을 일으킬 수 있습니다. 깜빡이거나 번쩍이는 모든 콘텐츠가 위험한 것은 아니며, 명도 대비나 특히 빨간색과 파란색 계열 등 채도 대비가 큰 화면이 연속적으로 오랜 시간 동안 초당 3~50회 주기로 깜빡이거나 번쩍이는 경우 문제가 됩니다. 초당 2회 이하로 깜빡이는 콘텐츠는 문제를 일으키지 않습니다. (178쪽)

Slider를 구현하기에 앞서 특정 기능이나 동작, 지원 브라우저를 고려하여 태그를 사용할지, 아니면 Slider의 모든 기능과 스타일을 직접 구현할지 결정해야 합니다. 태그는 기본 기능이 내장된 HTML 요소로 Slider의 기본 스타일과 함께 마우스, 터치, 키보드 이벤트를 자동으로 처리하여 개발자가 Slider 구현에 소요되는 시간과 노력을 줄일 수 있다는 장점이 있습니다. 하지만 태그는 각 브라우저에서 서로 다른 스타일과 동작 차이가 있어 크로스 브라우징 이슈가 발생할 수 있습니다. 이는 개발자가 Slider에 원하는 스타일을 적용하는 데 어려움이 있을 수 있다는 것을 뜻합니다. 따라서 프로젝트의 요구사항과 개발 목표에 따라 어떤 방식을 선택할지 신중하게 고려해야 합니다. (471쪽)

오류 메시지를 어떤 식으로 표시해야 할까요? / 우선 브라우저가 기본적으로 제공하는 오류 메시지는 어떤 형태로 표시되는지 살펴봅시다. 예를 들어 required 속성이 추가된 태그를 빈 값으로 제출하면 어떻게 될까요? 오류가 발생한 입력 필드로 초점이 이동하면서 어떤 오류가 발생했는지 메시지가 제공됩니다. 이러한 오류 메시지는 스크린 리더를 통해서도 안내받을 수 있습니다. 따라서 우리가 직접 만드는 오류 메시지도 이와 동일한 형태로 제공하면 됩니다. (505쪽)

모두를 위한 웹, 모두가 누릴 수 있는 서비스를 만드는 웹 접근성 실전 가이드웹은 누구에게나 열려 있어야 한다. 하지만 웹에서 소외되는 사용자가 여전히 많다. 웹 접근성은 단순히 ‘장애인을 위한 기술’이 아니라, 모두를 위한 더 나은 사용자 경험을 위한 필수 요소로 웹 개발자가 반드시 고려해야 할 기본 원칙이 되고 있다. 이 책은 웹 접근성의 개념부터 실제 적용 방법까지 체계적으로 학습할 수 있도록 구성되어 있다. 시맨틱 태그, ARIA 역할과 속성, WCAG와 KWCAG 등 접근성 표준과 지침을 실무에 어떻게 반영해야 하는지 React 기반 예제 코드를 통해 구체적으로 설명한다. 특히, 다양한 사용자 환경과 스크린 리더 같은 보조기술에 대한 이해를 바탕으로, 개발자가 웹 접근성을 ‘왜’ 그리고 ‘어떻게’ 실현해야 하는지를 균형 있게 다룬다. 프런트엔드 개발자는 물론, 웹 서비스 개발에 관여하는 모든 직군에게 유용한 웹 접근성 가이드가 될 것이다. 이 책을 통해 모두를 위한 웹, 모두가 이용할 수 있는 서비스를 만드는 첫걸음을 내디뎌보자! 주요 내용 - 웹 접근성 이해하기 - HTML 태그 의미 있게 사용하기 - 웹 콘텐츠 접근성 지침 - 자주 사용하는 ARIA 상태 및 속성 - 웹 접근성을 준수한 React 컴포넌트 만들기