countingalaxy

깃허브의 emoji-minesweeper 코드를 분석하다가 aria-live, aria-haspopup, …와 같은 속성 태그들이 등장해서, 무엇인지 찾고 정리하였다.

Accessible Rich Internet Applications

—> 접근 가능한 리치 인터넷 어플리케이션

웹 콘텐츠와 웹 어플리케이션 (그 중에서도 특히 Ajax와 Javascript를 사용하여 개발한 것들)을 제작할 때 적용할 수 있는 장애인을 위한 접근성 향상 방법을 정의

웹툰/웹소설 플랫폼인 레진에서도 WAI-ARIA 명세를 적용하고 있는데, 레진 기술 블로그에서 설명하는 적용 배경은 다음과 같다.

“ 페이지를 새로고침하지 않고 콘텐츠를 Ajax 방식으로 갱신했을 때 전맹 시각장애인은 어떤 응답을 받을 수 있을까? 갱신 사실을 보조기기에 즉시 알려줄 수 있으면 좋겠다. 비장애인이 화면에 등장하는 툴팁을 보면서 비밀번호를 바르게 생성(입력)하는 동안 시각 장애인은 아무런 안내도 받지 못한 상태로 잘못된 비밀번호를 계속해서 입력하고 있다.”

이러한 배경은 올해 초 나왔던 시각장애인을 위해 게임 어플리케이션을 개선한 사례를 떠올리게 만든다. 인턴액티브 시각장애인의 ‘호소’에 게임 개발사가 이틀만에 ‘응답’했다 : 네이버 뉴스

기술의 발달에 따라 점점 더 사용자와 상호작용 가능하게, 그리고 점점 더 우아하게 웹은 변화해가고 있지만, 그 우아함은 장애인들에게도 진정으로 ‘우아’한가? ARIA는 이런 물음에 응답하기 위해 나온 기술이라고 생각한다.

웹 개발자는 ARIA를 사용함으로써 내비게이션 랜드마크, JavaScript 위젯, 서식(form) 힌트, 에러 메시지 그리고 실시간 콘텐츠 업데이트 등에 접근성을 부여할 수 있다.

ARIA는 일련의 특정한 접근성 관련 속성(attribute)로 이루어져 있으며 모든 마크업에 적용 가능하지만, 특히 HTML에 최적화되어 있다.

cf) aria-* 속성 역시 data-* 속성과 같이 자바스크립트에서 getArrtibute() 메서드를 통해 접근할 수 있지만, 서로 스펙으로 추가된 목적 자체가 다르다.

data-* 속성의 경우는 커스텀 속성으로, 데이터 자체를 위함이다.

aria-* 속성의 경우는 웹 접근성을 위함이다.

즉, data 속성은 HTML 요소에 추가적으로 데이터를 저장할 수 있게 해 준다.

getAttribute() 메서드뿐아니라, dataset 속성을 통해 읽기, 쓰기 같은 접근이 가능하다.

<article
	id = "electriccars"
	data-columns="3"
	data-index-number="12314"
	data-parent="cars">
...
</article>

var artivcle = document.getElementById('electriccars');

article.dataset.columns // "3"
article.dataset.indexNumber	// "12314"
article.dataset.parent // "cars"

하지만 aria-* 속성은 장애인을 위한 웹 접근성 향상이 근본적인 목적이므로, 목적에 맞게 사용해야 한다.