웹접근성 (Web Accessibility)
장애인과 고령자 등이 웹사이트 정보를 비장애인과 동등하게 접근하고 이해할 수 있도록 하는 것
ex) 스크린리더 => 이미지에 들어있는 글자의 경우 스크린리더가 인식할 수 없어 음성으로 읽어줄 수 없음
웹 접근성으로 얻을 수 있는 효과
- 사용자층 확대
- 다양한 환경 지원
- 정보 소외계층이 아니더라도 정보 접근이 어려운 상황(운전중, 마우스 사용할 수 없는 상황)에 누구나 노출될 수 있음
- 사회적 이미지 향상
한국형 웹 콘텐츠 접근성 지침 2.1
인식의 용이성 (Perceivable)
- 적절한 대체 컨텐츠
alt속성 사용하기 : 배경 이미지와 같이 정보를 인식할 필요가 없는 경우alt값으로 빈 문자열을 주어 스크린리더가 인식하지 않게 해야함<img src="이미지 주소" alt="대체 텍스트" />
- 자막 제공
- 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 함
- 비디오 요소 안쪽에
track요소 사용하여 자막파일 불러오기
<video ... >
<track src="자막.vtt" kind="captions" />
</video>- 색과 무관하게 콘텐츠 인식 가능
- 콘텐츠에 테두리 설정하여 구분 명확하게 하기
- 콘텐츠에 레이블 달기(수치표기 등)
- 명확한 지시사항 제공
- 모양, 크기, 위치, 방향, 색, 소리 등과 관계없이 지시사항이 인식될 수 있도록 함
- 텍스트 콘텐츠 명도 대비
- 명도 대비는 4.5대 1 이상이어야 한다
- 명도 대비가 충분히 확보되지 않은 경우 텍스트 읽기 어려우므로 꼭 지켜야 함
- 다음 상황에서는 콘텐츠와 배경간의 명도 대비가 3대 1까지 허용됨
- 텍스트가 18pt 또는 굵은(Bold) 14pt 이상일 경우, 확대 가능한 페이지인 경우, 비활성화 된 콘텐츠인 경우, 장식 목적의 콘텐츠인 경우
- 자동 재생 금지
- 콘텐츠 간 구분
운용의 용이성 (Operable)
사용자 인터페이스 구성요소는 조작가능 + 네비게이션 가능
8. 키보드 사용 보장
9. 키보드 초점 논리적 이동 가능 및 시각적 구별 가능
10. 조작 가능
11. 응답 시간 조절
12. 정지 기능 제공
13. 깜빡임과 번쩍임 사용 제한
14. 반복 영역 건너뛰기
15. 제목 제공
16. 적절한 링크 텍스트
이해의 용이성 (Understandable)
콘텐츠는 이해할 수 있어야 함
17. 기본 언어 표시
18. 사용자 요구에 따른 실행
19. 콘텐츠 선형 구조 (논리적 순서로 콘텐츠 제공)
20. 표의 구성
21. 레이블 제공
22. 오류 정정
견고성 (Robust)
- 마크업 오류 방지
- 웹 애플리케이션 접근성 준수
WAI-ARIA
WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격
WAI(Web Accessibility Initiative): 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
ARIA(Accessible Rich Internet Applications): 정보 접근성이 떨어지는 사람들이 더 쉽게 웹 콘텐츠와 응용프로그램에 접근할 수 있도록 하는 웹접근성을 갖추기 위한 기술
RIA(Rich Internet Applications): 별도의 프로그램 설치 없이 웹브라우저를 통해 사용할 수 있는 편리성과 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션 (SPA)
WAI-ARIA 속성
역할(role) : HTML 요소의 역할을 정의
<div role="tabList">
<li role="tab">Tab1</li>
<li role="tab">Tab2</li>
<li role="tab">Tab3</li>
</div>
<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>상태(state) : 요소의 현재 상태를 나타냄
aria-selected: 선택이 된 상태인지 나타내는 속성aria-expanded,aria-hidden등
<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>
<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>속성(property) : 요소의 특징을 정의
aria-label: 요소에 라벨을 붙여주는 기능
<button aria-label="닫기"/> <img src="X.png" /> </button>
<button aria-label="검색"/> <img src="돋보기.png" /> </button>aria-live: 해당 요소가 실시간으로 내용이 갱신되는 영역인지 표시
-polite: 스크린 리더가 현재 읽고있는 내용을 모두 읽고나서 갱신된 내용을 사용자에게 전달assertive: 스크린 리더가 현재 읽고있는 내용을 중단하고 갱신된 내용을 바로 사용자에게 전달
oneThing