본문 바로가기

추천 검색어

실시간 인기 검색어

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

접근성의 개념부터 태그 의미 있게 사용하기, WAI-ARIA, 리액트 컴포넌트 만들기까지
김남경 , 곽규현 지음
제이펍

2025년 06월 10일 출간

국내도서 : 2025년 05월 08일 출간

(개의 리뷰)
( 0% 의 구매자)
eBook 상품 정보
파일 정보 PDF (31.88MB)   |  543 쪽
ISBN 9791194587385
지원기기 교보eBook App, PC e서재, 리더기, 웹뷰어
교보eBook App 듣기(TTS) 불가능
TTS 란?
텍스트를 음성으로 읽어주는 기술입니다.
  • 전자책의 편집 상태에 따라 본문의 흐름과 다르게 텍스트를​ 읽을 수 있습니다.
  • 이미지 형태로 제작된 전자책 (예 : ZIP 파일)은 TTS 기능을 지원하지 않습니다.

PDF 필기가능 (Android, iOS)
이벤트 소득공제
소장
정가 : 29,400원

판매가 26,460

10% 할인 | 5%P 적립

이 상품은 배송되지 않는 디지털 상품이며,
교보eBook앱이나 웹뷰어에서 바로 이용가능합니다.

카드&결제 혜택

  • 5만원 이상 구매 시 추가 2,000P
  • 3만원 이상 구매 시, 등급별 2~4% 추가 최대 416P
  • 리뷰 작성 시, e교환권 추가 최대 200원

작품소개

이 상품이 속한 분야

웹은 모든 사람에게 평등해야 한다
이 책은 웹 접근성을 고려한 개발이 단순한 규칙 준수를 넘어, 모든 사용자가 편리하게 웹을 이용할 수 있도록 돕는 강력한 방법임을 보여준다. 프런트엔드 개발자를 위해 웹 접근성 가이드라인, 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 컴포넌트 만들기

작가정보

저자(글) 김남경

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

저자(글) 곽규현

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

이 상품의 총서

Klover리뷰 (0)

Klover리뷰 안내
Klover(Kyobo-lover)는 교보를 애용해 주시는 고객님들이 남겨주신 평점과 감상을 바탕으로, 다양한 정보를 전달하는 교보문고의 리뷰 서비스입니다.
1. 리워드 안내
구매 후 90일 이내에 평점 작성 시 e교환권 100원을 적립해 드립니다.
  • - e교환권은 적립일로부터 180일 동안 사용 가능합니다.
  • - 리워드는 5,000원 이상 eBook, 오디오북, 동영상에 한해 다운로드 완료 후 리뷰 작성 시 익일 제공됩니다. (2024년 9월 30일부터 적용)
  • - 리워드는 한 상품에 최초 1회만 제공됩니다.
  • - sam 이용권 구매 상품 / 선물받은 eBook은 리워드 대상에서 제외됩니다.
2. 운영 원칙 안내
Klover리뷰를 통한 리뷰를 작성해 주셔서 감사합니다. 자유로운 의사 표현의 공간인 만큼 타인에 대한 배려를 부탁합니다. 일부 타인의 권리를 침해하거나 불편을 끼치는 것을 방지하기 위해 아래에 해당하는 Klover 리뷰는 별도의 통보 없이 삭제될 수 있습니다.
  • 도서나 타인에 대해 근거 없이 비방을 하거나 타인의 명예를 훼손할 수 있는 리뷰
  • 도서와 무관한 내용의 리뷰
  • 인신공격이나 욕설, 비속어, 혐오 발언이 개재된 리뷰
  • 의성어나 의태어 등 내용의 의미가 없는 리뷰

구매 후 리뷰 작성 시, e교환권 100원 적립

문장수집

문장수집 안내
문장수집은 고객님들이 직접 선정한 책의 좋은 문장을 보여 주는 교보문고의 새로운 서비스 입니다. 교보eBook 앱에서 도서 열람 후 문장 하이라이트 하시면 직접 타이핑 하실 필요 없이 보다 편하게 남길 수 있습니다. 마음을 두드린 문장들을 기록하고 좋은 글귀들은 ‘좋아요’ 하여 모아보세요. 도서 문장과 무관한 내용 등록 시 별도 통보없이 삭제될 수 있습니다.
리워드 안내
  • 구매 후 90일 이내에 문장 수집 등록 시 e교환권 100원을 적립해 드립니다.
  • e교환권은 적립일로부터 180일 동안 사용 가능합니다.
  • 리워드는 5,000원 이상 eBook에 한해 다운로드 완료 후 문장수집 등록 시 제공됩니다. (2024년 9월 30일부터 적용)
  • 리워드는 한 상품에 최초 1회만 제공됩니다.
  • sam 이용권 구매 상품 / 선물받은 eBook / 오디오북·동영상 상품/주문취소/환불 시 리워드 대상에서 제외됩니다.

