aria-details

설명

aria-details는 요소에 대한 자세한 설명이 담긴 영역을 가리킵니다. 복잡한 차트·도표의 데이터 표, 그림의 긴 해설, 문서 주석·댓글처럼 한 줄 문장으로 줄이기 어려운 내용을 연결할 때 씁니다.

aria-describedby와 가장 큰 차이는 내용을 문자열로 펼치지 않는다는 점입니다. aria-describedby로 연결한 내용은 접근 가능한 설명(accessible description)으로 계산되어 한 줄 텍스트로 읽히므로, 표나 목록, 링크가 들어 있으면 구조가 사라집니다. aria-details는 "자세한 내용이 있다"는 사실과 위치만 알려 주고, 사용자가 원할 때 그 영역으로 가서 표·목록·링크를 그대로 탐색하게 합니다.

명세는 참조 대상이 모든 사용자에게 보이도록 할 것을 권고합니다. 또한 aria-describedby와 함께 지정했을 때 접근성 API가 여러 설명 관계를 지원하지 못하면 aria-details가 우선합니다. ARIA 1.2에서 값은 ID 하나이며, ARIA 1.3 초안에서는 여러 ID를 쓸 수 있도록 바뀌고 있습니다.

보조기술 지원은 아직 제한적입니다. Chrome·Firefox는 관계를 노출하고, 최신 NVDA는 "세부 정보 있음"을 알린 뒤 NVDA+D 같은 명령으로 내용을 읽을 수 있으며, JAWS도 일부 지원합니다. 그러나 VoiceOver·TalkBack 등에서는 안내되지 않는 경우가 많습니다. 그래서 자세한 설명은 요소 바로 뒤에 보이게 배치하거나 "데이터 표 보기" 같은 링크를 함께 제공해, 속성을 지원하지 않는 환경에서도 찾을 수 있게 하는 것이 좋습니다.

검수할 때는 가리키는 ID가 존재하는지, 대상 영역이 화면에 보이는지(hidden이 아닌지), 짧은 설명으로 충분한데 굳이 aria-details를 쓰지 않았는지, 지원하지 않는 화면낭독기에서도 설명을 찾을 수 있는지 확인합니다.

값

사용 예

<figure>
  <img src="sales.png" alt="2024년 분기별 매출 막대그래프" aria-details="sales-data">
  <figcaption>분기별 매출 (단위: 억 원)</figcaption>
</figure>
<details id="sales-data">
  <summary>그래프 데이터 표 보기</summary>
  <table>
    <tr><th scope="col">분기</th><th scope="col">매출</th></tr>
    <tr><td>1분기</td><td>12</td></tr>
    <tr><td>2분기</td><td>18</td></tr>
  </table>
</details>

<button aria-describedby="pw-hint" aria-details="pw-rules">비밀번호 규칙</button>
<p id="pw-hint">8자 이상 입력합니다.</p>
<section id="pw-rules" aria-label="비밀번호 규칙 전체">
  <ul>
    <li>영문 대소문자, 숫자, 특수문자 중 3종류 이상</li>
    <li>아이디와 같은 문자열 4자 이상 포함 금지</li>
  </ul>
</section>

<!-- 비권장: 표가 한 줄 문자열로 펼쳐져 "분기 매출 1분기 12 2분기 18"처럼 읽힘 -->
<img src="sales.png" alt="분기별 매출" aria-describedby="sales-table">
<table id="sales-table">...</table>

화면낭독기에서는

사용 지침

사용할 수 있는 역할

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

관련 속성·패턴

참고 자료

• WAI-ARIA 1.2 명세: aria-details (새 창)
• WAI-ARIA 1.3 초안: aria-details (ID 목록 허용) (새 창)
• W3C WAI: 복잡한 이미지 튜토리얼 (새 창)
• MDN: aria-details (새 창)
• a11ysupport.io: aria-details 지원 현황 (새 창)