웹 접근성 바이블 (WCAG, WAI-ARIA 적용부터 UI 개선과 디자인 시스템 도입까지)

이하라리키야,고바야시다이스？

2004년에주식회사비즈니스아키텍츠에입사해정보아키텍트로활동했다.2017년에freee주식회사에입사했다.다양한업무처리방식의실현을목표로디자인팀을관리하거나접근성을보급하는활동을하고있다.외부컨설턴트로서note,Ubie,STUDIO,도쿄도신형코로나바이러스감염증대책사이트의접근성개선을지원했다.웹접근성기반위원회(WAIC)위원,인간중심설계추진기구(HCD-Net)평가위원이다.저서(공동집필)로‘디자이닝웹접근성’,감역서로‘코딩웹접근성’,‘인클루시브HTML+CSS&자바스크립트’가있다.
트위터:@magi1125

머리말
저자소개
옮긴이의말
베타리더추천사
제1장웹접근성이란
1.1접근성이란
단어로서의정의
사용성과의비교
접근성은사용하기쉬운정도다?

1.2웹접근성이란
웹에있기만하면접근성이압도적으로높다
웹콘텐츠는형태를바꿀수있다

1.3웹접근성과‘장애’
장애의종류별개요와이용상황
노화와장애
일시적인장애
의학모델과사회모델

1.4WCAG:웹접근성의표준
WCAG의개요
세가지적합레벨과그내용
접근성지원여부

1.5웹접근성을개선하는이유
사용자를늘린다
사용성을높일수있다
권리를지키며법을준수할수있다

1.6왜웹애플리케이션접근성인가
꾸준히이용함으로써생활이나업무가변화하므로
공동이용을하는데모두가사용할수있어야하므로
기업의미션으로이어지므로

제2장웹접근성의기초
2.1기초머신리더블이해하기
아무것도읽지못하며조작할수없는버튼-‘이름’과‘역할’
선택여부를알수없는체크박스-‘상태’
HTML시맨틱스와이를보완하는WAI-ARIA
HTML과WAI-ARIA와AOM(접근성오브젝트모델)

2.2키보드조작의기본
자주있는사례에서문제알아보기
[사례1]키보드로조작할수없다-인터랙티브요소를사용하지않았다
[사례2]키보드로조작할수없다-인터랙티브요소를가렸다
[사례3]키보드로조작할수없다-마우스로만표시되는UI
[사례4]키보드조작시현재위치를알수없다
체크포인트
자주있는사례를개선하다
[사례1개선①]인터랙티브요소를사용해서키보드조작을가능케한다
[사례1개선②]포커스를받아키이벤트로실행가능하도록한다-인터랙티브요소를사용할수없을때
[사례2개선]키보드조작으로포커스가가능한상태에서인터랙티브요소를감춘다
[사례3개선]마우스이벤트와키보드이벤트를병행해키보드를조작할때표시한다
[사례4개선①]적절한포커스인디케이터를표시한다
[사례4개선②]필요할때만포커스인디케이터를표시한다

2.3비텍스트콘텐츠의머신리더빌리티
자주있는사례에서문제알아보기
[사례1]대체텍스트가부여되지않은이미지
[사례2]접근가능한이름이없는UI
[사례3]장식을위한시각표현에텍스트데이터가존재한다
체크포인트
자주있는사례를개선하다
[사례1개선①]이미지에대체텍스트를부여한다
[사례1개선②]사용자가이미지에대체텍스트를설정할수있도록한다
[사례1개선③]그래프나차트를대체할콘텐츠를제공한다
[사례2개선]UI에접근가능한이름을부여한다
[사례3개선]장식을위한시각표현을무시한다

2.4콘텐츠구조의머신리더빌리티
자주있는사례에서문제알아보기
[사례1]표제가표제로서마크업되지않았다
[사례2]정보의관계성을마크업하지않았다
[사례3]정보의그룹을마크업하지않았다
[사례4]시각적인표현을위해잘못된시맨틱스를사용했다
체크포인트
자주있는사례를개선하다
[사례1의개선]표제를표제로서마크업한다
[사례2의개선]마크업으로정보를연관짓다
[사례3의개선]마크업으로그룹화한다
[사례4의개선]시각표현을위해사용한시맨틱스를삭제한다

