웹 접근성

웹 접근성

웹 접근성은 모두가 사용할 수 있도록 웹사이트를 디자인, 개발하는 것 - 시각장애인이 보조기구(스크린 리더)로 웹 사용

출처: React 공식 문서

Semantic 태그

• div만 쓰지 말고, 적절한 semantic 태그를 사용하자 ex) main, aside, header 등등

aria-role, onclick

• aria-role
  • WAI-ARIA: https://www.w3.org/TR/wai-aria/#roles_categorization
  • 보조기구가 각 요소의 역할을 알 수 있게 해줌
  • 유효한 role (ex: button)만 줘야 함
  • aria-unsupported-elements: meta, html, script, style 태그들은 aria-role 미지원
• onclick
  • 태그에 onClick 주는 경우 key 이벤트도 같이 줘야 함 - onKeyDown, onKeyUp, onKeyPress 3중 택 1

tabIndex

• 상호작용 가능한 요소 input, select, button, a 등등
  • 기본적으로 shift+tab(뒤) , tab(앞)으로 focus 이동 가능
• h1, div는 tab으로 focus 이동 불가능
  • tab으로 상호작용 가능하게 하려면 tabIndex 속성 줘야 함
  • <div tabindex='0'>탭</div>
• input, select, button, a 에 tabindex="-1" 주면 탭으로 이동 불가능
• tabIndex에 양수 1, 2 주면 tab 이동 순서가 변경 되기 때문에 0, -1만 사용하자

img alt

• 이미지에는 alt 속성을 이용해서 이미지가 나오지 않을 때 이미지 설명
• 'image', 'picture', 'photo'는 alt에 넣지 말고, 해당 이미지를 잘 설명해주는 문구

onmouseover, onmouseout

• onMouseOver 줄 때는 onFocus 같이
• onMouseOut 줄 때는 onBlur 같이

상호작용 가능하지 않은 태그에서 role 사용하기

• 상호작용 가능한 태그 input, button
• 상호작용 가능하지 않은 태그 div, section, span
• 상호작용 가능하지 않은 태그에서 onClick 주면 role로 button도 함께 주자 - 적절한 role을 같이 주자

aria-labelledby

• 라디오버튼 사용시 ul에 role="group"주고 aria-labelledby="그룹 설명하는 태그 id" 줘서 맵핑 가능
• input, label과 똑같은 사용법
• <div id="group-description"> 그룹설명 </div> <ul role="group" aria-labelledby="group-description"> /*{...}*/ </ul>

aria-*

• aria-required: true이면 스크린 리더 사용자에게 필수로 작성해야 한다고 알려줌
• aria-describedby: 설명해주는 문구 있는 태그와 매핑 - 추가 설명
• aria-label: 속성으로 바로 설명 <button aria-label="나는 버튼"/>
• aria-expanded: 현재 탭 패널이 펼쳐져 있는지 아닌지를 나타냄
• aria-pressed: 해당 요소가 눌려져 있는지 아닌지를 나타냄

기타 고려사항

• 언어 설정: 페이지 텍스트에 언어 설정
• 문서 제목 설정: <title>
• 색 대비: 읽을 수 있는 모든 글에 충분한 색 대비

체크리스트

• Wuhcag의 WCAG 체크리스트
• WebAIM의 WCAG 체크리스트
• The A11Y Project의 체크리스트

개발

• eslint-plugin-jsx-a11y: JSX내 접근성 린팅
• shadcn/ui: 접근성 관련 처리되어있는 headless 디자인 시스템

테스트

• aXe, aXe-core, react-axe 브라우저에서 접근성 테스트
• 접근성 검사기 사용 테스트
  • Firefox에서 접근성 검사기를 사용하는 방법
  • Chrome에서 접근성 검사기를 사용하는 방법
  • OS X Safari에서 접근성 검사기를 사용하는 방법
• 스크린 리더 사용 테스트
  • 윈도우: WebAIM - NVDA를 사용한 웹 접근성 측정
  • 애플: WebAIM - VoiceOver를 사용한 웹 접근성 측정
  • 크롬: Google Chromebook 도움말 - 내장 스크린 리더 사용법

참고

• React 접근성: https://ko.legacy.reactjs.org/docs/accessibility.html
• fastcampus 강의: 100가지 시나리오로 학습하는 프론트엔드