ARIA 접근성 가이드

속성 · 이름·설명 · 전역

aria-roledescription

보조기술이 읽는 역할 이름을 사람이 읽기 쉬운 표현으로 바꿉니다. 역할 자체는 바뀌지 않습니다.

중급

한눈에 보기

구분
속성 (Property)
분류
이름·설명
값 형식
문자열 (string)
기본값
없음
적용 범위
모든 요소 (전역 속성)
HTML 대체
없음

설명

aria-roledescription은 화면낭독기가 역할을 소개할 때 쓰는 표현(예: “그룹”, “영역”)을 작성자가 정한 문구로 바꿉니다. role="group" aria-roledescription="슬라이드"라면 “그룹” 대신 “슬라이드”라고 읽힙니다. 역할의 의미와 동작은 그대로이고, 사람이 듣는 이름만 바뀝니다.

ARIA 역할로 정확히 표현되지 않는 위젯의 성격을 알려 줄 때 씁니다. APG의 캐러셀 패턴은 전체 영역에 aria-roledescription="carousel"(한국어 페이지라면 “캐러셀”), 각 장에 aria-roledescription="slide"(“슬라이드”)를 쓰는 방법을 안내합니다. 이 밖에 프레젠테이션 편집기의 “슬라이드”, 디자인 도구의 “레이어”처럼 해당 서비스에서 통용되는 이름을 줄 수 있습니다.

명세는 몇 가지 제약을 둡니다. 값은 비어 있지 않아야 하고, 유효한 역할(암묵적 역할 포함)이 있는 요소에만 써야 합니다. 역할 없는 <div>·<span>(generic)에는 쓸 수 없습니다. 또한 버튼에 “멋진 버튼”처럼 원래 역할 이름을 꾸미는 용도로 쓰면, 사용자가 익숙한 역할 이름(“버튼”)으로 조작 방법을 짐작하지 못하게 됩니다. 화면낭독기 사용자는 역할 이름을 듣고 어떤 키를 쓸지 판단하므로, 조작 요소(위젯)의 역할 이름을 바꾸는 것은 특히 신중해야 합니다.

값은 사용자에게 들리므로 페이지 언어로 씁니다. 한국어 페이지에서 "slide"라고 쓰면 한국어 음성이 영어 단어를 어색하게 읽을 수 있습니다. 점자 디스플레이에 표시할 짧은 형태가 따로 필요하면 aria-brailleroledescription(ARIA 1.3 초안)을 함께 쓸 수 있습니다.

테스트할 때는 개발자 도구 접근성 패널에서 역할(Role)은 원래 값으로 유지되는지, 화면낭독기가 원래 역할 대신 지정한 문구를 읽는지, 값이 페이지 언어와 맞는지 확인합니다.

값

값
값의미
문자열역할 대신 읽힐 사람이 읽기 쉬운 표현입니다. 비어 있거나 공백만 있으면 무시됩니다.

사용 예

캐러셀과 슬라이드

권장HTML
<section aria-roledescription="캐러셀" aria-label="이달의 이벤트">
  <div role="group" aria-roledescription="슬라이드" aria-label="1 / 3">…</div>
  <div role="group" aria-roledescription="슬라이드" aria-label="2 / 3" hidden>…</div>
</section>

<section>은 이름이 있으면 region 역할이 됩니다.

역할 없는 요소에 사용 (비권장)

비권장HTML
<div aria-roledescription="카드">…</div>

generic에는 쓸 수 없습니다. 유효한 역할(예: role="group", <article>)이 먼저 있어야 합니다.

조작 요소의 역할 이름을 꾸미는 경우 (비권장)

비권장HTML
<button type="button" aria-roledescription="빠른 실행">저장</button>

“버튼”이라는 역할 이름이 사라져 사용자가 Enter·Space로 누를 수 있다는 것을 짐작하기 어렵습니다.

직접 해 보기

체크 상자를 켜고 끄면 슬라이드 그룹의 aria-roledescription이 추가·제거됩니다. 역할(role="group")은 그대로입니다.

가을 신상품 20% 할인

10월 31일까지 진행합니다.

안내 예: 1 / 3, 슬라이드

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
aria-roledescription="슬라이드" 그룹으로 이동1 / 3, 슬라이드
같은 요소에서 속성을 제거한 경우1 / 3, 그룹
aria-roledescription="캐러셀" 영역으로 이동이달의 이벤트, 캐러셀

사용 지침

이렇게 쓰세요

  • 캐러셀·슬라이드처럼 ARIA 역할로 정확히 표현되지 않는 성격을 알릴 때 씁니다.
  • 유효한 역할이 있는 요소에만 씁니다.
  • 값은 페이지 언어로, 짧고 이해하기 쉽게 씁니다.

이렇게 쓰지 마세요

  • 빈 문자열이나 공백만 넣지 않습니다.
  • 역할 없는 <div>·<span>에 쓰지 않습니다.
  • 버튼·링크·체크 상자 등 조작 방법이 역할 이름에 담긴 위젯의 역할 이름을 꾸미지 않습니다.
  • 모든 요소에 습관적으로 붙이지 않습니다. 익숙한 역할 이름이 사라질수록 사용자가 헷갈립니다.

사용할 수 있는 역할

전역 속성이므로 모든 역할과 HTML 요소에 쓸 수 있습니다. 특히 다음 역할과 자주 함께 씁니다.

groupregionarticleapplication
aria-brailleroledescriptionaria-labelaria-labelledby

이 속성을 쓰는 패턴

캐러셀(슬라이드)

참고 자료