[HTML] WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Applications)

정의

WAI는 W3C에서 웹 접근성을 담당하는 기관으로  ARIA는 RIA 환경의 웹 접근성에 대한 표준 기술 규격을 의미

 

ARIA는 HTML을 보충해, 일반적으로 보조 기술이 알 수 없는 상호작용 및 흔히 쓰이는 어플리케이션 위젯에 필요한 정보를 제공함.

 

등장 배경

1. 동적인 웹 애플리케이션 접근성 보장을 위한 지침이 부족함

2. Ajax를 통한 실시간 변경 콘텐츠와 SPA 방식의 콘텐츠 변경이 일어나는 데 스크린리더를 사용자들은 실시간으로 갱신되는 정보를 알 수 없음

3. 화면 확대 시 화면 밖으로 콘텐츠가 변경되어도 이를 파악하기가 힘듦

 

웹 접근성이란?

웹 사이트에서 제공하는 정보를 차별 및 제한 없이 동등하게 이용할 수 있도록 보장하는 것

 

웹 접근성 기대 효과

1. 장애인, 고령자 등 다양한 사용자층 이용 가능

2. 규정과 법적 요구 사항에 대한 준수

3. 다양한 환경, 새로운 기기에서 이용 가능

4. 개발 및 운용의 효율성 제고

5. 사회 공헌 및 복지 기업으로서의 기업 이미지 향상

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

인식의 용이성(Perceivable) : 모든 콘텐츠는 사용자가 인식할 수 있어야 함

1. 적절한 대체 텍스트 제공

2. 색에 무관한 콘텐츠 인식

3. 명확한 지시사항 제공

4. 자동 재생 금지

5. 콘텐츠 간의 구분

 

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

1. 키보드 사용 보장

2. 누르기 동작 지원

3. 초점 이동

4. 조작 기능

5. 응답시간 조절

6. 반복 영역 건너뛰기

7. 적절한 링크 텍스트

 

이해의 용이성(Understandable) : 콘텐츠는 이해할 수 있어야 한다.

1. 기본 언어 표시

2. 사용자 요구에 따른 실행

3. 콘텐츠의 선형화

4. 표의 구성

5. 오류 정정

6. 레이블 제공

 

견고성(Robust) : 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.

1. 웹 애플리케이션 접근성 준수

2. 마크업 오류 방지

RPS

Role (역할)

<div role = “banner”>배너</div>

👉🏻 div 태그에 banner라는 역할을 부여함

 

Property (속성)

해당 컴포넌트의 특징이나 상황을 정의한다

<button class="btn_search" aria-label="검색">

👉🏻 따로 텍스트 없이 버튼을 나타낼 때 시각 정보를 이용할 수 없는 사용자는 어떤 버튼인지 알 수 없음. 따라서 aria-label을 이용해 버튼요소에 검색이라는 설명을 추가해 정보를 전달 한다. 

 

aria-required	form 요소의 입력 필수 속성
aria-label	text없이 이미지로 표현될 때 정보 설명
aria-live	업데이트된 정보의 상황에 대한 설명
aria-controls(속성에 제어대상)	제어대상

 

State (상태)

해당 컴포넌트의 상태 정보를 정의한다.  메뉴의 활성 여부를 보여주는 aria-expanded, aria-selected와 같이 현재 상태 또는 변화된 값을 알려준다

 

<ul class="btnList">
  <li>
    <button aria-controls="accordion-region" aria-expanded="true">btn</button>
  </li>
</ul>

👉🏻 아코디언 메뉴의 활성 상태 값인 aria-expanded를 명시하면 스크린 리더기가 상태정보(확장 또는 축소)를 읽어줄 수 있다.

 

aria-checked(true,false,undefined)	선택 상태
aria-hidden(true,false,undefined)	숨김 상태
aria-disabled(true,false)	사용 불가능/가능 상태
aria-pressed(true,false,대상)	눌림 상태

 

사용 규칙

HTML5 섹션요소와 중복 사용하지 않는다.

예시)

<nav role="navigation"> <nav>(x) 동일한 역할을 하는 네이티브요소와의 중복마크업.

 

native요소의 의미, 기능 변경을 하지 않는다.

예시)

<h1 role="button">버튼</h1> 👉🏻 h1의 본래의 기능을 버리고 다른 역할(버튼)을 부여한 잘못된 케이스.

 

키보드 사용성 보장

상호작용이 가능한 대화형 UI(사용자가 클릭 가능한 정보, 탭, drag&drop, slide, scroll등이 필요한 기능)를 span이나 div로 마크업 후, role="button"속성 부여시, 사용자가 키보드로 접근이 가능하도록 해야 한다.

 

예시)

<span role="button">버튼</span>

위의 예시는 키보드로 포커싱이 불가하다 . 따라서 아래와 같이 설정해 주어야 한다.

<span role="button" tabindex="0">버튼</span>

tabindex속성을 0 으로 설정하여 콘텐츠의 선형화 순서대로 키보드 포커싱이 진입한다. "0"보다 값이 작으면 키보드 포커스를 받지 못하도록 설정된다.

 

키보드탭 접근 가능여부

태그	접근 가능 여부
<button>	O
<a>	O
<input>	O
<div>	X
<span>	X
<p>	X

버튼으로 사용하기위해서 role="button"속성 부여시 tabindex도 반드시 설정해서 접근이 가능하도록 한다.

 

aria-hidden="true"

스크린리더(보조기기)가 접근하는 것은 원치 않지만, 시각적으로 디자인을 주기 위해서 보여지게 하고 싶은경우에 사용한다.

 

레이블(label) 제공

모든 대화형 UI의 경우, 반드시 label을 제공해야 한다. aria-label 또는 aria-labelledby로 label제공이 가능하다.

대화형 UI :

모바일 기기나 개인용 컴퓨터(PC)가 인공지능, 음성인식, 자연어 처리, 생체 인식 등의 기술을 기반으로 사용자와 대화하면서 동작하는 지능형 인터페이스

사용자의 동작을 인식하여 동작하고 사용자와 컴퓨터가 대화를 하면서 동작

 

유효성 검사 : 의미를 가진 semantic요소와의 충돌을 방지한다.

 

WAI-ARIA 자동완성 UI개선
✔ aria-live를 활용하여, 보조기기에서 읽어주지 않는 자동완성기능이나 실시간 갱신 정보를 인식하도록 한다.
✔ role="dialog"를 활용하면, 마크업이 연속적이지 않아도, 바로 접근이 가능하다. layerpopup영역 이외의 다른 영역은 보조기기에서 접근하지 않아서 콘텐츠를 명확히 인식할 수 있도록 도와준다.

참고

https://inswave.com/confluence/pages/viewpage.action?pageId=19076563