ARIA 접근성 가이드

역할 · 문서 구조

role="tooltip"

요소에 마우스를 올리거나 포커스하면 나타나는 짧은 설명 팝업입니다. 대상 요소에서 aria-describedby로 연결합니다.

중급

한눈에 보기

분류
문서 구조
대응 HTML
없음
이름 정하는 방법
콘텐츠, 작성자 (contents, author)
이름 필수
예
필수 상위 요소
없음
필수 하위 요소
없음

설명

tooltip은 요소에 대한 설명을 보여 주는 문맥 팝업입니다. 보통 마우스를 올린 뒤 잠시 후, 또는 요소가 키보드 포커스를 받으면 나타납니다. 대응 HTML 요소는 없으며, HTML title 속성의 기본 툴팁은 키보드·터치 사용자가 볼 수 없어 대안이 되지 못합니다.

연결 방법

명세는 tooltip이 표시되기 전 또는 표시되는 시점에 대상 요소에서 aria-describedby로 tooltip을 참조하도록 합니다. 그러면 화면낭독기는 대상 요소의 이름·역할 다음에 툴팁 내용을 설명으로 읽어 줍니다. 툴팁 내용이 버튼의 유일한 이름이라면(아이콘 버튼) aria-labelledby로 연결하는 방식도 쓰입니다.

지켜야 할 동작 (WCAG 1.4.13)

  • 닫을 수 있음: 포커스나 마우스를 옮기지 않고 Esc로 닫을 수 있어야 합니다.
  • 마우스로 옮겨 갈 수 있음: 마우스를 툴팁 위로 옮겨도 사라지지 않아야 합니다.
  • 유지: 포커스·마우스가 머무는 동안, 또는 사용자가 닫기 전까지 표시됩니다.

주의할 점

  • tooltip 자체는 포커스를 받지 않습니다. 안에 링크·버튼 등 조작 요소를 넣어야 한다면 tooltip이 아니라 비모달 dialog나 디스클로저 패턴을 씁니다.
  • 중요한 정보(필수 안내, 오류)를 툴팁에만 두지 않습니다. 터치 화면에서는 호버가 없습니다.
  • APG 툴팁 패턴은 아직 작업 중(work in progress)으로 표시되어 있어 구현 세부는 환경별로 확인이 필요합니다.

테스터 관점

키보드 포커스로도 툴팁이 나타나는지, Esc로 닫히는지, 마우스를 툴팁 위로 옮겨도 유지되는지, 화면낭독기가 대상 요소에서 툴팁 내용을 설명으로 읽는지 확인합니다.

함께 쓰는 속성

전역 속성(이름·설명 등)은 모든 역할에 쓸 수 있어 생략했습니다.

키보드 동작

키보드 동작
키동작
Tab대상 요소에 포커스가 가면 툴팁이 나타나고, 포커스가 떠나면 사라집니다.
Esc포커스를 옮기지 않고 툴팁을 닫습니다.

사용 예

설명 툴팁

권장HTML
<button type="button" aria-describedby="tip-save">저장</button>
<div role="tooltip" id="tip-save" hidden>Ctrl+S로도 저장할 수 있습니다.</div>

아이콘 버튼의 이름이 되는 툴팁

HTML
<button type="button" aria-labelledby="tip-print">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>
<div role="tooltip" id="tip-print">인쇄</div>

title 속성만 사용 (비권장)

비권장HTML
<span title="대출 가능 권수는 5권입니다">ⓘ</span>

포커스를 받지 않는 요소의 title은 키보드·터치 사용자가 볼 수 없습니다.

직접 해 보기

버튼에 마우스를 올리거나 Tab으로 포커스해 보세요. Esc로 닫을 수 있고, 마우스를 툴팁 위로 옮겨도 유지됩니다.

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
버튼에 포커스저장, 버튼, Ctrl+S로도 저장할 수 있습니다.

사용 지침

이렇게 쓰세요

  • 대상 요소에서 aria-describedby로 툴팁을 연결합니다.
  • 포커스로도 나타나고 Esc로 닫히게 만듭니다.
  • 마우스를 툴팁 위로 옮겨도 사라지지 않게 합니다.

이렇게 쓰지 마세요

  • 툴팁 안에 링크·버튼을 넣지 않습니다.
  • 중요한 정보를 툴팁에만 두지 않습니다.
  • title 속성을 툴팁 대용으로 쓰지 않습니다.
dialogbuttonstatus

이 역할을 쓰는 패턴

툴팁디스클로저(펼치기/접기)

참고 자료