ARIA 및 비 네이티브 HTML 의미 체계 소개
지금까지는 기본 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 접근성 트리.](https://web.developers.google.cn/static/articles/semantics-aria/image/the-standard-dom-accessib-f1377436c8cbd.jpg?authuser=19&hl=ko)
![ARIA의 보강된 접근성 트리](https://web.developers.google.cn/static/articles/semantics-aria/image/the-aria-augmented-access-a0705fd66fc51.jpg?authuser=19&hl=ko)
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 역할 목록](https://web.developers.google.cn/static/articles/semantics-aria/image/a-list-all-available-ar-64bce9c9d6.jpg?authuser=19&hl=ko)
하지만 사양은 매우 밀집되어 있습니다. ARIA를 사용해 시작하는 것이 더 쉬움 권장사항 문서 를 확인해 보세요. 여기에는 사용 가능한 ARIA 역할과 속성
또한 ARIA는 HTML5에서 사용할 수 있는 옵션을 확장하는 이정표 역할도 제공합니다. 자세한 내용은 랜드마크 역할 디자인 패턴 확인하시기 바랍니다.