<HTML/CSS> ARIA란 무엇일까?

Playus 프로젝트를 진행하면서 페이지 디자인을 작성하던 도중, 프론트엔드 레포지토리에 Pull Request를 하기 위해 Approve를 하다가 CodeRabbit으로부터 새로운 Refactor Suggestion을 받았다.

이 ARIA 속성이라는 단어를 이전의 개발에서도 언뜻 스쳐지나갔던 기억이 있었지만, 막상 다시 나타나게 되니 제대로 이해가 되지 않아 ARIA에 대해 알아보게 되었다.

https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA

공식 문서에서 설명하는 ARIA란 Accessible Rich Internet Applications, 즉 접근 가능한 리치 인터넷 어플리케이션으로써 시각적으로 문제를 가진 사용자의 접근성을 위해 HTML을 통해 일반적으로 보조 기술이 알 수 없는 상호작용 및 흔히 쓰이는 어플리케이션 위젯에 필요한 정보를 제공하는 방식을 의미한다.

ARIA의 5가지 속성

1. 위젯 속성

•	UI 구성 요소(버튼, 체크박스, 슬라이더 등)의 상태나 속성을 정의한다.

예)

속성	설명
aria-autocomplete	입력값 자동완성 가능 여부 (예: 검색창)
aria-disabled	비활성화 상태 (true이면 클릭 불가 등)

2. 실시간 영역 속성:

•	콘텐츠가 실시간으로 바뀌는 경우, 스크린리더에게 알리는 방식을 정의한다.

예)

속성	설명
aria-live	콘텐츠가 변경될 때 스크린리더가 읽는 방식 (off, polite, assertive)
aria-atomic	전체 영역을 읽을지(true) 또는 일부만 읽을지(false)

3. 드래그 & 드롭 속성:

•	요소 간 드래그/드롭 인터페이스 구현 시 사용한다.

예)

속성	설명
aria-dropeffect	요소가 드롭 가능한 대상인지 (copy, move, link, execute, popup, none)
aria-grabbed	드래그 중인 항목인지 여부 (true, false)

4. 관계 속성:

•	요소 간 논리적 관계를 연결하여 스크린리더가 의미를 이해하게 돕는다.
예)

속성	설명
aria-activedescendant	현재 활성화된 자식 요소의 id를 지정
aria-controls	제어 대상의 ID를 지정

* 일부 전역 속성이 따로 존재하는데, 이는 ARIA 역할 적용 여부와 관계없이 모든 HTML 요소에 적용된다.

ARIA 사용 시의 주의사항

1. 기존 HTML 시맨틱 요소가 우선

•	원칙: 가능한 경우 HTML5의 시맨틱 태그(<button>, <nav>, <header> 등)를 먼저 사용할 것.
•	예: <div role="button"> 대신 <button> 사용
•	이유: 시맨틱 태그는 이미 브라우저와 보조기기에 기본 역할을 제공하며, 추가 설정이 필요 없습니다.

2. 불필요한 ARIA 사용 금지

•	ARIA 속성을 무조건 넣는 건 오히려 접근성을 해칠 수 있다.
•	role="presentation"을 잘못 사용하면 스크린리더가 요소를 완전히 무시할 수 있음

3. 적절한 role과 속성 조합

•	role에 따라 요구되는 ARIA 속성이 정해져 있다. (예: role="progressbar" → aria-valuenow, aria-valuemin, aria-valuemax)
•	누락 시 의미가 전달되지 않게 된다.