[웹 접근성] ARIA의 기능

ARIA는 기존의 요소 의미 체계를 수정하거나 네이티브 의미 체계가 없는 요소에 대해서 의미 체계를 추가할 수 있다.

메뉴나 탭 패널처럼, HTML에는 전혀 존재하지 않는 의미 체계 패턴을 표현할 수도 있다.

ARIA를 사용하면 일반 HTML로 불가능한 위젯 형식의 요소를 만들 수 있을 떄까지 많다.

 

1. ARIA는 보조 기술 API에만 노출되는 여분의 레이블 및 설명 텍스트를 추가할 수 있다.

<button aria-label="screen reader only label"></button>

2. ARIA는 특정 영역을 제어하는 사용자설정 스크롤 바와 같은 표준 상위/하위 연결을 확장하는 요소 간의 의미 체계 관계를 표현할 수 있다.

<div role="scrollbar" aria-controls="main"></div>
<div id="main">
. . .
</div>

3. ARIA는 페이지 중 일부를 '라이브' 상태로 만들어 이런 부분이 바뀔 떄 즉시 보조 기술에 그 사실을 알릴 수 있다.

<div aria-live="true">
  <span>GOOG: $400</span>
</div>

 

ARIA 시스템의 핵심적인 특징중에 하나는 역할 모음이다.

접근성 관련 용어에서 역할이란 특정 UI 패턴을 축약해서 표시하는 말이다.

ARIA는 HTML요소에서 role 속성을 통해 사용할 수 있는 패턴의 어휘를 제공한다.

 

앞서 든 예에서 role="checkbox"를 적용했는데, 그 의미는 보조 기술에 해당 요소가 'checkbox' 패턴을 따라야 함을 알려주는 것이다.

즉, 요소가 확인 상태 또는 확인 안됨 상태를 가질 것이ㄹ는 점과 표준 HTML 확인란 요소와 마찬가지로 마우스나 스페이스바를 사용해서 상태를 전환할 수 있다는 점을 보장한다는 의미가 있다.

 

+ 스크린 리더에서는 주로 키보드를 사용하기 때문에 사용자 설정 위펫을 생성할 때, role 속성이 항상 tabindex 속성과 같은 자리에서 적용되도록 하는 것이 매우 중요하다.

이를 통해 키보드 이벤트가 알맞은 자리로 이동하고 포커스가 자신의 역할이 정확하게 전달되는 요소에 안착되는 것이다.