웹 접근성
웹 접근성은 웹사이트나 웹 애플리케이션을 모든 사용자가 동등하게 이용할 수 있도록 만드는 것을 의미한다.
왜 웹 접근성을 챙길까?
시각, 청각, 신체적, 인지적 장애 등을 가진 사람들은 웹을 사용함에 있어 다양한 제약을 가질 수 밖에 없다. 이러한 제약으로 다른 사람들과 동등한 정보를 얻지 못하게 된다.
당장 화면이 깨져서 폰 화면을 못보는 상황이라면, 아무것도 할 수 없는 것처럼 말이다.
모든 사람들이 동등한 수준의 정보를 받을 권리가 있다.
웹 접근성의 효과
- 정보 소외 계층도 이용할 수 있기 때문에 그만큼 이용자도 늘릴 수 있다.
- 소외 계층이 아니더라도 네비게이션같이 제한되는 환경이라면, 웹 접근성을 향상시켜서 다양한 환경을 지원하는 것이 좋다.
- 기업의 사회적 책임에 대한 중요성이 대두되는 지금. 웹 접근성 확보를 통해 정보 소외 계층을 위한 사회 공헌에 기여하는 사회적 이미지 향상
웹 콘텐츠 접근성 지침
웹 접근성을 구현하기 위해서는 다양한 가이드라인과 표준이 존재한다.
웹 접근성을 실현하기 위해서는 다양한 요소들에 대한 고려가 필요하다.
대표적인 가이드라인으로는 W3C가 발표한 웹 콘텐츠 접근성 지침(WCAG, Web Content Accessibility Guidelines)이 있다.
인식의 용의성
: 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.
1. 적절한 대체 텍스트
: 텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
<img src="이미지 주소" alt="대체 텍스트" />정보를 인식할 필요가 없는 경우에는 alt값은 빈 문자열이라도 넣어주면 좋다.
2. 자막 제공
: 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.
3. 색에 무관한 콘텐츠 인식
: 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
4. 명확한 지시사항 제공
: 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
5. 텍스트 콘텐츠 명도 대비
: 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대비 1 이상이어야 한다.
6. 자동 재생 금지
: 자동으로 소리가 재생되지 않아야 한다.
7. 콘텐츠 간 구분
: 이웃 콘텐츠는 구별될 수 있어야 한다.
운용의 용이성
: 사용자 안터페이스 구성요소는 조작 가능하고 네비게이션할 수 있어야 한다.
8. 키보드 사용 보장
: 모든 기능은 키보드만으로고 사용할 수 있어야 한다.
9. 초점 이동
:키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
10. 조작 가능
: 사용자 입력 및 컨트롤은 조장 가능하도록 기능 제공되어야 한다.
11. 응답 시간 조절
: 시간 제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
ex) 은행 웹 사이트 - 로그인 시간 제한
12. 정지 기능 제공
: 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
13. 깜빡임과 번쩍임 사용 제한
: 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
14. 반복 영역 건너뛰기
: 콘텐츠의 반복되는 영역은 건널뛸 수 있어야 한다.
15. 제목 제공
: 적절한 제목을 제공함으로써 원하는 내용에 빠르게 접근할 수도 있다.
16. 적절한 링크 텍스트
: 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.
이해의 용이성
: 콘텐츠는 이해할 수 있어야 한다.
17. 기본 언어 표시
: 링크 텍스느나 용도나 목적을 이해할 수 있도록 제공한다.
18. 사용자 요구에 따른 실행
: 사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다.
19. 콘텐츠 선형 구조
: 콘텐츠는 논리적인 순서로 제공해야 한다.
20. 표의 구성
: 표는 이해하기 쉽게 구성해야 한다.
21. 레이블 제공
: 사용자 입력에는 대응하는 레이블을 제공해야 한다.
22. 오류 정정
: 입력 오류를 정정할 수 있는 방법을 제공해야 한다.
견고성
: 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.
23. 마크업 오류 방지
: 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
24. 웹 애플리케이션 접근성 준수
: 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.
WAI-ARIA
- WAI (Web Accessibility Initiative): 웹 표준을 정하는 W3C에서 접근성을 담당하는 기관
- ARIA (Accessible Rich Internet Applications): 웹 접근성을 갖추기 위한 기술
HTML 요소에 추가적인 의미를 부여하여 더 원활하게 피에지를 탐색할 수 있게 도와준다.
시멘틱 요소만으로 의미를 충분히 부여할 수 없는 상황에서 WAI-ARIA를 사용한다.
사용법
역할(role)
HTML의 요소 종류와 역할이 서로 맞지 않을 때 사용한다. <div>를 사용했지만 어떠한 역할을 가지고 있는지 표시 해준다.
<div role="button"></div>상태(state)
여러 개의 선택 가능한 요소 중에서 선택 상태인 요소를 표시할 수 있는 aria-selected 속성을 사용한다.
<ul role="tabList">
<li role="tab" aria-selected="true">Tab1</li>
<li role="tab" aria-selected="false">Tab2</li>
<li role="tab" aria-selected="false">Tab3</li>
</ul>속성(Property)
요소에 대한 정보를 전혀 얻을 수 없는 경우도 발생한다. 대표적으로 텍스트 콘텐츠없이 이미지로만 만들어진 버튼이 예시다.
<button aria-label="닫기"/> <img src="X.png" /> </button>
<button aria-label="검색"/> <img src="돋보기.png" /> </button>