[웹 접근성] ARIA (Accessible Rich Internet Applications)

📍ARIA

장애가 있는 사용자가 웹 콘텐츠 및 웹 앱(특히 JavaScript 웹 앱)에 더 쉽게 접근할 수 있도록 하는 방법을 정의

- HTML, JavaScript 를 보완

 

기본적으로 ARIA 대신 기존의 HTML element 또는 semantic element 를 우선하는 것이 좋다

- 웹 접근성을 고려하여 ARIA element를 우선적으로 사용하면, 이를 보충하기 위해 구현해야 할 코드 또는 에러가 많아질 수 있음

- 따라서 ARIA element는 꼭 필요한 순간에만 사용해야 한다 (No ARIA is better than bad ARIA)

 

📍예제

HTML

<div
  id="percent-loaded"
  role="progressbar"
  aria-valuenow="75"
  aria-valuemin="0"
  aria-valuemax="100">
</div>

 

어트리뷰트 설명

role : aria-role

- 브라우저에게 해당 element가 JavaSript로 구동되는 진행상태 위젯이라는 것을 알린다

aria-valuenow, min, max : 현재 수치

 

JavaScript로 동적으로 생성할 수도 있다 (어느 것을 사용해도 상관없다, 둘 다 style 추가 필요)

// Find the progress bar <div> in the DOM.
const progressBar = document.getElementById("percent-loaded");

// Set its ARIA roles and states,
// so that assistive technologies know what kind of widget it is.
progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);

// Create a function that can be called at any time to update
// the value of the progress bar.
function updateProgress(percentComplete) {
  progressBar.setAttribute("aria-valuenow", percentComplete);
}

 

아니면 <progress> element를 사용해도 된다

- 이처럼 시맨틱 태그를 사용하면 웹 접근성에 좋은 영향을 줄 수 있다

<progress id="percent-loaded" value="75" max="100">75 %</progress>

 

 

- <progress>에서 min 어트리뷰트를 따로 설정할 수 없다. 0으로 고정된다

- <main>, <nav>, <header> 등은 role 어트리뷰트를 기본으로 내장하고 있기 때문에 따로 부여하면 안된

 

<progress>

 

attribute 예시

aria-hidden="true"

- 이하의 DOM 노드를 스크린 리더가 읽어주지 않도록 한다

 

📍참고 (이외에도 많은 role 과 attribute가 있음)

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

ARIA states and properties - Accessibility | MDN

 

✅예시 : aria-label

- Element를 나타낼 적당한 label(스크린 리더를 위한)이 없을 때 부여할 수 있다

 

예를 들면

- <form> 은 <label> element를 사용 가능

- <img> 는 alt 어트리뷰트를 사용 가능

 

이처럼 스크린 리더를 위한 label을 부여하고 싶을 때 aria-label 어트리뷰트를 사용할 수 있다