제3장폼개선
3.1레이블과설명
자주있는사례에서문제알아보기
[사례1]플레이스홀더로레이블을표현했다
[사례2]레이블과설명배치를이해하기어렵다
[사례3]폼제어에레이블과설명을연관짓지않았다
[사례4]그룹에레이블과설명을연관짓지않았다
[사례5]필수입력의설명이전달되지않는다
체크포인트
자주있는사례를개선하다
[사례1개선]레이블이나설명을플레이스홀더바깥쪽에배치한다
[사례2개선]폼제어·그룹레이블과설명을이해하기쉽게배치한다
[사례3개선①]폼제어에레이블과설명을연관짓는다-label요소를사용했을때
[사례3개선②]폼제어에레이블과설명을연관짓는다-WAI-ARIA를사용했을때
[사례3개선③]폼제어에보이지않는레이블을붙인다
[사례4개선①]그룹에레이블과설명을연관짓는다-fieldset요소와legend요소를사용했을때
[사례4개선②]그룹에레이블과설명을연관짓는다-WAI-ARIA를사용했을때
[사례5개선]필수입력여부를텍스트로설명한다

3.2입력지원
자주있는사례에서문제알아보기
[사례1]필요이상으로입력을요구한다
[사례2]하나의입력값을나타내는폼제어가분할되어있다
[사례3]브라우저의자동완성을사용할수없다
[사례4]입력값종류에적절한입력형식이선택되지않았다
[사례5]선택지가있는입력란에적절한폼제어가선택되지않았다
체크포인트
자주있는사례를개선하다
[사례1개선]입력항목개수를최소화한다
[사례2개선]하나의입력값을나타내는폼제어를합친다
[사례3개선]자동완성되도록마크업한다
[사례4개선①]입력값종류에따라입력형식을지정한다
[사례4개선②]소프트웨어키보드의종류를지정한다-inputmode속성과pattern속성
[사례4개선③]인터페이스의입력을제한한다-max속성·min속성·step속성·maxlength속성
[사례5개선①]선택식폼제어를검토한다-라디오버튼·체크박스
[사례5개선②]선택식폼제어를검토한다-셀렉트박스·리스트박스
[사례5개선③]선택식폼제어를검토한다-콤보박스

3.3제약의검증과오류
자주있는사례에서문제알아보기
[사례1]오류발생위치와오류메시지의관계를알기어렵다
[사례2]다양한사용자에게오류를알리는방법을검토하지않았다
[사례3]오류수정방법을알기어렵다
[사례4]필요이상으로입력을제약했다
[사례5]사용자가직접조작을검증할수단이없다
체크포인트
자주있는사례를개선하다
[사례1개선①]HTML표준제약검증을이용한다
[사례1개선②]독자적인오류를알기쉽게디자인한다
[사례1개선③]독자적인오류를마크업한다-폼제어의경우
[사례1개선④]독자적인오류를마크업한다-그룹의경우
[사례2개선①]오류발생여부와발생위치를알기쉽게알린다
[사례2개선②]패턴1:전송시에폼제어로포커싱한다
[사례2개선③]패턴2:전송시에오류요약을표시한다
[사례2개선④]패턴3:입력시에실시간으로검증한다
[사례3개선①]오류수정방법을이해하기쉽게작성한다
[사례3개선②]오류수정후보를제안한다
[사례4개선]입력제약을최소화한다
[사례5개선]사용자가직접조작을검증할수있도록한다

3.4사용자가예측할수있는작동
자주있는사례에서문제알아보기
[사례1]폼제어값을변경했을때화면전환이발생한다
[사례2]페이지를로딩할때나폼제어에값을입력할때포커스가이동한다
체크포인트
자주있는사례를개선하다
[사례1개선]사용자가콘텐츠의큰변화를예측할수있도록한다
[사례2개선]사용자가포커스이동을예측할수있도록한다

