웹 접근성
장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근, 이해할 수 있도록 보장하는 것. (소외계층만을 위한 것은 아님)
국내에서는 웹 접근성에 대한 인식이 낮은 편.
웹 접근성 효과
- 사용자층 확대
- 다양한 환경 지원
- 사회적 이미지 향상
웹 콘텐츠 접근성 지침 WCAG 2.0
-
인식의 용이성(Perceivable)
- 적절한 대체 텍스트 (ex: img태그의 alt 값)
- 자막 제공 (ex: 비디오 요소 내 track 요소 사용해 자막 파일 불러옴)
- 색에 무관한 콘텐츠 인식 (ex: 콘텐츠 테두리 설정, 콘텐츠에 레이블 달기)
- 명확한 지시사항 제공 (모양, 크기, 위치, 방향, 색, 소리에 관계 없이)
- 텍스트 콘텐츠 명도 대비 4.5 대 1 이상
- 자동 재생 금지
- 콘텐츠 간 구분
-
운용의 용이성 (Operable)
- 키보드 사용 보장
- 초점 이동
- 조작 가능
- 응답 시간 조절
- 정지 기능 제공
- 깜빡임, 번쩍임 사용 제한
- 반복 영역 건너뛰기
- 제목 제공
- 적절한 링크 텍스트
-
이해의 용이성 (Understandable)
- 기본 언어 표시 (HTML 요소의 lang 속성 사용해 제공 가능)
- 사용자 요구에 따른 실행 (사용자가 의도하지 않은 기능은 실행되지 x)
- 콘텐츠 선형구조 (논리적 순서로 제공하기)
- 표 이해하기 쉽게 구성
- 레이블 제공 (label 요소, title 속성, aria-label 속성)
- 오류 정정 방법 제공 (오류 발생 시 입력했던 내용 유지, 발생 원인 알려주기, 오류 발생 위치로 초점 이동)
-
견고성 (Robust)
: 미래 기술로도 접근할 수 있도록 견고하게 만들어야 함
- 마크업 오류 방지
- 웹 애플리케이션 접근성 준수
WAI-ARIA
- WAI- ARIA : web accessibility initiative(기관) / accessible rich internet application : WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격.
- 웹 접근성 향상 방법 중 하나.
- RIA (rich internet application) : 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션 (SPA를 의미하는 경우가 많음)
- 시맨틱 요소 외에도 보조적으로 WAI-ARIA를 통해 HTML 요소에 의미 부여 가능함. (시맨틱 요소만으로 충분히 의미 부여할 수 있는 상황이라면 사용하지 않는다)
역할(role)
HTML의 요소 종류, 역할이 서로 맞지 않을 때 어떤 역할 하는 요소인지 명시할수 있는 속성
<div role="button">div이지만 button으로 사용되는 요소</div>
//❌ HTML 요소만으로도 충분히 파악 가능 하므로❌
<button role="button"></div>
//❌ 시맨틱 요소 본연의 의미 바꾸지 않아야 함❌
<h1 role="button">h1인 요소</h1>상태(state)
- aria-selected 여러 개의 선택 가능한 요소 중 선택된 상태인 요소 표시
<div 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> </div> - aria-expanded 아코디언 UI가 펼쳐진 상태인지 표시
- aria-hidden 요소가 숨김 상태인지 표시
속성(property)
- aria-label
요소에 라벨 붙여주는 기능 - aria-live 요소가 실시간으로 내용 갱신하는 영역인지 표시 속성값 polite, assertive, off(default) 가 있음. polite 는 현재 읽고 있는 내용 모두 읽고 나서 갱신된 내용 전달 assertive는 현재 읽고 있는 내용 중단하고 바로 갱신 내용 전달
다시 일어나는 중