쓰윽터디/Front_end

누구나 접근하자! "WAI-ARIA"

Kkan 2022. 12. 31. 15:34
728x90
반응형

1. WAI-ARIA 란...

Web Accessibility Initiative – Accessible Rich Internet Applications

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

RIA : 정적인 HTML, 단순한 자바스크립트 환경의 웹이 아닌 동적인 자바스크립트와 Ajax와 같은 기술을 사용한 환경에서 수준 높은 UX(User eXperience)를 제공하는 웹 애플리케이션

 

1 - 1. WAI-ARIA를 사용하는 이유

  1. RIA의 동적 웹 애플리케이션 접근성 보장 지침이 부족
  2. Ajax, 통한 실시간 변경 콘텐츠, SPA 방식의 콘텐츠 변경
  3. 화면 확대사용자의 경우, 가시 범위 밖 콘텐츠의 변경 내용 인지 불가능

WAI-ARIA를 이용해서 개발자가 의도한 유저 인터페이스(User Interface) 행동이나 구조적인 정보를

스크린 리더와 같은 보조 기술에 전달하여 시각/인지 장애인들에게 일반 사용자들과 동일하게 정보를 제공하고

행동을 유도함으로써 웹페이지 탐색을 돕는 사용자 경험(UX)을 제공합니다.

 

2. 사용방법

role과 aria-label

role

role은 태그의 역할을 알려주는 속성(attribute)이다.
role에 들어가는 값은 우리 마음대로 정하는 게 아닌 꼭!! 정해진 값을 사용해야 한다.

  • tab
  • tablist
  • banner
  • button
  • gruop

aria-label

aria-label은 태그가 가지고 있는 의미를 적어주는 이름표 같은 역할을 한다. role과는 다른 기능이 있는데, 크게 두 가지로 나눌 수 있다.

 

첫 번째 특징

aria-label은 role의 banner나 tab처럼 값이 정해져 있는 게 아닌, 브라우저가 스크린 리더 사용자에게 전달해야 할 내용을 상황에 따라 적어야 한다.

 

두 번째 특징

aria-label과 같이 써도 되는 태그가 있고 아닌 태그가 있다.

다음과 같이 시멘틱 태그이거나, role 속성 값이 상호작용(interactive)을 하는 값일 때 aria-label을 붙일 수 있다:

  • a (href 속성이 있을 때)
  • button
  • header
  • footer
  • nav
  • main
  • form
  • iframe
  • img
  • role="navigation"
  • role="button"

시멘틱 태그가 아닌 의미 없는 태그에는 role이 붙어있지 않은 이상 aria-label을 마음대로 붙이면 안 된다:

  • div
  • span
  • p
  • li

 

aria-label과 role을 쓰기 위한 규칙

 

첫 번째 규칙

만약 HTML에 개발자들이 쓰기 좋게 만들어져 있는 태그가 존재한다면 그 태그를 사용하는 것이 좋다.

예를 들면, 로 체크박스를 손쉽게 만들 수 있고, 체크박스를 위한 기능(체크하기, 체크 풀기, 체크박스가 focus 되어있을 때 키보드로 제어하기 등등….)들이 이미 만들어져 있을 때 우리는 이 태그를 사용하면 된다.
굳이

태그를 사용해 role을 checkbox로 지정해주고 체크박스가 가진 기능들을 직접 만들 필요가 없는 것이다.

 

두 번째 규칙

시멘틱 태그에 role을 될 수 있으면 쓰지 않는다. 시멘틱 태그 자체가 의미 있는 태그이기 때문에 role은 붙일 필요 없다. 만약 nav 태그에 button 역할을 추가하고 싶다면

<nav role="button"></nav>
//가 아닌
<nav><button></button></nav>
//이렇게 쓸 것을 권장한다.
버튼

코드 첫 줄의 경우 스크린 리더는 태그를 무시하고 role을 읽는다.

 

세 번째 규칙

aria로 사용된 모든 요소는 키보드로 제어할 수 있어야 한다. (제 기능을 해야 한다)
만약 role="button"이라면 tab으로 focus한 다음 enter 키나 return 키를 눌렀을 때 active 상태가 되어야 한다.

 

네 번째 규칙

시멘틱 태그가 의미하는 것을 aria-label로 다시 나타낼 필요는 없다.
아래 코드와 같이 이미 <button>으로 감싸진 태그 안에 또다시 app button이라는 텍스트를 넣을 필요가 없다.

<button type="button">
  <a href="#" aria-label="app button"></a>
</button>

아래 코드와 같이 'app'만 적어주면 된다.

<button type="button">
  <a href="#" aria-label="app"></a>
</button>

 

aria-label과 aria-labelledby의 차이점

aria-label이 이름표를 붙여주는 것이라면, aria-labelledby는 쉽게 말해 그룹으로 묶어주는 속성이다.

<h2 id="today-todo">오늘 할 일</h2>
<ul aria-labelledby="today-todo">
  <li>자바스크립트 공부</li>
  <li>html/css 과제</li>
  <li>알고리즘 문제풀이</li>
</ul>

오늘 할 일

  • 자바스크립트 공부
  • html/css 과제
  • 알고리즘 문제풀이

오늘 할 일이라는 텍스트와 아래의 list 들이 같은 그룹이고 연결되어 있다는 것은 aria-labelledby를 통해 알 수 있다.
보통 연결해야 하는 label의 id를 적어주며, 만약 오늘 할 일이 list 들을 연결해야 한다면 aria-describedby를 써주면 된다.

<h2 aria-describedby="today-todos">오늘 할 일</h2>
<ul id="today-todos">
  <li>자바스크립트 공부</li>
  <li>html/css 과제</li>
  <li>알고리즘 문제풀이</li>
</ul>

오늘 할 일

  • 자바스크립트 공부
  • html/css 과제
  • 알고리즘 문제풀이

 

 

음.. 어렵다.. 어려워

자주 써봐야겠다..

728x90
반응형