3.5커스텀컴포넌트
자주있는사례에서문제알아보기
[사례1]커스텀컴포넌트의필요성을제대로파악하지않았다
[사례2]기존의커스텀컴포넌트샘플을참고하지않았다
[사례3]키보드조작이적절히설계되지않았다
[사례4]WAI-ARIA사양을따른역할이설정되지않았다
[사례5]WAI-ARIA사양을따른속성·상태가설정되지않았다
[사례6]지원기술로검증하지않았다
체크포인트
자주있는사례를개선하다
[사례1개선]애초에커스텀컴포넌트를이용해야하는지검토한다
[사례2개선]접근성을고려한커스텀컴포넌트샘플을참고한다
[사례3개선]적절한키보드조작을설계한다
[사례4개선]적절한WAI-ARIA역할을검토한다
[사례5개선]적절한WAI-ARIA속성·상태를검토한다
[사례6개선]지원기술로검증한다

제4장UI디자인의개선
4.1색과대비
자주있는사례에서문제알아보기
[사례1]색만으로정보를제공했다
[사례2]명암비가너무낮다
체크포인트
자주있는사례를개선하다
[사례1개선]색이외의수단으로도정보를제공한다
[사례2개선①]문자의명암비를개선한다
[사례2개선②]문자이외의명암비를개선한다
[사례2개선③]되도록명암비를높이거나,문자를크고굵게표시한다(명암비를확보할수없을때)

4.2텍스트크기
자주있는사례에서문제알아보기
[사례1]터치디바이스에서핀치아웃으로화면을확대하지못한다
[사례2]화면을확대하면위치가고정된요소가화면을가려버린다
[사례3]브라우저의문자크기변경기능이반영되지않는다
체크포인트
자주있는사례를개선하다
[사례1개선]핀치아웃으로화면을확대할수있게한다
[사례2개선]위치가고정된요소를확대했을때의표시방법을검토한다
[사례3개선]폰트사이즈는상대단위로지정한다

4.3텍스트레이아웃
자주있는사례에서문제알아보기
[사례1]줄이너무길다
[사례2]줄간격이나단락간격이좁다
[사례3]텍스트가양쪽정렬됐다
[사례4]공백문자를사용해문자간격을조정했다
[사례5]텍스트블록의크기를고정했다
[사례6]문자이미지로텍스트레이아웃을고정했다
체크포인트
자주있는사례를개선하다
[사례1개선]줄을적절한길이로맞춘다
[사례2개선]줄간격과단락간격을넓게한다
[사례3개선]양쪽정렬을사용하지않는다
[사례4개선]CSS를사용해문자간격을조정한다
[사례5개선]텍스트블록의크기를가변으로한다
[사례6개선]문자이미지사용은최소화한다

4.4라이팅
자주있는사례에서문제알아보기
[사례1]페이지의언어가지정되지않았다
[사례2]페이지제목에페이지의주제가나타나지않았다
[사례3]표제가페이지의개요를표현하지않았다
[사례4]링크텍스트가이동되는곳을표현하지않았다
[사례5]감각적특징에만의존했다
[사례6]화면에표시된텍스트의이름속성을덮어썼다
체크포인트
자주있는사례를개선하다
[사례1개선]lang속성에적절한언어를지정한다
[사례2개선]주제가나타나는페이지제목을부여한다
[사례3개선]표제만추출해페이지의개요를이해할수있도록한다
[사례4개선]링크텍스트만으로도이동되는곳을이해할수있도록한다
[사례5개선]감각적특징과함께콘텐츠를특정하는텍스트를전달한다
[사례6개선]표시된텍스트와이름속성을일치시킨다

4.5이미지의대체텍스트
자주있는사례에서문제알아보기
[사례1]대체텍스트가이미지내용을표현하지않았다
[사례2]일러스트,사진,스크린샷의대체텍스트가‘일러스트’,‘사진’,‘스크린샷’으로지정되어있다