WAI-ARIA 에 대해 알아보기

WAI-ARIA란?

HTML로 화면의 마크업을 구성할 때 고려해야 하는 부분 중 하나가 웹 접근성인 부분입니다. 

과거의 웹페이지는 정적인 정보성 화면이 주를 이루었습니다. 그래서 웹 표준을 지켜서 시멘틱 마크업과 접근성 요소들을 준수하면 웹 접근성 요소를 해결할 수 있었습니다. 

 

하지만 최근에는 자바스크립트, AJAX 등을 활용하여 비동기 데이터를 불러오거나 시간에 따라 정보가 자동으로 업데이트되는 경우 전맹 시각장애인들은 스크린리더 등 보조기기에서 업데이트 된 정보를 인지하기 어려움을 느끼게 됩니다. 

이러한 부분을 보완하기 위해 나온것이 WAI-ARIA입니다. 

 

WAI-ARIA는 W3C에 의해 제정된 웹 접근성을 위해 지원되는여러 가지 특성들을 대한 표준 기술 규격을 의미합니다. WAI는 ‘Web Accessibility Initiative’의 약자이며 ARIA는 ‘Accessible Rich Internet Applications’의 약자입니다. 웹 접근성을 사용하는 사람들의 스크린리더기와 보조기기에서의 상호 운용성을 향상하기 위해서 WAI-ARIA는 이를 개선하기 위해 웹 애플리케이션에 역할(Role), 속성(Property), 상태(State) 정보를 추가할 수 있도록 지원하고 있습니다.

 

Role(역할)

Role은 HTML 요소의 역할을 정의하여 표현하는데 WAI-ARIA를 사용하기 이전에 시멘틱 마크업을 사용해서 html태그 요소만으로 처리하는 게 가장 이상적입니다. 버튼은 button, 링크는 a 등 이미 존재하는 태그로 역할에 맞게 사용하면 불필요한 WAI-ARIA를 줄이고 보다 간결한 코드를 사용할 수 있습니다. 

<!-- X -->
<a href="#" role="button">버튼</a>

<!-- O -->
<button type="button">버튼</button>

보조기기는 두 가지 예제를 모두 '버튼'으로 간주하지만 첫 번째 예제의 경우 브라우저는 문맥 메뉴를 통해 링크와 관련된 기능(새 탭에서 링크 열기, 링크 주소 복사 등)을 제공하게 되고 사용자를 혼란스럽게 하며 첫 번째 예제에서 '버튼'이라는 설명을 들은 보조기기 사용자는 '스페이스' 키를 눌러 버튼 기능을 사용하려고 시도할 수 있습니다.

하지만 'a' 요소는 '엔터' 키만으로 실행할 수 있습니다. 

'button' 요소는 '엔터' 키와 '스페이스' 키로 실행할 수 있기 때문에 'a' 요소로부터 '버튼'이라는 설명을 들은 보조기기 사용자를 혼란스럽게 합니다. 결국 올바른 HTML의 선택은 사용자 경험과 접근성 측면에서 모두 중요합니다.

 

단 WAI-ARIA를 사용해야 하는 경우 올바르지 못한 WAI-ARIA는 사용하지 않는 편히 좋습니다. 

<!-- X : 키보드로 접근이 불가능 함 --> 
<div role="button">버튼</div>

<!-- O -->
<button type="button">버튼</button>

 

페이지에서 사용하는 태그의 역할이 잘못된 ARIA를 선언하면 안됩니다.

<!-- X -->
<button role="heading">버튼</button>

Property(속성)

Property(속성)은 해당 컴포넌트의 특징이나 상황을 정의하며 aria- 라는 접두사를 사용합니다.

 

State(상태)

State(상태)는 해당 컴포넌트의 상태 정보를 나타냅니다.

---

보다 자세한 Role, Property, state에 대해 알고 싶으시면 MDN WEB Docs를 참고하시면 됩니다. 

감사합니다.