ARIA란?

프론트엔드 개발을 할 때 접근성에 대한 얘기를 많이 접하게 된다. 접근성은 신체적으로 불편한 사용자도 우리의 웹 프로덕트를 사용할 수 있을지를 나타낸다. 그리고 ARIA(Accessible Rich Internet Applications)는 이에 대한 표준을 제시한다.

 

HTML에는 사용자 접근성을 높이기 위해 사용되는 스크린리더 등의 기기와도 상호작용할 수 있도록 앞에 aria- 키워드가 붙는 속성이 따로 있다. 이해하기 쉬운 대표적인 속성으로는 role과 aria-label이 있다.

<button aria-label="저장" role="버튼">저장하기</button>

 

위처럼 ARIA 관련 속성을 갖고 있으면 스크린리더를 사용하고 있는 사용자가 해당 엘리먼트를 탭했을 때 스크린리더가 aria-label과 role의 값을 읽어준다. [저장 버튼]이라는 것을 사용자에게 알려주는 것이다.

 

ARIA 속성도 분류별로 있다. 이 HTML 태그에 뭐라고 적혀있는지, 이게 어떤 기능을 하는지, 체크박스나 펼칠 수 있는 컴포넌트라면 현재 체크돼있거나 펼쳐져있는 상태인지도 알릴 수 있다.

 

ARIA는 웹 개발을 할 때 절대 빠트려서는 안되는 중요한 요소다. 하지만 우리가 처음 HTML을 접할 땐 ARIA에 대해 배우지 않는다... 처음부터 접근성을 고려한 HTML 코드를 짜는 습관을 들지 않기 때문에 나중에 따로 챙기면서 이것저것 놓치는게 많다.

 

다행히 프론트엔드 생태계에는 ARIA까지 고려한 UI 컴포넌트 라이브러리들과 리소스가 많기 때문에 최대한 활용하면 ARIA도 자연스럽게 익힐 수 있을 것이다.