웹 접근성이란
- 모든 사용자가 신체적·환경적 조건에 따른 차별 없이 웹 사이트를 이용할 수 있도록 보장하는 것
- 신체적: 장애인, 고령자, 비장애인 등
- 환경적: 회선 속도, 기기, 브라우저 등
- 장애인의 웹 접근성에 대해 연구하고 개발 지침 등을 마련하기 위해 1997년에 W3C 산하에 WAI(Web Accessibility Initiative)가 설립됨
- W3C(World Wide Web Consortium): HTML, CSS 등의 WWW 표준을 세우는 조직
WCAG(Web Content Accessibility Guidelines)
- WAI에서 마련한 웹 콘텐츠 접근성 지침
- Perceivable: 정보와 사용자 인터페이스 요소는 각 사용자가 인지할 수 있는 방법으로 제공될 수 있어야 한다.
- 비문자 콘텐츠: 큰 글씨, 점자, 음성, 기호, 쉬운 말 등의 다른 형태로 변환될 수 있도록 대체 텍스트를 제공하라.
- 시간적 미디어: 대체 요소를 제공하라.
- 융통성: 정보나 구조의 손실 없이도 다른 방식으로 제공될 수 있도록 콘텐츠를 만들라.
- 구별성: 사용자가 배경과 전경을 구별하여 보거나 들을 수 있도록 하라.
- Operable: 사용자 인터페이스 요소와 네비게이션은 작동시킬 수 있어야 한다.
- 키보드 접근성: 모든 기능을 키보드로 사용할 수 있도록 하라.
- 충분한 시간: 사용자가 콘텐츠를 읽거나 사용하는 데에 충분한 시간을 제공하라.
- 발작과 신체 반응: 발작이나 신체 반응을 일으킨다고 알려진 방식으로 디자인 하지 말아라.
- 탐색가능성: 사용자가 navigate하고, 콘텐츠를 검색하고, 현재 위치가 어디인지 알 수 있는 방법을 제공하라.
- 입력 양상: 사용자가 키보드 이외의 다양한 입력 방식으로도 기능을 사용하는 것이 쉽도록 하라.
- Understandable: 정보와, 사용자 인터페이스의 조작이 이해하기 쉬워야 한다.
- 가독성: 문자 콘텐츠들이 읽기 쉽고 이해하기 쉽도록 하라.
- 예측성: 웹 페이지가 예측 가능한 방식으로 나타나고 동작되도록 하라.
- 입력 지원: 사용자가 가능한 한 실수하지 않고 실수하더라도 고칠 수 있도록 하라.
- Robust: 콘텐츠는 보조공학을 포함한 다양한 사용자 에이전트가 읽어낼 수 있을 만큼 충분히 탄탄해야 한다.
- 호환성: 현재는 물론이고 미래의 보조공학을 포함한 사용자 에이전트와의 호환성을 극대화하라.
- 한국은 웹접근성연구소라는 곳에서 WCAG를 따라 한국의 특수성을 반영한 한국형 웹 콘텐츠 접근성 지침을 제공함
접근성 있는 웹 개발 팁
<html lang="">명시: 한국어코드는ko.- Semantic한 태그 사용: 가장 기본적이고 기초적이고 쉽고 강력한 방법.
브라우저나 보조공학기기가 태그를 따라서 콘텐츠를 읽어내기 때문에, 버튼을<button>으로 작성한다든가 네비게이션을<nav>로 작성하는 등 가장 명시적인 방법이 개발자에게도 사용자에게도 가장 이로운 방법임.- semantic 태그만으로 표현할 수 없거나
<div>등 일반적인 태그를 사용해야만 할 경우role속성 제공
- semantic 태그만으로 표현할 수 없거나
- 레이블 제공:
<input>만으로는 해당 항목이 어떤 입력 항목인지 사용자가 알 수 없으므로<label>태그 혹은aria-label속성으로 레이블을 제공 - 대체 텍스트 제공:
<img>태그에 alt 속성을 넣는다든가,<figure>태그에<figcaption>을 포함하는 등 여러 방법이 있음- 다만, 단지 레이아웃을 구성하는 (읽어들일 필요가 없는) 이미지에는 alt에 빈 문자열을 제공할 것. (alt 속성 자체를 제공하지 않으면 스크린리더가 파일명을 읽는다)
- 레이아웃 이미지는 CSS로 제공하는 것이 더 좋은 선택임
- 읽는 순서와 동일한 코드 작성: 아무리 CSS 등으로 화면 구성을 달리할 수 있다고 하더라도 기본적으로 Tab의 순서는 작성된 코드를 따르므로
- 반응형 요소에 키보드 접근성 부여
tabindex="0"속성 활용: 기본적으로 Tab으로 접근할 수 없는 요소를 Tab으로 접근할 수 있도록 해줌- JavaScript로 keydown(엔터:13)이나 click 이벤트 작성
- 기타 자세한 내용은 지침을 참고할 것
WAI-ARIA(Accessible Rich Internet Application)
- WCAG는 접근성에 관한 가이드라인이지만, ARIA는 접근성을 향상시키는 기술 사양임
- 나쁜 ARIA는 없느니만 못하다.
- role은 약속이다:
만약 개발자가<button>이 아니라<div role="button">과 같은 요소를 만들었다면 이<div>에 대해 button에 해당하는 기능들을 직접 구현했다는 것을 의미한다. (role="button"자체로는 브라우저가<button>에 해당하는 기능들을 구현하지 않는다) - ARIA는 가독성을 향상시킬 수도, 정보를 가릴 수도 있다:
예를 들어aria-label같은 속성은 대체 텍스트로 쓰일 수 있지만<a aria-label="ARIA label">link label</a>과 같은 요소가 있다면, 보조공학기기는 "link label"을 읽어주지 않을 것이다.
- role은 약속이다:
- 다양한 요소들의 디자인 예시가 WAI 공식문서에 제시되어있으니 참조
참고한곳
- 웹접근성 @ GitHub/seulbinim
- 접근성을 고려한 HTML 작성하기 @ Tistory/web-for-all
- HTML: 접근성을 위한 기초 @ MDN
풀스택도 프론트부터