WAI-ARIA는 무엇인가?

2021-05-13


WAI-ARIA는 Web Accessibility Initiative-Accessible Rich Internet Applications의 약자로 W3C에서 작성한 기술 사양으로, HTML 속성을 보완하면서 웹사이트가 웹애플리케이션의 접근성을 향상시키는 방법을 명시하고 있다. 사용자가 사이트(혹은 응용프로그램)의 내용을 더 잘 이해할 수 있도록 브라우저와 보조기술이 사용할 수 있는 더 많은 컨텍스트를 추가하는데 도움이 되는 기술 사양이다.

WAI-ARIA가 어떤 의도로 작성되었는지 간단하게 알아보자.

완전히 새로운 문제의 시작

웹애플리케이션이 더 복잡해지고 다이나믹해지기 시작하면서 새로운 접근성 기능과 문제가 나타나기 시작했다.

예를 들어 HTML5는 공통 페이지 기능(<nav>, <footer> 등)을 정의하기 위해 여러 의미 요소를 도입했다. 이러한 기능을 사용하기 전에는 개발자들이 단순히 ID나 클래스가 있는 <div>를 사용했을 뿐(예: <div class=“nav”>)이지만, 메인 내비게이션과 같은 특정 페이지 기능을 프로그램적으로 쉽게 찾을 수 있는 쉬운 방법이 없었기 때문에 문제가 있었다.

초기 솔루션은 페이지 상단에 하나 이상의 숨겨진 링크를 추가하여 탐색 (또는 기타)에 연결하는 것이었다. 예를 들면 다음과 같다.

<a href="#hidden" class="hidden">Skip to navigation</a>

하지만 이는 여전히 정확한 해결책이 아니면, 스크린리더가 페이지를 위에서 부터 순차적으로 읽어내려가는 구조일 경우에만 유용했다.

또 다른 예시로, 웹 애플리케이션이 발전하면서 date picker같은 복잡한 폼 요소가 널리 사용되었는데 HTML5는 이러한 기능을 위해 <input type=“date”> <input type=“range”>를 지원했지만 브라우저에 따른 지원이 상이했고 이러한 요소를 스타일하는 것은 어려웠다. 결과적으로 많은 개발자들이 JavaScript(혹은 javascript로 만들어진 라이브러리)를 사용해 시멘틱하지 않은 요소로 이루어진 폼이나 요소들을 만들게 되었다.

이런종류의 개발은 시각적으로 문제가 없지만, 스크린리더는 이것들이 무엇인지 전혀 이해할 수 없었으며 스크린리더 사용자는 의미없이 복잡한 요소가 있다는 말만 들을 수 밖에 없었다.

WAI-ARIA의 등장

WAI-ARIA는 W3C가 작성한 사양으로, 접근성이 부족한 HTML에 추가적인 의미를 제공해 접근성을 향상시킬 수 있는 추가 HTML속성을 정의하고 있다. 이 사양에는 3가지 주요 특징이 정의되어 있다.

  1. Role Role은 요소가 무엇인지 혹은 무엇을 하는지를 정의한다. 이들 중 대다수는 HTML5 구조요소의 의미를 복사한것으로 랜드마크 role이라고 할 수 있다. 예로, role=“navigation”<nav>와 동일하고, role=“complementary”<aside>와 동일하다. 이러한 랜드마크 role외에 UI에서 자주 쓰이는 페이지 구조를 설명하는 role들도 있다. role=“banner”, role=“search”, role=“tab group”, role=“tab”등이 그것이다.

Accessible Rich Internet Applications (WAI-ARIA) 1.1 여기에서 다양한 롤의 리스트를 볼 수 있다.

  1. Properties Property는 요소에 추가적인 의미나 시멘틱을 부여하는 데 사용할 수 있는 속성을 정의한다. 예를들어, aria-required=“true”는 해당 요소(주로 input)가 필수로 입력되어야 함을 나타내고, aria-labelledby="label" 을 사용하면 해당 요소의 ID를 가지고 다른 곳에서 라벨로 참조할 수 있다.

아래 예에서 각 입력 필드는 자체 개별 라벨과 그룹 라벨로 레벨이 지정된다. (Billing - Name, Billing - Address)

<div id="myBillingId">Billing</div>
<div>
    <div id="myNameId">Name</div>
    <input type="text" aria-labelledby="myBillingId myNameId"/>
</div>
<div>
    <div id="myAddressId">Address</div>
    <input type="text" aria-labelledby="myBillingId myAddressId"/>
</div>
  1. States 요소의 현재 상태를 나타내는 특수한 속성을 정의한다. 예를 들어, aria-disabled="true"와 같이 스크린리더가 폼의 인풋이 비활성화 되었음을 알려준다. property는 앱의 라이프사이클 동안 변하지 않는 반면에 상태는 변할 수 있으며 일반적으로 Javascript를 통해 프로그래밍방식으로 변경될 수 있다.

WAI-ARIA의 속성의 중요한 점은 브라우저의 접근성 API (스크린리더가 사용하는)에 의해 노출되는 정보를 제외하고는 웹페이지나 어플리케이션의 구조에 대해 어떤 영향도 주지 않는다는 점이다.

WAI-ARIA는 어디서 지원되는가?

WAI-ARIA 사양에는 많은 특징이 있으며, 어떤 기능이 어디에서 지원되는지 명확히 찾기는 어렵다. 대체적으로 WAI-ARIA는 운영체제와 브라우저와 스크린리더를 사용하여 지원된다.

스크린리더를 사용하기 위해서는, 운영체제가 접근성 API를 사용하는 브라우저를 실행해야 한다. 대부분 유명 OS는 스크린리더를 사용할 수 있는 브라우저를 포함하고 있다. 그다음으로 브라우저가 해당하는 ARIA 피처를 지원하는지 파악할 필요가 있다.

브라우저 지원은 대체적으로 좋은 편이다. 최신 Can I use… Support tables for HTML5, CSS3, etc 에 따르면 글로벌 브라우저 지원 범위는 98.29%이다.

ARIA피쳐에 대한 스크린리더 지원은 아직 많이 못미치고 있으나 계속 증가하는 추세이다. WAI-ARIA - Screen reader compatibility · PowerMapper Software