- 주문상품수량
- 개
- 예상적립금
P - 상품할인금
- 원
- 배송료
- 원
- 주문합계
- 원
네비게이션 실시간 인기 책
베스트
실무에 바로 적용하는 웹 접근성 가이드북 접근성의 개념부터 태그 의미 있게 사용하기, WAI-ARIA, 리액트 컴포넌트 만들기까지
- 김남경, 곽규현 저
- 제이펍
- 2025년 05월 01일
-
정가42,000원
-
판매가37,800원 [10% 할인]
-
결제 혜택무이자
카드할인/포인트결제 안내
제휴카드
반디앤루니스 롯데카드 결제금액 최대 25% 청구할인 (1만원 이상 결제건에 한해 월 2회, 건당 최대 1만원 할인) 반디앤루니스 우리V카드 결제금액 10% 청구할인 포인트결제
OK캐쉬백 포인트 최소 10원부터 전액 사용 or 1% 적립 현대카드 M포인트 결제금액의 최대 10% 사용 가능 신한카드 포인트 결제금액의 최대 10% 사용 가능(일부카드) 하나(구.외환) 포인트 보유 한도 내에서 100% 사용 가능 씨티카드 포인트 결제금액의 최대 50% 사용 가능 할인카드
NH농협 TAKE5카드 20% 청구할인(Edu Pack) 채움 플래티늄 멀티카드 20% 청구할인 모바일 Tmoney 신한카드 10% 청구할인 신한카드 Shopping 10% 청구할인 NH농협 체크카드 10% 청구할인 NH20 해봄 신용카드 10% 청구할인 씨티 클리어 카드 7% 청구할인 NH20 해봄 체크카드 5% 청구할인 NH농협 LADY다솜카드 5% 청구할인 신한카드 큐브 5% 청구할인 신한카드 큐브 PLATINUM# 5% 청구할인 
무이자 안내
-
적립금2,100원 적립 [5%P]
추가 적립금 안내
[2천원 추가 적립]
총 주문금액 5만원 이상 구매 시 2,000원 추가 적립
도서(eBook포함)만 구매 시 적립 대상에서 제외업채배송상품 포함(기프트, 업체배송 등) 5만원[멤버십 추가 적립]
슈퍼루니 : 3% 추가 적립
골드루니 : 2% 추가 적립
실버루니 : 1% 추가 적립
단, 국내도서, eBook만 구매 시 적립 불가
-
배송료무료배송
-
출고예정일
출고예정일 안내
※ 출고예정일은 도서 재고상황에 따라 변동될 수 있습니다.
2025년 07월 04일(금)※ 출고예정일은 도서 재고상황에 따라 변동될 수 있습니다.
당일배송 가능지역 검색
“도로명주소”를 쉽게 찾아보세요
1. 도로명으로 검색하기 (예, “직지길” or “직지길+322”)
2. 건물명으로 검색하기 (예, “반디앤루니스빌딩”)
3. 동(읍/면/리) 으로 검색 (예, “인사동” or “인사동+43”)
4. 도로명주소를 모르실 경우 도로명주소 안내시스템(http://www.juso.go.kr)에서 확인해주세요.
시/도
시/군/구
회원리뷰
ISBN: 9791194587064
540쪽
1,026g
188 x 245 (㎜)
지금 이책은
- 판매지수 : 0
이 분야의 베스트셀러
-
이것이 취업을 위한 코딩 테스트다 with 파이썬
나동빈
30,600원
-
지니어스키트로 배우는 마이크로비트
아이씨뱅큐
18,000원
-
Do it! 점프 투 파이썬 [개정판]
박응용
16,920원
이 책이 속한 분야
- 컴퓨터/IT > 프로그래밍 > 기타 프로그래밍 언어
- 컴퓨터/IT > 홈페이지/웹디자인
책 소개
이 책은
웹은 모든 사람에게 평등해야 한다. 이 책은 웹 접근성을 고려한 개발이 단순한 규칙 준수를 넘어, 모든 사용자가 편리하게 웹을 이용할 수 있도록 돕는 강력한 방법임을 보여준다. 프런트엔드 개발자를 위해 웹 접근성 가이드라인, ARIA 활용법, 리액트 실습 예제를 체계적으로 정리했으며, API 문서처럼 활용할 수 있는 참고 자료까지 포함해 실무에서 곧바로 적용할 수 있도록 구성했다.
웹 접근성을 처음 배우는 입문자뿐만 아니라, 이미 경험이 있는 개발자에게도 더 나은 사용자 경험을 제공하는 방법과 실무 적용 노하우를 제시한다. 웹 접근성을 고려한 개발이 곧 더 효율적인 개발임을 이 책을 통해 직접 경험해보자.
출판사 리뷰
모두를 위한 웹, 모두가 누릴 수 있는 서비스를 만드는 웹 접근성 실전 가이드
웹은 누구에게나 열려 있어야 한다. 하지만 웹에서 소외되는 사용자가 여전히 많다. 웹 접근성은 단순히 ‘장애인을 위한 기술’이 아니라, 모두를 위한 더 나은 사용자 경험을 위한 필수 요소로 웹 개발자가 반드시 고려해야 할 기본 원칙이 되고 있다.
이 책은 웹 접근성의 개념부터 실제 적용 방법까지 체계적으로 학습할 수 있도록 구성되어 있다. 시맨틱 태그, 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
추천의 글 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
배송 시 유의사항
- 반디앤루니스에서 구매하신 도서는 물류 대행 위탁업체 웅진 북센을 통해 배송됩니다.
(배송 포장에 "웅진 북센"으로 표기될 수 있습니다.)
- 구매한 상품의 품질과 배송 관련 문의는 반디앤루니스로 문의 바랍니다.
- 천재지변 및 택배사의 사정에 따라 배송이 지연될 수 있습니다.
- 결제(입금) 완료 후 출판사 및 유통사의 사정으로 품절 또는 절판 되어 상품 구입이 어려울 수 있습니다. (별도 안내 예정)
- 도서산간지역의 경우 추가 배송비가 발생될 수 있습니다.
반품/교환
상품 설명에 반품/ 교환 관련한 안내가 있는 경우 그 내용을 우선으로 합니다. (업체 사정에 따라 달라질 수 있습니다)
반품/교환
-
반품/교환 반품/교환 방법 홈 > 고객센터 > 자주찾는질문 “반품/교환/환불” 안내 참고 또는 1:1상담게시판 반품/교환 가능 기간 반품,교환은 배송완료 후 7일 이내, 상품의 결함 및 계약내용과 다를 경우 문제발견 후 30일 이내에 신청가능 반품/교환 비용 변심 혹은 구매착오의 경우에만 반송료 고객 부담(별도 지정 택배사 없음) 반품/교환 불가 사유 - 소비자의 책임 사유로 상품 등이 손실 또는 훼손된 경우
- 소비자의 사용, 포장 개봉에 의해 상품 등의 가치가 현저히 감소한 경우
- 복제가 가능한 상품 등의 포장을 훼손한 경우 : 예)만화책, 잡지, 화보집 등
- 시간의 경과에 의해 재판매가 곤란한 정도로 가치가 현저히 감소한 경우
- 전자상거래등에서의 소비자보호에 관한 법률이 정하는 소비자 청약철회 제한 내용에 해당되는 경우
- 해외주문 상품(해외 원서)의 경우(파본/훼손/오발송 상품을 제외)
소비자 피해보상
환불지연에 따른 배상- 상품의 불량에 의한 반품, 교환, A/S, 환불, 품질보증 및 피해보상 등에 관한 사항은
소비자 분쟁해결 기준(공정거래위원회고시)에 준하여 처리됨 - 대금 환불 및 환불지연에 따른 배상금 지급 조건, 절차 등은 전자상거래 등에서의
소비자 보호에 관한 법률에 따라 처리함
반품/교환 주소 경기도 파주시 문발로 77, 웅진북센(반디앤루니스)
