ARIA 소개

ARIA 및 비 네이티브 HTML 의미 체계 소개

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

네이티브 HTML 요소는 포커스, 키보드 지원, 기본 제공 시맨틱스를 제공하기 때문에 지금까지는 네이티브 HTML 요소를 사용하도록 권장했지만, 간단한 레이아웃과 네이티브 HTML로는 작업을 수행하지 못하는 경우가 있습니다. 예를 들어 현재 매우 일반적인 UI 구조인 팝업 메뉴에 대해 표준화된 HTML 요소는 없습니다. '사용자가 최대한 빨리 이 사실을 알아야 합니다'와 같은 시맨틱 특성을 제공하는 HTML 요소도 없습니다.

이 강의에서는 HTML이 단독으로 표현할 수 없는 의미 체계를 표현하는 방법을 살펴보겠습니다.

Web Accessibility Initiative의 Accessible Rich Internet Applications 사양 (WAI-ARIA 또는 ARIA)은 네이티브 HTML로 관리할 수 없는 접근성 문제가 있는 영역을 연결하는 데 적합합니다. 이 라이브러리는 요소가 접근성 트리로 변환되는 방식을 수정하는 속성을 지정할 수 있도록 허용하는 방식으로 작동합니다. 예를 하나 살펴보겠습니다.

다음 스니펫에서는 목록 항목을 일종의 맞춤 체크박스로 사용합니다. CSS '체크박스' 클래스는 필요한 시각적 특성을 요소에 부여합니다.

<li tabindex="0" class="checkbox" checked>
    Receive promotional offers
</li>

이 기능은 시력이 정상인 사용자에게는 적합하지만 스크린 리더는 요소가 체크박스임을 나타내지 않으므로 저시력 사용자는 요소를 완전히 놓칠 수 있습니다.

하지만 ARIA 속성을 사용하면 요소에 누락된 정보를 제공하여 스크린 리더가 제대로 해석할 수 있도록 할 수 있습니다. 여기에서는 rolearia-checked 속성을 추가하여 요소를 체크박스로 명시적으로 식별하고 기본적으로 선택되어 있음을 지정합니다. 이제 목록 항목이 접근성 트리에 추가되고 스크린 리더가 이를 체크박스로 올바르게 보고합니다.

<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
    Receive promotional offers
</li>

ARIA는 표준 DOM 접근성 트리를 변경하고 늘리는 방식으로 작동합니다.

표준 DOM 접근성 트리
ARIA의 보강된 접근성 트리입니다.

ARIA를 사용하면 페이지에 있는 모든 요소의 접근성 트리를 미묘하게 (또는 근본적으로) 수정할 수 있지만, ARIA가 유일하게 변경되는 부분은 바로 ARIA입니다. ARIA는 요소의 고유한 동작을 보강하지 않습니다. 요소를 포커스 가능하게 만들거나 키보드 이벤트 리스너를 제공하지 않습니다. 이는 여전히 개발 작업의 일부입니다.

기본 시맨틱을 재정의할 필요가 없다는 점을 이해하는 것이 중요합니다. 표준 HTML <input type="checkbox"> 요소는 용도와 관계없이 추가 role="checkbox" ARIA 속성이 없어도 올바르게 표시됩니다.

또한 특정 HTML 요소에는 사용할 수 있는 ARIA 역할과 속성에 제한이 있습니다. 예를 들어 표준 <input type="text"> 요소에는 어떠한 역할/속성도 추가로 적용되지 않을 수 있습니다.

자세한 내용은 HTML 사양의 ARIA를 참고하세요.

ARIA가 제공하는 다른 기능을 살펴보겠습니다.

ARIA로 무엇을 할 수 있나요?

체크박스 예에서 보았듯이 ARIA는 기존 요소 의미 체계를 수정하거나 네이티브 의미 체계가 없는 요소에 의미 체계를 추가할 수 있습니다. 메뉴 또는 탭 패널과 같이 HTML에는 전혀 존재하지 않는 시맨틱 패턴도 표현할 수 있습니다. ARIA를 사용하면 일반 HTML로는 불가능한 위젯 유형의 요소를 만들 수 있는 경우가 많습니다.

  • 예를 들어 ARIA는 보조 기술 API에만 노출되는 부가적인 라벨 및 설명 텍스트를 추가할 수 있습니다.
<button aria-label="screen reader only label"></button>
  • ARIA는 특정 영역을 제어하는 맞춤 스크롤바와 같이 표준 상위/하위 연결을 확장하는 요소 간의 의미론적 관계를 표현할 수 있습니다.
    <div role="scrollbar" aria-controls="main"></div>
    <div id="main">
    . . .
    </div>
  • 또한 ARIA는 페이지의 일부를 '라이브' 상태로 만들어 변경사항이 있는 경우 즉시 보조 기술에 알립니다.
    <div aria-live="polite">
      <span>GOOG: $400</span>
    </div>

ARIA 시스템의 핵심 측면 중 하나는 역할 컬렉션입니다. 접근성 관련 용어의 역할은 특정 UI 패턴의 약식 표시기와 같습니다. ARIA는 HTML 요소에서 role 속성을 통해 사용할 수 있는 패턴의 어휘를 제공합니다.

이전 예에서 role="checkbox"를 적용할 때는 보조 기술에 요소가 '체크박스' 패턴을 따라야 한다고 알려주었습니다. 즉, 선택된 상태 (선택됨 또는 선택되지 않음)가 보장되며 표준 HTML 체크박스 요소와 마찬가지로 마우스나 스페이스바를 사용하여 상태를 전환할 수 있습니다.

실제로 키보드 상호작용은 스크린 리더 사용 시 두드러지게 나타나므로 맞춤 위젯을 만들 때 role 속성이 항상 tabindex 속성과 동일한 위치에 적용되도록 하는 것이 매우 중요합니다. 이렇게 하면 키보드 이벤트가 올바른 위치로 이동하고 포커스가 요소에 위치할 때 그 역할이 정확하게 전달됩니다.

ARIA 사양role 속성 및 이러한 역할과 함께 사용할 수 있는 관련 ARIA 속성에 가능한 값의 분류를 설명합니다. 이는 ARIA 역할 및 속성이 함께 작동하는 방식과 브라우저 및 지원 기술에서 지원하는 방식으로 이를 사용하는 방법에 관한 확정적인 정보를 확인할 수 있는 최고의 소스입니다.

사용 가능한 모든 ARIA 역할의 목록입니다.

하지만 사양이 매우 복잡하므로 시작하기에 더 쉬운 방법은 ARIA 작성 사례 문서를 확인하는 것입니다. 이 문서에는 사용 가능한 ARIA 역할 및 속성 사용에 관한 권장사항이 설명되어 있습니다.

또한 ARIA는 HTML5에서 사용할 수 있는 옵션을 확장하는 이정표 역할을 제공합니다. 자세한 내용은 랜드마크 역할 디자인 패턴 사양을 참조하세요.