ARIA 접근성 가이드

속성 · 이름·설명 · 전역

aria-description

참조할 요소 없이 문자열로 직접 접근 가능한 설명을 붙입니다. WAI-ARIA 1.3 초안에 추가된 속성입니다.

중급ARIA 1.3 (초안)

한눈에 보기

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

설명

aria-description은 aria-describedby의 문자열 버전입니다. aria-label이 이름을 문자열로 직접 정하듯, 이 속성은 설명을 문자열로 직접 정합니다. 화면에 설명 텍스트를 따로 두지 않고도 보조기술에 부가 정보를 줄 수 있습니다.

WAI-ARIA 1.3 작업 초안 속성입니다

이 속성은 현재 권고안(WAI-ARIA 1.2)에는 없고 WAI-ARIA 1.3 작업 초안(Working Draft)에 정의되어 있습니다. 최신 크로미움 계열 브라우저와 Firefox, Safari는 이 속성을 접근성 API로 노출하고 NVDA·JAWS·VoiceOver 최신 버전도 대체로 읽지만, 브라우저·화면낭독기 조합과 버전에 따라 읽히지 않을 수 있습니다. 중요한 정보는 이 속성에만 의존하지 마세요.

쓸 만한 경우는 화면에 보여 줄 필요가 없는 짧은 보충 정보입니다. 예를 들어 게시글 목록의 “새 글” 표시처럼 시각적으로는 아이콘이나 색으로 충분히 드러나지만 화면낭독기 사용자에게는 말로 알려야 하는 정보, 또는 버튼의 결과를 한 문장으로 덧붙이는 경우입니다.

하지만 화면에 보이지 않는 설명은 시력이 있는 사용자, 인지장애가 있는 사용자, 음성 인식 사용자에게는 전달되지 않습니다. 설명이 모든 사용자에게 도움이 된다면 보이는 텍스트로 쓰고 aria-describedby로 연결하는 편이 낫습니다. 같은 요소에 aria-describedby와 aria-description이 함께 있으면 aria-describedby가 우선합니다.

테스트할 때는 사용하는 브라우저·화면낭독기 조합에서 설명이 실제로 읽히는지, 개발자 도구 접근성 패널의 Description에 값이 나타나는지 확인합니다. 설명이 읽히지 않아도 기능을 이해하고 조작하는 데 문제가 없어야 합니다.

값

값
값의미
문자열요소의 접근 가능한 설명이 되는 텍스트입니다.

사용 예

시각적 표시를 말로 보충

HTML
<a href="/post/128" aria-description="새 글">10월 정기 점검 안내</a>

화면에는 “N” 배지나 색으로 새 글임을 표시하고, 배지 자체는 aria-hidden="true"로 숨깁니다.

보이는 텍스트가 있다면 aria-describedby

모든 사용자에게 필요한 설명은 화면에 보이게 쓰고 참조합니다.

권장HTML
<button type="button" aria-describedby="del-note">계정 삭제</button>
<p id="del-note">삭제하면 30일 뒤 모든 데이터가 지워집니다.</p>

핵심 정보를 숨긴 설명에만 둔 경우 (비권장)

비권장HTML
<button type="button" aria-description="누르면 결제가 바로 진행됩니다">확인</button>

결제가 진행된다는 사실은 모든 사용자에게 중요합니다. 버튼 이름(“결제하기”)이나 보이는 안내로 제공합니다.

직접 해 보기

설명 문구를 입력하면 링크의 aria-description 값이 바뀝니다. 화면에는 아무 변화가 없다는 점에 주목하세요.

계산된 설명: 새 글

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
aria-description="새 글" 링크에 포커스10월 정기 점검 안내, 링크, 새 글
속성을 지원하지 않는 환경에서 같은 링크에 포커스10월 정기 점검 안내, 링크

사용 지침

이렇게 쓰세요

  • 시각적으로는 드러나지만 텍스트가 없는 짧은 보충 정보에 씁니다.
  • 설명이 읽히지 않아도 기능을 이해할 수 있게 설계합니다.
  • 대상 브라우저·화면낭독기 조합에서 실제로 읽히는지 확인합니다.

이렇게 쓰지 마세요

  • 모든 사용자에게 필요한 안내를 이 속성에만 넣지 않습니다. 보이는 텍스트와 aria-describedby를 씁니다.
  • 이름을 대신하는 용도로 쓰지 않습니다. 이름은 aria-label 등으로 정합니다.
  • 긴 문장이나 여러 문단을 넣지 않습니다.

사용할 수 있는 역할

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

linkbuttonarticlelistitemregionimg
aria-describedbyaria-labelaria-details

참고 자료