설명 연결하기

이름과 설명의 차이

접근 가능한 이름은 요소가 무엇인지를 짧게 알려 주고, 접근 가능한 설명(accessible description)은 그 요소를 쓰는 데 필요한 추가 정보를 알려 줍니다. 화면낭독기는 보통 이름과 역할, 상태를 먼저 읽고 잠시 뒤에 설명을 읽습니다.

<label for="pw">비밀번호</label>
<input type="password" id="pw" aria-describedby="pw-hint">
<p id="pw-hint">8자 이상, 영문과 숫자를 섞어 주세요.</p>
<!-- 화면낭독기 예시: "비밀번호, 편집 창, 8자 이상, 영문과 숫자를 섞어 주세요." -->

이름은 짧게 유지하고 형식 안내·주의 사항·현재 값의 보충 정보는 설명으로 분리하면, 탐색할 때는 간결하게 듣고 필요할 때 자세한 내용을 들을 수 있습니다. 이름은 링크·폼 컨트롤 목록에도 표시되지만 설명은 표시되지 않습니다. 따라서 요소를 구분하는 데 꼭 필요한 정보는 설명이 아니라 이름에 넣습니다.

네 가지 수단 한눈에 보기

aria-describedby

aria-describedby는 설명이 되는 요소의 ID를 공백으로 구분해 나열합니다. 가장 널리 지원되고 가장 많이 쓰이는 설명 수단입니다. 참조한 요소는 화면에 보이는 텍스트인 것이 좋습니다. 보이는 사용자와 보조기술 사용자가 같은 정보를 받기 때문입니다.

<label for="birth">생년월일</label>
<input type="text" id="birth" inputmode="numeric"
       aria-describedby="birth-fmt birth-err" aria-invalid="true">
<p id="birth-fmt">예: 19900115 (8자리 숫자)</p>
<p id="birth-err" class="error">생년월일은 8자리 숫자로 입력해 주세요.</p>

• 순서: ID를 나열한 순서대로 이어 읽습니다. 위 예에서는 형식 안내 → 오류 메시지 순입니다.
• 숨겨진 요소 참조: 참조한 요소가 hidden이나 display: none이어도 텍스트가 설명에 들어갑니다. 다만 보이는 사용자에게는 정보가 없으므로, 보이는 텍스트를 참조하는 것을 기본으로 합니다.
• 구조는 사라짐: 참조한 요소의 목록·링크·제목 같은 구조는 전달되지 않고 하나의 평문으로 합쳐집니다. 긴 문단이나 링크가 들어 있는 내용은 aria-details가 더 알맞습니다.
• 변경 알림 아님: 설명 텍스트를 바꿔도 화면낭독기가 즉시 읽어 주지는 않습니다. 사용자가 다음에 그 요소로 이동할 때 새 설명을 듣습니다. 즉시 알려야 하면 라이브 리전을 함께 씁니다.

<label for="q">검색어를 입력하세요. 상품명, 브랜드, 모델 번호로 검색할 수 있습니다</label>
<input type="search" id="q">

<label for="q">검색어</label>
<input type="search" id="q" aria-describedby="q-help">
<p id="q-help">상품명, 브랜드, 모델 번호로 검색할 수 있습니다.</p>

aria-description

aria-description는 aria-label의 설명 버전으로, 참조할 요소 없이 문자열로 설명을 직접 지정합니다. 화면에는 보이지 않습니다.

<button aria-description="되돌릴 수 없습니다">계정 삭제</button>

보이지 않는 설명은 화면을 보는 사용자에게 주지 않는 정보를 보조기술 사용자에게만 주는 셈입니다. “되돌릴 수 없습니다”처럼 중요한 경고라면 모든 사용자가 볼 수 있게 화면에 표시하고 aria-describedby로 연결하는 것이 바람직합니다. aria-description은 색이나 아이콘으로 이미 시각적으로 드러난 정보를 짧게 보완할 때 알맞습니다.

aria-details

aria-details(WAI-ARIA 1.2)는 요소에 대한 자세한 설명이 페이지의 다른 곳에 있다는 것을 알립니다. aria-describedby와 달리 내용을 평문으로 읽지 않고, 화면낭독기가 “상세 정보 있음” 같은 안내를 한 뒤 사용자가 명령으로 그 위치로 이동해 구조(제목·목록·표·링크)를 그대로 탐색할 수 있게 합니다.

<figure>
  <img src="sales-2025.png" alt="2025년 분기별 매출 막대그래프"
       aria-details="sales-detail">
  <figcaption>2025년 분기별 매출</figcaption>
</figure>
<section id="sales-detail">
  <h3>그래프 해설</h3>
  <table>
    <caption>분기별 매출(억 원)</caption>
    <tr><th scope="col">1분기</th><th scope="col">2분기</th><th scope="col">3분기</th><th scope="col">4분기</th></tr>
    <tr><td>12</td><td>15</td><td>14</td><td>21</td></tr>
  </table>
</section>

• 짧은 요약은 alt나 aria-describedby로, 긴 해설은 aria-details로 나눠 함께 쓸 수 있습니다.
• 문서 편집기의 주석·댓글처럼 본문과 연결된 별도 콘텐츠를 가리킬 때도 씁니다. 이때 참조 대상에 role="comment"(ARIA 1.3 초안) 같은 역할을 함께 쓰는 경우가 있습니다.
• 화면낭독기별 지원 수준이 아직 고르지 않습니다. 상세 내용으로 가는 보이는 링크(“그래프 해설 보기”)를 함께 두면 지원 여부와 관계없이 찾아갈 수 있습니다.

title 속성

HTML의 title 속성은 다른 수단으로 이름이 정해지면 설명으로 쓰이고, 이름 후보가 하나도 없으면 이름으로 쓰입니다. 그러나 여러 한계가 있어 중요한 정보를 담는 수단으로는 적합하지 않습니다.

• 마우스를 올려야만 툴팁이 보이며, 키보드 포커스나 터치로는 보이지 않습니다.
• 툴팁이 뜨는 시간과 위치를 제어할 수 없고 확대 사용자에게는 잘리기 쉽습니다.
• 화면낭독기 설정에 따라 읽히지 않을 수 있습니다.
• 이름과 같은 값을 넣으면 “인쇄, 버튼, 인쇄”처럼 두 번 읽힙니다.

<a href="/notice" title="공지사항">공지사항</a>

<a href="/notice">공지사항</a>

마우스·키보드 모두에서 보이는 보충 설명이 필요하면 툴팁 패턴(tooltip + aria-describedby)이나 화면에 항상 보이는 안내 문구를 씁니다. 예외적으로 <iframe>의 title은 프레임의 이름을 주는 표준 수단이므로 반드시 넣습니다.

어떤 수단을 고를까

관련 레퍼런스: aria-describedby · aria-description · aria-details · aria-errormessage · WCAG 3.3.2 레이블 또는 지시사항 · WCAG 1.3.1 정보와 관계