웹 접근성

책 기초부터 완성까지, 프런트엔드 정리 일부분.

모든 신체적 한계, 환경적 한계를 고려해 개발하는 것

W3C 에서 설립한 WAI(Web Accessibility Initiative)에서 가이드 라인을 제공한다.
컨텐츠에 관한 내용, 확장 프로그램 주의사항 등..

그 중, WCAG(Web Content Accssibility)기반 가이드 라인 중 몇 가지만 알아보자.

속어, 약어 지양

• 불필요한 전문용어, 약어 등 사용을 지양할 것.
• 외국인, 장애를 가진 분들 등을 모두 고려하거나 이해할 수 있도록 풀어야 한다.

컨텐츠 제목과 단락 구분

• 스크린 리더를 통해 사이트를 접속하는 사용자 입장에서 명확하게 나누어진 요소와 단락은 중요하다.

ex)

<!-- 좋은 예시 --!>
<article>
 <h1>제목</h1>
<p>단락의 내용</p>
<p>단락의 내용2</p>
</article>

<!-- 나쁜 예시--!>
<article>
 제목
</br>
단락의 내용
</br>
단락의 내용2
</article>

키보드 동작 제공

일반적으로 button 기능을 만든다고 할 때, <button> 태그를 사용하기도 하고, <div> 와 CSS를 사용하여 만들기도 한다.

이때, 키보드 동작을 모두 사용하지 못할 수 있다. 엔터키 혹은 탭 키를 이용하여 요소 이동과 같은 상호작용들을 누릴 수 없다. 또한, 스크린 리더는 이 요소가 선택 요소인지 이벤트 발생시키는 요소인지 알지 못한다.

이러한 이유를 가지고도 꼭 <div> 등 을 사용하여 만들어야 한다면, 유사하게 만들어주어야 한다.

• role : 요소의 목적을 달성 ex) role=button / 스크린 리더가 버튼으로 인식
• tab-index : 요소를 탭 키로 도달하게 하는 속성
• 키보드 이벤트 리스터 추가 : 버튼 동작이 엔터 등 으로 동작하게 자바스크립트를 이용한 이벤트 추가

Focus 지점을 명확하게

웹 사이트는 키보드만으로 모든 기능이 동작해야 한다. 키보드 이용자는 일반적으로 탭 키를 이용해 입력 혹은 버튼 등을 찾고 이용한다. 항목에 Focus 된다면 화면에서 식별이 가능해야 한다.

윤곽선을 지우는 등 포커스 지점을 알려주지 않는 방식은 지양해야 한다.

멀티미디어 요소에 접근성 부여

스크린 리더는 텍스트에 접근해 요소를 읽지만 이미지, 영상 등 은 접근할 수 없다.
이로 인하여 어떠한 의미인지 전달해주는 속성을 이용해야 한다.

개인적인 견해 작성 등은 피해야 하며 특별한 의미가 없다면 빈 문자열로 지정해준다.

<img src="./table.jpg" alt="테이블"/>

참고

• React Accessibility