WAI-ARIA 란 무엇인가

WAI-ARIA 란 무엇인가

이미지 출처 : web.dev

1. WAI

  WAI(Web Accessibility Initiative)는 W3C에서도 웹 접근성의 표준을 만드는 것을 담당하는 기관입니다.

 

2. ARIA

  자바스크립트 등에 의해 동적으로 변화하는 요소를 가진 웹 페이지 등 다양한 기능과 상호작용을 가진 요즘의 고도화된 웹 페이지를 RIA(Rich Internet Applications)이라하는데, ARIA(Accessible Rich Internet Applications)는 장애나 기타 불편함을 가진 사용자가 이러한 웹 페이지에 더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성과 그 특성을 가진 웹 페이지를 뜻합니다.

 

  개발자의 입장에서는, HTML5에 존재하는 시맨틱한 태그만으로 원하는 타겟을 구현할 수 없는 등의 경우에 HTML을 보충해, 일반적으로 스크린 리더 같은 보조 기술이 알 수 없는 상호작용 및 어플리케이션 위젯이 가지고 있거나 필요한 정보를 제공해주는 역할을 합니다.

 

  예를들어 탐색 랜드마크, JavaScript 위젯, Form의 힌트 및 오류 메시지, 실시간 콘텐츠 업데이트 등을 접근 가능한 형태로 제공합니다.

 

  많은 부분은 HTML4에서 HTML5로 넘어오면서 ARIA의 역할이 시맨틱 태그 자체에 내장되도록 변경되었기에, 개발자는 되도록 ARIA보다 시맨틱 HTML을 선호해야 합니다.

 

<div role="main">
<!-- HTML4에서는 위와 같이 메인 섹션을 구성해야 했지만 HTML5부터는 아래와 같이 구성이 가능합니다 -->
<main>

 

  ARIA 역시 환경 별 지원 수준에 차이를 보입니다. 이 차이는 사용자의 운영 체제 및 사용하는 브라우저, 그리고 연결된 보조 기술마다 다르며 심지어는 ARIA의 각각의 버전 또한 영향을 미칠 수 있습니다. 오래된 소프트웨어 버전은 특정 ARIA role을 지원하지 않거나, 부분적으로만 지원하거나, 잘못된 기능을 가지고 있을 수 있습니다.

 

3. Roles & Properties & States

ARIA는 보통 Roles, Properties, States를 통해 구현할 수 있습니다.

 

3-1. Roles

  slider, menu bar, dialog와 같은 HTML4에서 사용하지 못하는 위젯을 설명하는 역할을 합니다. 특정 요소에 역할을 정의해 사용자에게 그 역할에 대한 정보를 제공합니다. 부여한 역할은 동적으로 변경할 수 없습니다.

 

  예를 들어 아래와 같이 role="tabList"를 통해 해당 목록이 탭 리스트임을 스크린 리더와 같은 보조도구에게 알려주어 사용자가 이 요소가 탭 역할을 하는 것임을 알 수 있습니다. 이와 같은 ARIA 관련 속성이 없다면 스크린 리더 사용자는 해당 요소가 리스트임을 알 수 있지만 탭인 것을 알 방법이 없습니다.

 

<ul role="tabList">
  <li>
    <a href="..." role="tab" aria-selected="true" aria-controls="tabpanel01">프롤로그</a>
  </li>
  <li>
    <a href="..." role="tab" aria-selected="false" aria-controls="tabpanel02">블로그</a>
  </li>

 

3-2. Properties

  드래그가 가능하다는 것이나, 요소가 필요하다는 것이나, 팝업이 뜨는 것과 같은 위젯의 특징에 대해 설명하는 역할을 합니다. 즉, 컴포넌트의 특징이나 상황을 정의해줍니다.

 

  예를 들어 아이콘 버튼의 경우 스크린 리더 사용자는 해당 버튼의 의미가 무엇인지 모를 수 있는데 aria-label이란 property를 통해 해당 버튼의 역할을 설명해줄 수 있습니다.

 

<button aria-label="컬러 반전"></button>

 

3-3. States

  요소의 현재 상태에 대해 설명해주는 역할을 합니다. 상태에는 확장됨/축소됨, 펼쳐짐/펼쳐지지않음, 선택됨/선택되지않음 등이 있습니다.

 

  예를 들어, 아코디언 컴포넌트의 경우 따로 이를 통해 명시해주지 않으면 사용자가 해당 아코디언이 펼쳐졌는지 닫힌 상태인지 알기 어렵습니다. 이에 aria-expanded과 같은 속성을 사용해 스크린리더 및 사용자에게 현재 아코디언 컴포넌트의 펼쳐짐/펼쳐지지않음에 대한 설명을 할 수 있습니다.

 

4. 주의해야할 점

  HTML5 요소와 중복 사용하면 안됩니다다. 이를테면 이미 <button>태그를 사용했는데 role="button" 속성을 추가하는 경우입니다.

 

  native요소의 의미, 기능 변경을 하면 안됩니다. 예를 들어 <h1>태그에 role="button" 속성을 다는 것 처럼 본래 태그 요소의 의미를 중복하거나 번복해서는 안됩니다.

 

 

5. 참고하면 좋을 사이트

추가적인 세부 구현과 종류 들에 대해서는 다음 글 들을 읽어보면 도움이 될 것 같습니다.

 

레진엔터테인먼트사의 WAI-ARIA 가이드라인 : https://github.com/lezhin/accessibility/blob/master/aria/README.md

GitHub - lezhin/accessibility: 모두를 위한 설계. 레진 웹 접근성 가이드라인.

MDN의 ARIA states, properties에 대한 상세한 설명 : https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes

ARIA states and properties - Accessibility | MDN