TIL) WAI-ARIA, aria-live, 스크린 리더, 웹 접근성 향상 시키는 방법

 

 

WAI-ARIA 란?
WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격,
짧게, 웹 접근성을 향상시킬 수 있는 방법 중 하나

 

WAI (web accessibility initiative) =  웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관 

ARIA (accessible rich internet applications) = 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술

RIA (rich internet applications) = 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. 

 

 

 

WAI-ARIA 의 필요성 

시맨틱 HTML을 사용하면 웹 접근성을 향상시킬 수 있다. 

WAI-ARIA는 HTML 요소에 추가적으로 의미를 부여할 수 있게 해준다. 

1. 시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하면 HTML 요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색할 수 있다. (WAI-ARIA는 보조적인 역할로만 사용하고, 남용 금지! 시맨틱 HTML을 우선적으로 사용하기!)

2. SPA처럼 AJAX를 사용하는 상황, 즉 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에 대한 정보를 전달해줄 수 있어 동적인 콘텐츠에서도 웹 접근성을 향상시킬 수 있다. 

 

WAI-ARIA 사용법

HTML 태그 내부에 속성을 추가해서 의미를 부여한다. 

1. 역할 role: HTML 요소의 역할을 정의한다. 

2. 상태 state: 요소의 현재 상태를 나타낸다. 

3. 속성 property: 요소의 특징을 정의한다. 

 

 

---

1. 역할 role : HTML 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해줄 때 사용

버튼으로 사용되는 요소를 만들었는데, <div> 요소를 사용했다면 👇

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

HTML 요소로 충분히 파악할 수 있는 내용은 WAI-ARIA로 또 설명해줄 필요 없다. 

(❌)<button role="button"></button>

시맨틱 요소 본연의 의미를 임의로 바꾸면 안된다. 

(❌)<h1 role="button">이건 h1 요소</h1>

 

활용 예시)

<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>

 

2. 상태 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>

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

 

• 아코디언 UI가 펼쳐진 상태인지 표시하기 (aria-expanded)
• 요소가 숨김 상태인지 표시하기 (aria-hidden)

 

3. 속성 property : 요소의 특징을 정의한다. 

• 텍스트 콘텐츠 없이 이미지로만 만들어진 버튼을 설명할때 (aria-label)

 

기존 

<button> <img src="X.png" /> </button>
<button> <img src="돋보기.png" /> </button>

웹접근성을 향상시킨 버튼

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

 

• 해당 요소가 실시간으로 내용을 갱신하는 영역인지 표시하기 (aria-live)

alert, modal, dialog 와 같은 브라우징 도중에 내용을 띄우는 요소나, AJAX 기술을 사용해서 실시간으로 내용을 갱신하는 영역에 사용한다. 

 

속성값

1. polite : 스크린 리더가 현재 읽고 있는 내용을 모두 읽고 나서 갱신된 내용을 사용자에게 전달한다. 

2. assertive : 스크린 리더가 현재 읽고 있는 내용을 중단하고 갱신된 내용을 바로 사용자에게 전달한다. 

 

 

---

참고)

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques

https://www.w3.org/TR/html-aria/

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