구매 후 문장수집 작성 시, e교환권 100원 적립

    교보eBook 첫 방문을 환영 합니다!

    신규가입 혜택 지급이 완료 되었습니다.

    바로 사용 가능한 교보e캐시 1,000원 (유효기간 7일)
    지금 바로 교보eBook의 다양한 콘텐츠를 이용해 보세요!

    교보e캐시 1,000원
    TOP
    신간 알림 안내
    실무에 바로 적용하는 웹 접근성 가이드북 웹툰 신간 알림이 신청되었습니다.
    신간 알림 안내
    실무에 바로 적용하는 웹 접근성 가이드북 웹툰 신간 알림이 취소되었습니다.
    리뷰작성
    • 구매 후 90일 이내 작성 시, e교환권 100원 (최초1회)
    • 리워드 제외 상품 : 마이 > 라이브러리 > Klover리뷰 > 리워드 안내 참고
    • 콘텐츠 다운로드 또는 바로보기 완료 후 리뷰 작성 시 익일 제공
    감성 태그

    가장 와 닿는 하나의 키워드를 선택해주세요.

    사진 첨부(선택) 0 / 5

    총 5MB 이하로 jpg,jpeg,png 파일만 업로드 가능합니다.

    신고/차단

    신고 사유를 선택해주세요.
    신고 내용은 이용약관 및 정책에 의해 처리됩니다.

    허위 신고일 경우, 신고자의 서비스 활동이 제한될 수
    있으니 유의하시어 신중하게 신고해주세요.


    이 글을 작성한 작성자의 모든 글은 블라인드 처리 됩니다.

    문장수집 작성

    구매 후 90일 이내 작성 시, e교환권 100원 적립

    eBook 문장수집은 웹에서 직접 타이핑 가능하나, 모바일 앱에서 도서를 열람하여 문장을 드래그하시면 직접 타이핑 하실 필요 없이 보다 편하게 남길 수 있습니다.

    P.
    실무에 바로 적용하는 웹 접근성 가이드북
    접근성의 개념부터 태그 의미 있게 사용하기, WAI-ARIA, 리액트 컴포넌트 만들기까지
    저자 모두보기
    낭독자 모두보기
    sam 이용권 선택
    님이 보유하신 이용권입니다.
    차감하실 sam이용권을 선택하세요.
    sam 이용권 선택
    님이 보유하신 이용권입니다.
    차감하실 sam이용권을 선택하세요.
    sam 이용권 선택
    님이 보유하신 프리미엄 이용권입니다.
    선물하실 sam이용권을 선택하세요.
    결제완료
    e캐시 원 결제 계속 하시겠습니까?
    교보 e캐시 간편 결제
    sam 열람권 선물하기
    • 보유 권수 / 선물할 권수
      0권 / 1
    • 받는사람 이름
      받는사람 휴대전화
    • 구매한 이용권의 대한 잔여권수를 선물할 수 있습니다.
    • 열람권은 1인당 1권씩 선물 가능합니다.
    • 선물한 열람권이 ‘미등록’ 상태일 경우에만 ‘열람권 선물내역’화면에서 선물취소 가능합니다.
    • 선물한 열람권의 등록유효기간은 14일 입니다.
      (상대방이 기한내에 등록하지 않을 경우 소멸됩니다.)
    • 무제한 이용권일 경우 열람권 선물이 불가합니다.
    이 상품의 총서 전체보기
    네이버 책을 통해서 교보eBook 첫 구매 시
    교보e캐시 지급해 드립니다.
    교보e캐시 1,000원
    • 첫 구매 후 3일 이내 다운로드 시 익일 자동 지급
    • 한 ID당 최초 1회 지급 / sam 이용권 제외
    • 네이버 책을 통해 교보eBook 구매 이력이 없는 회원 대상
    • 교보e캐시 1,000원 지급 (유효기간 지급일로부터 7일)
    구글바이액션을 통해서 교보eBook
    첫 구매 시 교보e캐시 지급해 드립니다.
    교보e캐시 1,000원
    • 첫 구매 후 3일 이내 다운로드 시 익일 자동 지급
    • 한 ID당 최초 1회 지급 / sam 이용권 제외
    • 구글바이액션을 통해 교보eBook 구매 이력이 없는 회원 대상
    • 교보e캐시 1,000원 지급 (유효기간 지급일로부터 7일)