아리아란?

ARIA는 W3C의 WAI(Web Accessibility Initiative)에서 설계한 사양인 Accessible Rich Internet Applications의 약자입니다. 그 목적은 웹 사이트 또는 웹 응용 프로그램의 접근성과 의미 체계를 보완하는 것입니다.

실제로 이는 HTML 요소에 aria- 특성을 추가하여 달성됩니다. (대부분 레이아웃이나 브라우저 기능과 관련이 없지만 보조 기술에 대한 추가 정보를 제공합니다.)

왜 ARIA에 관심을 가져야 합니까?

이름에서 알 수 있듯이 ARIA는 웹사이트와 웹앱의 접근성을 높이기 위한 것입니다. 나는 우리가 HTML의 의미론에 관심을 가져야 하는 이유에 대해 썼습니다.

시맨틱 HTML 작성

Poulami Chakraborty ・ 9월 13일 ・ 3분 읽기

#html #webdev #beginners

그러나 네이티브 HTML이 모든 사용 사례 또는 오늘날 웹앱의 동적, 대화형 또는 복잡한 레이아웃에 충분하지 않은 경우가 있습니다. 이는 단순한 팝업에서 새로운 상호 작용 패턴에 이르기까지 다양합니다. 이것은 aria- 속성이 구출되는 곳입니다.

aria-가 해결하는 데 사용되는 몇 가지 일반적인 문제는 다음과 같습니다.

보조 기술에서 더 나은 탐색을 위해 표지판/랜드마크 추가

구성 요소의 기능 전달

구성 요소의 상태 및 속성 전달

동적 콘텐츠의 변경 사항 표시

ARIA는 무엇을 할 수 있습니까?

ARIA는 기존 요소 의미 체계를 수정하거나 기본 의미 체계가 존재하지 않는 요소에 의미 체계를 추가할 수 있습니다.

ARIA 속성은 역할, 속성 및 상태의 세 가지 유형이 될 수 있습니다.

1. 역할

역할은 요소가 무엇인지 정의합니다. 대부분의 HTML 요소에는 AT(보조 기술)에 제공되는 기본 역할이 있습니다. 예를 들어 <button>의 기본 역할은 "버튼"이고 <form>의 기본 역할은 "양식"입니다. aria-role 를 사용하여 AT에게 비의미적 태그의 기능 또는 역할을 알릴 수 있습니다.

역할은 사용자가 페이지를 쉽게 탐색할 수 있도록 화면 판독기가 사용하는 중요한 정보입니다.

예: 탭을 만들 때

<ul role="tablist">
    <li class="active" role="tab">
          <a href="#home">Home</a>
    </li>
    <li role="explore">
          <a href="#explore">Home</a>
    </li>
</ul>

메모

aria-role는 시맨틱 HTML의 대체물로 사용해서는 안 됩니다!

ARIA를 사용하여 기본 HTML 역할을 복제할 필요가 없습니다. 예: <button role="button">

HTML로 기본 의미 체계를 재정의하지 마세요(예: <h2 role ="tab">Home</h2> ). 이(잘못된 ARIA 사용)는 ARIA를 사용하지 않는 것보다 접근성에 더 해롭습니다.

Here is a list of WAI-ARIA defined roles .

2. 상태 및 속성

ARIA 상태 및 속성은 특정 구성 요소와 상호 작용하는 방법에 대한 추가 정보를 사용자에게 제공합니다.

ARIA 상태는 축소되거나 확장된 경우(aria-expanded = "false" ) 또는 양식 필드가 비활성화된 경우(aria-disabled="true" )와 같은 요소의 현재 상태를 설명합니다. 본질적으로 동적이며 일반적으로 JavaScript로 업데이트됩니다.

ARIA 속성은 표준 HTML에서 지원되지 않는 추가 의미 체계를 제공하는 데 사용됩니다. 예: aria-haspopup="true"를 버튼에 추가하면 버튼을 클릭하면 팝업이 표시된다는 사실을 TA에 알릴 수 있습니다. aria-live를 동적으로 업데이트되는 요소(채팅, 콘텐츠 새로고침 등)에 적용하면 화면 판독기가 업데이트된 콘텐츠를 읽게 됩니다(정확한 동작은 'aria-live' 값에 따라 다름).

"상태"와 "속성"은 미묘한 차이가 있는 유사한 기능을 나타냅니다. 속성은 종종 상태 값보다 응용 프로그램 수명 주기 전체에서 변경될 가능성이 적습니다.

상태와 속성 모두 aria 접두사가 붙은 마크업 속성으로 표시됩니다.

Here is a list of all WAI-defined states and properties . 그 중 일부는 global 이고 다른 것들은 특정 역할과 함께 사용됩니다 - W3C has a table with how the ARIA roles and attributes work together .

언제 ARIA를 사용하지 않아야 합니까?

사용을 가능한 한 적게 유지해야 합니다. 기본 HTML로 문제를 해결할 수 없는 경우에만 ARIA를 사용합니다. Here is W3C guide on using ARIA .