추천의 글
베타리더 후기
시작하며
이 책에 대하여

CHAPTER 1 쉽게 이해하는 접근성

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

CHAPTER 2 웹 접근성의 기초

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

CHAPTER 3 HTML 태그, 의미 있게 사용하기

3.1 태그를 의미 있게 사용해야 하는 이유
__3.1.1 의미 있는 태그를 사용했을 때의 장점
__3.1.2 제목
__3.1.3 레이아웃
__3.1.4 텍스트
__3.1.5 목록
__3.1.6 양식
__3.1.7 표
__3.1.8 대화형 요소
CHAPTER 4 웹 콘텐츠 접근성 지침

4.1 WCAG
__4.1.1 원칙
__4.1.2 지침
__4.1.3 성공 기준
4.2 KWCAG
__4.2.1 인식의 용이성
__4.2.2 운용의 용이성
__4.2.3 이해의 용이성
__4.2.4 견고성

CHAPTER 5 WAI-ARIA

5.1 역할
5.2 상태 및 속성
5.3 자주 사용되는 ARIA 역할
__5.3.1 alert
__5.3.2 alertdialog
__5.3.3 dialog
__5.3.4 button
__5.3.5 link
__5.3.6 group
__5.3.7 heading
__5.3.8 img
__5.3.9 combobox
__5.3.10 listbox
__5.3.11 option
__5.3.12 menu
__5.3.13 menubar
__5.3.14 menuitem
__5.3.15 menuitemcheckbox
__5.3.16 menuitemradio
__5.3.17 presentation
__5.3.18 region
__5.3.19 slider
__5.3.20 spinbutton
__5.3.21 switch
__5.3.22 tab
__5.3.23 tablist
__5.3.24 tabpanel
5.4 자주 사용하는 ARIA 상태 및 속성
__5.4.1 aria-activedescendant
__5.4.2 aria-atomic
__5.4.3 aria-autocomplete
__5.4.4 aria-checked
__5.4.5 aria-controls
__5.4.6 aria-current
__5.4.7 aria-describedby
__5.4.8 aria-disabled
__5.4.9 aria-expanded
__5.4.10 aria-haspopup
__5.4.11 aria-hidden
__5.4.12 aria-label
__5.4.13 aria-labelledby
__5.4.14 aria-level
__5.4.15 aria-live
__5.4.16 aria-modal
__5.4.17 aria-multiselectable
__5.4.18 aria-orientation
__5.4.19 aria-pressed
__5.4.20 aria-readonly
__5.4.21 aria-required
__5.4.22 aria-selected
__5.4.23 aria-valuemax
__5.4.24 aria-valuemin
__5.4.25 aria-valuenow
__5.4.26 aria-valuetext

CHAPTER 6 웹 접근성을 준수한 React 컴포넌트 만들기 part 1

6.1 Accordion
__6.1.1 Accordion이란?
__6.1.2 구성 요소
__6.1.3 접근성 대응
6.2 Loader
__6.2.1 Loader란?
__6.2.2 접근성 대응
6.3 Notification
__6.3.1 Notification 종류
6.4 Tab
__6.4.1 Tab이란?
__6.4.2 구성 요소
__6.4.3 접근성 대응
6.5 Toggle
__6.5.1 Toggle이란?
__6.5.2 접근성 대응

CHAPTER 7 웹 접근성을 준수한 React 컴포넌트 만들기 part 2

7.1 Carousel
__7.1.1 Carousel이란?
__7.1.2 구성 요소
__7.1.3 접근성 대응
7.2 Dialog(Modal)
__7.2.1 Dialog란?
__7.2.2 접근성 대응
7.3 MenuBar
__7.3.1 MenuBar란?
__7.3.2 구성 요소
__7.3.3 접근성 대응
7.4 SelectMenu
__7.4.1 SelectMenu란?
__7.4.2 구성 요소
__7.4.3 접근성 대응
7.5 Slider
__7.5.1 Slider란?
__7.5.2 구성 요소
__7.5.3 접근성 대응
7.6 SpinButton
__7.6.1 SpinButton이란?
__7.6.2 구성 요소
__7.6.3 접근성 대응

CHAPTER 8 놓치기 쉬운 사례들로 알아보는 접근성

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

마치며
찾아보기

모두를 위한 웹, 모두가 누릴 수 있는 서비스를 만드는 웹 접근성 실전 가이드

웹은 누구에게나 열려 있어야 한다. 하지만 웹에서 소외되는 사용자가 여전히 많다. 웹 접근성은 단순히 ‘장애인을 위한 기술’이 아니라, 모두를 위한 더 나은 사용자 경험을 위한 필수 요소로 웹 개발자가 반드시 고려해야 할 기본 원칙이 되고 있다.

이 책은 웹 접근성의 개념부터 실제 적용 방법까지 체계적으로 학습할 수 있도록 구성되어 있다. 시맨틱 태그, ARIA 역할과 속성, WCAG와 KWCAG 등 접근성 표준과 지침을 실무에 어떻게 반영해야 하는지 React 기반 예제 코드를 통해 구체적으로 설명한다. 특히, 다양한 사용자 환경과 스크린 리더 같은 보조기술에 대한 이해를 바탕으로, 개발자가 웹 접근성을 ‘왜’ 그리고 ‘어떻게’ 실현해야 하는지를 균형 있게 다룬다.

프런트엔드 개발자는 물론, 웹 서비스 개발에 관여하는 모든 직군에게 유용한 웹 접근성 가이드가 될 것이다. 이 책을 통해 모두를 위한 웹, 모두가 이용할 수 있는 서비스를 만드는 첫걸음을 내디뎌보자!

주요 내용

● 웹 접근성 이해하기
● HTML 태그 의미 있게 사용하기
● 웹 콘텐츠 접근성 지침
● 자주 사용하는 ARIA 상태 및 속성
● 웹 접근성을 준수한 React 컴포넌트 만들기