ARIA 소개

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

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

지금까지는 기본 HTML 요소를 사용하도록 권장해 왔습니다. 왜냐하면 이 요소는 기본 HTML 요소를 기본 제공 의미 체계를 지원하지만, 간단한 명령이 기본 HTML에서는 작동하지 않습니다. 예를 들어, 현재는 매우 일반적인 UI 구조인 팝업 메뉴에서 표준화된 HTML 요소를 사용합니다. 아니요 ' 사용자가 최대한 빨리 이에 대해 알아야 합니다.'라는 메시지가 표시됩니다.

이 강의에서는 HTML에서 표현할 수 없는 의미 체계를 표현하는 방법을 있습니다.

Web Accessibility Initiative의 Accessible Rich Internet Applications 사양 (WAI-ARIA 또는 ARIA)는 관리할 수 없는 접근성 문제가 있는 영역을 연결하는 데 유용합니다. 사용할 수 있습니다. 이 방법을 사용하면 요소가 접근성 트리로 변환되는 방식입니다. 한 가지 예시를 예로 들 수 있습니다

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

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

시력이 정상인 사용자에게는 적합하지만 스크린 리더는 이 요소가 체크박스로 되어 있기 때문에 저시력 사용자는 요소 전체가 있습니다.

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

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

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

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

ARIA를 사용하면 접근성을 미묘하게 (또는 근본적으로) 수정할 수 있지만 트리만 변경됩니다. ARIA 요소의 고유한 동작을 증가시키지 않습니다. Kubernetes에서 키보드 이벤트 리스너를 제공하여 포커스 가능 요소를 제공할 수 있습니다. 이는 여전히 실행할 수 있습니다

기본값을 다시 정의할 필요가 없다는 점을 알아야 합니다. 의미합니다 사용 여부와 관계없이 표준 HTML <input type="checkbox">는 요소는 추가 role="checkbox" ARIA 속성이 없어도 있습니다.

또한 일부 HTML 요소는 역할 및 속성을 사용할 수 있습니다 예를 들어 표준 <input type="text"> 요소에는 추가 역할/속성이 적용되지 않을 수 있습니다.

HTML 사양의 ARIA 참조 를 참조하세요.

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

ARIA로 무엇을 할 수 있나요?

체크박스 예에서 확인한 바와 같이 ARIA는 기존 요소 의미 체계를 네이티브 시맨틱이 없는 요소에 시맨틱을 추가할 수 있습니다. 또한 메뉴나 탭과 같이 HTML에 전혀 존재하지 않는 의미 패턴을 표현 패널을 닫습니다 ARIA를 사용하면 보통 불가능한 위젯 유형의 요소를 만들 수 있습니다 사용할 수 있습니다.

  • 예를 들어 ARIA는 보조 기술 API에 노출됩니다.
<button aria-label="screen reader only label"></button>
  • ARIA는 UI를 제어하는 맞춤 스크롤바와 같은 표준 상위/하위 연결 지정할 수도 있습니다
    <div role="scrollbar" aria-controls="main"></div>
    <div id="main">
    . . .
    </div>
  • ARIA는 페이지 일부를 '라이브' 상태로 만들 수 있고 즉시 사용자에게 보조 공학을 감지하게 됩니다.
    <div aria-live="polite">
      <span>GOOG: $400</span>
    </div>

ARIA 시스템의 핵심 요소 중 하나는 역할 모음입니다. 역할 는 특정 UI의 약식 표시기에 해당합니다. 학습합니다. ARIA는 role를 통해 사용할 수 있는 패턴의 어휘를 제공 속성을 지정할 수 있습니다.

이전 예에서 role="checkbox"를 적용할 때는 요소가 '체크박스'를 따라야 하는 보조 기술 학습합니다. 그 것이 체크박스는 선택하든 아니든 마우스나 스페이스바를 사용하여 상태를 전환할 수 있는지 확인하세요. 체크박스와 같은 표준 HTML 체크박스 요소를 사용할 수 있습니다.

실제로 키보드 상호작용이 스크린 리더에서 매우 두드러지게 기능하기 때문에 맞춤 위젯을 만들 때 role 속성은 항상 tabindex와 동일한 위치에 적용됩니다. 속성; 이렇게 하면 키보드 이벤트가 올바른 위치로 이동하고 요소가 그 역할을 정확하게 전달되는 요소에 놓입니다.

ARIA 사양에서는 role 속성 및 관련 ARIA에 가능한 값의 분류 이러한 역할과 함께 사용할 수 있습니다. 최고 ARIA 역할 및 속성의 작동 방식에 대한 명확한 정보 출처 브라우저 및 브라우저에서 지원하는 방식으로 사용하는 방법에 대해 보조 기술.

사용 가능한 모든 ARIA 역할 목록

하지만 사양은 매우 밀집되어 있습니다. ARIA를 사용해 시작하는 것이 더 쉬움 권장사항 문서 를 확인해 보세요. 여기에는 사용 가능한 ARIA 역할과 속성

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