실무에 바로 적용하는 웹 접근성 가이드북 (접근성의 개념부터 태그 의미 있게 사용하기, WAI-ARIA, 리액트 컴포넌트 만들기까지 | 반양장)

김남경,곽규현

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

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

옮긴이머리말viii
추천의글x
베타리더후기xii
이책에대하여xiv

CHAPTER1쉽게이해하는접근성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

CHAPTER2웹접근성의기초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

CHAPTER3HTML태그,의미있게사용하기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

CHAPTER4웹콘텐츠접근성지침126
4.1WCAG126
__4.1.1원칙127
__4.1.2지침127
__4.1.3성공기준127
4.2KWCAG128
__4.2.1인식의용이성128
__4.2.2운용의용이성160
__4.2.3이해의용이성202
__4.2.4견고성222

CHAPTER5WAI-ARIA228
5.1역할230
5.2상태및속성232
5.3자주사용되는ARIA역할235
__5.3.1alert235
__5.3.2alertdialog236
__5.3.3dialog239
__5.3.4button241
__5.3.5link242
__5.3.6group244
__5.3.7heading244
__5.3.8img245
__5.3.9combobox246
__5.3.10listbox250
__5.3.11option253
__5.3.12menu254
__5.3.13menubar258
__5.3.14menuitem263
__5.3.15menuitemcheckbox263
__5.3.16menuitemradio265
__5.3.17presentation266
__5.3.18region267
__5.3.19slider268
__5.3.20spinbutton271
__5.3.21switch274
__5.3.22tab276
__5.3.23tablist278
__5.3.24tabpanel279
5.4자주사용하는ARIA상태및속성282
__5.4.1aria-activedescendant282
__5.4.2aria-atomic283
__5.4.3aria-autocomplete284
__5.4.4aria-checked286
__5.4.5aria-controls288
__5.4.6aria-current289
__5.4.7aria-describedby293
__5.4.8aria-disabled294
__5.4.9aria-expanded295
__5.4.10aria-haspopup297
__5.4.11aria-hidden298
__5.4.12aria-label300
__5.4.13aria-labelledby302
__5.4.14aria-level303
__5.4.15aria-live304
__5.4.16aria-modal305
__5.4.17aria-multiselectable306
__5.4.18aria-orientation307
__5.4.19aria-pressed308
__5.4.20aria-readonly309
__5.4.21aria-required310
__5.4.22aria-selected311
__5.4.23aria-valuemax311
__5.4.24aria-valuemin312
__5.4.25aria-valuenow312
__5.4.26aria-valuetext313

CHAPTER6웹접근성을준수한React컴포넌트만들기part1315
6.1Accordion317
__6.1.1Accordion이란?318
__6.1.2구성요소318
__6.1.3접근성대응319
6.2Loader328
__6.2.1Loader란?328
__6.2.2접근성대응329
6.3Notification335
__6.3.1Notification종류336
6.4Tab346
__6.4.1Tab이란?347
__6.4.2구성요소347
__6.4.3접근성대응348
6.5Toggle359
__6.5.1Toggle이란?359
__6.5.2접근성대응362

CHAPTER7웹접근성을준수한React컴포넌트만들기part2370
7.1Carousel370
__7.1.1Carousel이란?371
__7.1.2구성요소371
__7.1.3접근성대응371
7.2Dialog(Modal)409
__7.2.1Dialog란?409
__7.2.2접근성대응411
7.3MenuBar422
__7.3.1MenuBar란?422
__7.3.2구성요소423
__7.3.3접근성대응423
7.4SelectMenu454
__7.4.1SelectMenu란?455
__7.4.2구성요소455
__7.4.3접근성대응456
7.5Slider470
__7.5.1Slider란?470
__7.5.2구성요소470
__7.5.3접근성대응471
7.6SpinButton485
__7.6.1SpinButton이란?486
__7.6.2구성요소486
__7.6.3접근성대응487

CHAPTER8놓치기쉬운사례들로알아보는접근성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

모두를위한웹,모두가누릴수있는서비스를만드는웹접근성실전가이드
웹은누구에게나열려있어야한다.하지만웹에서소외되는사용자가여전히많다.웹접근성은단순히‘장애인을위한기술’이아니라,모두를위한더나은사용자경험을위한필수요소로웹개발자가반드시고려해야할기본원칙이되고있다.
이책은웹접근성의개념부터실제적용방법까지체계적으로학습할수있도록구성되어있다.시맨틱태그,ARIA역할과속성,WCAG와KWCAG등접근성표준과지침을실무에어떻게반영해야하는지React기반예제코드를통해구체적으로설명한다.특히,다양한사용자환경과스크린리더같은보조기술에대한이해를바탕으로,개발자가웹접근성을‘왜’그리고‘어떻게’실현해야하는지를균형있게다룬다.
프런트엔드개발자는물론,웹서비스개발에관여하는모든직군에게유용한웹접근성가이드가될것이다.이책을통해모두를위한웹,모두가이용할수있는서비스를만드는첫걸음을내디뎌보자!

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