용어 사전 coding 용어 페이지

ARIA 속성

스크린 리더 등에 의미와 상태를 보충해 주는 접근성 속성들

aria-attributes #html#accessibility#frontend

English version

다른 이름

ariaaria attributesaria 속성

선수 개념

관련 개념

시맨틱 HTML 접근성 tabindex

핵심 아이디어

ARIA 속성은 시맨틱 정보가 부족할 때 요소의 역할, 상태, 설명을 보조기기에 전달하기 위해 추가하는 속성입니다. aria-label, aria-labelledby, aria-live, aria-expanded 같은 값이 대표적입니다.

중요한 원칙은 "ARIA가 시맨틱 HTML을 대신하지 않는다"는 점입니다. 먼저 적절한 태그를 고르고, 그래도 부족한 부분만 ARIA로 보완해야 구조가 더 자연스럽고 안전합니다.

이 블로그에서의 역할

Mathbong의 JavaScript/UI 글에서는 버튼 상태, 모달 열림 여부, 라이브 피드백 메시지를 설명할 때 ARIA 속성이 반복해서 등장합니다. 시맨틱 HTML과 짝으로 읽는 접근성 허브 개념입니다.

이 개념을 다루는 글

[JavaScript 시리즈 13편] UI 코드에서 접근성과 시맨틱 HTML 의식하기 스크린 리더와 키보드 사용자를 배려하는 시맨틱 마크업, aria 속성, 포커스 제어 기법을 배웁니다.[JavaScript Series 13] Build Accessible UIs with Semantic HTML and JavaScript Learn semantic markup, ARIA attributes, and focus control techniques that serve screen-reader and keyboard users.