학습목표

• 웹 접근성의 필요성과 개념, 효과
• 웹 접근성 지침
• WAI-ARIA 개요

웹 접근성

필요성

• 몸이 불편하거나 환경적인 요인 등으로 불편한 상황에서 정보 접근에 제한을 받을 수 있는 상황이 발생합니다.

개념

• 어떤 상황, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록 하는 것입니다.

효과

1. 사용자층 확대
2. 다양한 환경 지원
3. 사회적 이미지 향상

지침 (한국형 웹 콘텐츠 접근성 지침 2.1)

1. 인식의 용이성 (Perceivable)
   • 적절한 대체 텍스트 _ex) img tag 의 alt 속성
   • 자막제공 _자막, 원고 또는 수화 제공(멀티미디어)
   • 색에 무관한 콘텐츠 인식 _ex) 테두리 설정, 레이블 달기
   • 명확한 지시사항 제공 _어떤 상황, 사람도 지시사항 이해할 수 있게
   • 텍스트 콘텐츠 명도 대비 _텍스트 콘텐츠 4.5 : 배경 1
   • 자동재생 금지 _불가피하게 제공하는 경우 정지할 수 있게
   • 콘텐츠 간 구분 _ex) 테두리, 구분선, 무늬, 간경 등

2. 운용의 용이성 (Operable)
   • 키보드 사용 보장
   • 초점 이동 _키보드에 의한 초점 논리적 이동, 시각적 구별 가능
   • 조작 가능 _조작을 간편하게해서 모두가 조작 가능하게
   • 응답 시간 조절 _ex) 자동 로그아웃 시간 연장
   • 정지 기능 제공 _자동 변경 콘텐츠 정지기능 제공
   • 깜빡임과 번쩍임 사용 제한 _눈 피로, 발작 유발 X
   • 반복 영역 건너뛰기
   • 제목 제공
   • 적절한 링크 텍스트

3. 이해의 용이성 (Understandable)
   • 기본 언어 표시 _ex) html 태그의 lang 속성
   • 사용자 요구에 따른 실행 _사용자가 의도하지 않은 기능 실행 X
   • 콘텐츠 선형 구조 _콘텐츠는 논리적인 순서로 제공
   • 표의 구성 _표는 이해하기 쉽게
   • 레이블 제공 _사용자 입력에 대응하는 레이블 제공
   • 오류 정정 _입력 오류 정정할 수 있는 방법 제공

4. 견고성 (Robust)
   • 마크업 오류 방지 _html 오류 X
   • 웹 애플리케이션 접근성 준수

WAI-ARIA

개요

• WAI : 기관
• ARIA == RIA == SPA : 웹 애플리케이션
• 웹 접근성 기술 규격
• 웹 접근성 향상시키는 방법

필요성

1. 시맨틱 요소 사용할 수 있을때 사용
2. 동적인 콘텐츠 (SPA)

사용법

1. 역할(role) : HTML 요소의 역할을 정의하는 속성
   • role : 역할을 명시
2. 상태(state) : 요소의 현재 상태를 나타내는 속성
   • aria-selected : 여러 개의 선택 가능한 요소중에서 선택 상태인 요소를 표시
3. 속성(property) : 요소의 특징을 정의하는 속성
   • aria-label : 요소에 라벨로 의미 부여
   • aria-live : 요속가 실시간으로 내용을 갱신하는 영역인지 표시, polite, assertive, off(default) 속성 값 보유

결론

• WAI-ARIA 는 보조역할, WAI-ARIA 사용전 시맨틱 HTML 작성이 우선
  • 당장은 role, aria-label 정도만 사용

참조 : 코드스테이츠 프론트엔드 부트캠프