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

 

웹은 모든 사람에게 평등해야 한다

 

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

 

 

도서구매 사이트(가나다순)

[교보문고]  [도서11번가]  [알라딘]  [예스이십사]  [인터파크]  [쿠팡]

 

출판사 제이펍
저작권사 제이펍
원서명 (없음)
도서명 실무에 바로 적용하는 웹 접근성 가이드북
부제 접근성의 개념부터 태그 의미 있게 사용하기, WAI-ARIA, 리액트 컴포넌트 만들기까지
지은이 김남경, 곽규현
옮긴이 (없음)
감수자 (없음)
시리즈 (없음)
출판일 2025. 05. 08
페이지 540쪽
판 형 46배판변형(188*245*22.1)
제 본 무선(soft cover)
정 가 42,000원
ISBN 979-11-94587-06-4 (93000)
키워드 장애, 스크린리더, HTML, ARIA, 접근성지침, 웹사이트, UI컴포넌트, 프런트엔드, CSS, 자바스크립트
분 야 웹 / 접근성

 

관련 시리즈

■ (없음)

 

관련 포스트

■ 2025.04.22 - [출간 전 책 소식] - 웹 접근성… 그거 꼭 해야 해요?

 

관련 도서

■ 나의 첫 HTML & CSS 웹 디자인

■ 대규모 리액트 웹 앱 개발

 

관련 파일 다운로드

■ https://bit.ly/acc_book

 

강의 보조 자료(교재로 채택하신 분들은 https://jpub.tistory.com/notice/1076을 통해 다음 자료를 요청하실 수 있습니다.)
■ 본문의 그림과 표

 

미리보기(앞부속, 본문 일부)

 

정오표 페이지
■ (등록되는 대로 링크를 걸겠습니다.)

 

도서구매 사이트(가나다순)

[교보문고]  [도서11번가]  [알라딘]  [예스이십사]  [인터파크]  [쿠팡]

 

도서 소개

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

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

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

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

 

주요 내용

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

 

지은이 소개

김남경(이비)

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

 

곽규현(빌리)

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

 

차례

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

 

제이펍 소식 더 보기(제이펍의 소통 채널에서 더욱 다양한 소식을 확인하세요!)

블로그  유튜브  인스타그램  트위터  페이스북