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

접근성의 개념부터 태그 의미 있게 사용하기, WAI-ARIA, 리액트 컴포넌트 만들기까지

김남경 , 곽규현 지음

제이펍 2025년 06월 10일 출간 국내도서 : 2025년 05월 08일 출간

작품소개

책소개

웹은 모든 사람에게 평등해야 한다
이 책은 웹 접근성을 고려한 개발이 단순한 규칙 준수를 넘어, 모든 사용자가 편리하게 웹을 이용할 수 있도록 돕는 강력한 방법임을 보여준다. 프런트엔드 개발자를 위해 웹 접근성 가이드라인, ARIA 활용법, 리액트 실습 예제를 체계적으로 정리했으며, API 문서처럼 활용할 수 있는 참고 자료까지 포함해 실무에서 곧바로 적용할 수 있도록 구성했다. 웹 접근성을 처음 배우는 입문자뿐만 아니라, 이미 경험이 있는 개발자에게도 더 나은 사용자 경험을 제공하는 방법과 실무 적용 노하우를 제시한다. 웹 접근성을 고려한 개발이 곧 더 효율적인 개발임을 이 책을 통해 직접 경험해보자.

목차

옮긴이 머리말 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 컴포넌트 만들기

작가정보

저자(글) 김남경

만드는 것을 좋아하고 공유를 즐기는 개발자, 이비. 상상하는 것을 눈에 보이게 만들어 다른 사람들과 나눌 수 있다는 점에 매력을 느껴 프런트엔드 개발자의 길을 걷기 시작했다. 디자인 에이전시부터 생활금융 플랫폼까지 다양한 환경에서 개발하면서 사용자 경험에 대해 고민해왔으며, 그 과정에서 얻은 배움을 더 많은 사람들과 공유하고자 한다.

저자(글) 곽규현

다각도로 고민하며 성장하는 개발자, 빌리. 프런트엔드 개발자로서 국내 주요 라이브 커머스 및 생활금융 플랫폼 서비스를 개발하며 다양한 관점에서 사용자 경험을 고민하게 되었다. 이 책을 통해 개발자는 물론, 다양한 직군의 사람들이 웹 접근성에 관심을 가짐으로써 모두에게 편리한 서비스가 제공되기를 바란다.