Web Accessibility

웹 접근성

웹 접근성이란?

웹 접근성을 갖추면 웹에 접근했을 때 어떤 상황에서도 항상 동등한 수준의 정보를 제공받도록 보장받을 수 있음

2. 웹 콘텐츠 접근성 지침 (WCAG)

✅ 인식의 용이성 : 모든 콘텐츠는 사용자가 인식할 수 있어야 한다

적절한 대체 텍스트
- alt 속성으로 대체텍스트 제공
- 배경이미지와 같이 정보 인식이 필요 없는 경우에는 alt 값으로 빈 문자열을 주어 스크린 리더가 인식하지 못하도록 함
자막 제공
- 자막을 포함하거나, 비디오 요소 안쪽에 track 요소를 사용해 자막 파일 불러오기
색에 무관한 콘텐츠 인식
- 콘텐츠는 색에 관계없이 인식되어야 하므로, 콘텐츠에 테두리를 설정하거나, 레이블을 추가하여 내용 파악 가능하게 함
명확한 지시사항 제공
- 지시사항에도 대체 텍스트 작성 혹은 시각적 피드백 함께 제공
텍스트 콘텐츠 명도 대비
- 명도 대비가 충분히 확보되지 않으면 텍스트 읽기가 어려움
- 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 함
자동 재생 금지
- 스크린 리더를 사용하는 경우, 자동 재생된 소리와 겹쳐 페이지 내용 파악이 어려움
콘텐츠 간 구분
- 이웃한 콘텐츠는 구별될 수 있어야 하므로 테두리, 구분선, 명도대비, 간격 등으로 구분

✅ 운용의 용이성 : 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다

키보드 사용 보장
- 모든 기능은 키보드만으로도 사용할 수 있어야 함
초점 이동
- 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 함
조작 가능
- 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다
- 미세한 조작이 어려운 상황에서도 원하는 요소를 선택하여 조작할 수 있도록 해야 한다
응답 시간 조절
- 시간 제한이 있는 콘텐츠는 응답 시간을 조절하거나, 종료 시간을 알려주어야 함
정지 시간 제공
- 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 함
깜빡임과 번쩍임 사용 제한
- 눈에 피로나 광과민성 발작을 일으킬 수 있으므로 하더라도 일정 조건 충족 필요
반복 영역 건너뛰기
- 제공하더라도 건너뛰어 메인 콘텐츠로 이동할 수 있는 방법 제공
제목 제공
- 적절한 제목을 제공함으로써 내용에 빠르게 접근할 수 있도록 도움
적절한 링크 텍스트
- 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 함

✅ 이해의 용이성 : 콘텐츠는 이해할 수 있어야 한다

기본 언어 표시
- 주로 사용하는 언어를 명시 ex) <html lang = "ko">
사용자 요구에 따른 실행
- 사용자가 의도하지 않은 기능 (새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 함
콘텐츠 선형 구조
- 콘텐츠는 논리적인 순서로 제공해야 함
표의 구성
- 표는 이해하기 쉽게 구성해야 함
레이블 제공
- 사용자 입력에는 그에 대응하는 레이블을 제공해야 함
- <input> 요소에 value 나 placeholder 속성만 설정하는 것은 적합하지 않고
- <input> 요소에 id 를 설정하고 <label> 요소의 for 속성으로 연결하기
오류 정정
- 입력 오류를 정정할 수 있는 방법을 제공해야 함

✅ 견고성 : 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 함

마크업 오류 방지
- 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 함
웹 애플리케이션 접근성 준수
- 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 하며, 없다면 대체 수단 제공 필요

3. WAI-ARIA

1. WAI-ARIA

WAI(Web Accessibility Initiative)
- 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
ARIA (Accessible Rich Internet Applications)
- 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술

2. WAI-ARIA의 필요성

HTML 요소에 추가적으로 의미를 부여할 수 있게 해주므로 웹 접근성을 향상 시킬 수 있음

3. WAI-ARIA 사용법

역할(role)

HTML의 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시할 때 사용하는 속성

<div role="button">div이지만 button으로 사용되는 요소</div>

  <!-- WAI-ARIA의 잘못된 사용 예시 : WAI-ARIA로 또다시 설명 -->
  <button role="button">button인 요소</button>
  <h1 role="button">h1인 요소</h1>

상태(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>

<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>

속성(property)

aria-label: 요소에 라벨을 붙여줌

  <!-- 1. html 요소의 구조만으로는 어떤 역할을 하는 버튼인지 알기 힘듦 -->
  <button> <img src="X.png" /> </button>
  <button> <img src="돋보기.png" /> </button>

  <!-- 2. aria-label 사용 -->
  <button aria-label="닫기"/> <img src="X.png" /> </button>
  <button aria-label="검색"/> <img src="돋보기.png" /> </button>

aria-live: 해당 요소가 실시간으로 내용을 변경하는 영역인지 표시 (alert, modal 등)
- 속성 값으로는 polite, assertive, off(default)가 있음

PreviousTCP&IP NextWeb Standard

Last updated 1 year ago