WAI-ARIA란?

마우스와 같은 포인팅 장비를 사용하기 힘든, 스크린 리더를 사용하는 사용자들에게 동적 컨텐츠, JS, ajax, react 등과 같이 페이지를 새로고침하지 않아도 페이지의 내용과 데이터가 바뀌는 영역에 역할, 속성, 상태 정보를 추가하여 동적인 컨텐츠에 보다 원활하게 접근하고 페이지에 접근성을 높여 여러 사용자들에게 원활한 페이지 이동을 도와준다.

버튼을 클릭하여 페이지 새로고침이나 링크 이동으로 페이지가 전환되는 것이 아닌 컨텐트 내용이나 구조가 바뀌는 상황에서 페이지 전황 상태나 정보를 WAI-ARIA로 알려준다.

또한, WAI-ARIA는 단순 HTML로 표현할 수 없는 의미들을 태그에 부여하여 시각적인 불편함이 있는 사용자들에게 일반적인 구조의 HTML에서 필요한 요소에 적절한 정보를 전달받아 원활하게 페이지 탐색 및 이용을 하도록 도와준다.

예제

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

예를 들어 위와 같은 태그를 살펴보면 li태그에 .checkbox클래스를 부여하여 CSS상으로 체크박스 형태의 모양을 만들어 사용할 때 시각적 불편함이 없는 사용자는 CSS화면을 보고 해당 영역이 체크박스임을 인지할 수 있지만, 스크린 리더로 화면을 탐색해야 하는 경우 위의 CSS정보를 읽을 수 없다.

이때 스크린 리더 사용자들을 위한 방법이 WAI-ARIA를 이용하는 것이다.

aria-current

element 인터페이스의 ariaCurrent 속성은 aria-current 속성의 값을 반영하여 컨테이너 또는 관련 요소 집합 내에서 현재 항목을 나타내는 요소를 나타낸다.

Value

• "page" : 페이지 세트내의 현재 페이지를 나타낸다.
• "step" : 프로세스 내의 현재 단계를 나타낸다.
• "location" : 현재위치(ex. 이동 경로 계층 구조의 현재 페이지)를 나타낸다.
• "date" : 날짜 모음 내의 현재 날짜를 나타낸다.
• "time" : 시간 집합 내에서 현재 시간을 나타낸다.
• "true" : 세트 내의 현재 항목을 나타낸다.
• "false" : 세트 내의 현재 항목을 나타내지 않는다.

web apis reference
mdn reference