1.4.13 호버 또는 포커스 시 나타나는 콘텐츠

요구 사항

포인터 호버나 키보드 포커스로 추가 콘텐츠가 나타났다가 사라지는 경우, 다음을 모두 만족해야 합니다.

• 닫기 가능(Dismissible): 포인터나 포커스를 옮기지 않고도 추가 콘텐츠를 닫을 수 있어야 합니다(보통 Esc 키). 단, 추가 콘텐츠가 입력 오류를 알리거나 다른 콘텐츠를 가리지 않는 경우는 제외합니다.
• 호버 가능(Hoverable): 호버로 나타난 콘텐츠라면, 포인터를 그 추가 콘텐츠 위로 옮겨도 사라지지 않아야 합니다.
• 지속(Persistent): 호버나 포커스가 없어지거나, 사용자가 닫거나, 정보가 더 이상 유효하지 않을 때까지 계속 보여야 합니다(일정 시간 뒤 저절로 사라지면 안 됩니다).

예외: title 속성의 기본 툴팁처럼 브라우저가 표시를 제어하고 작성자가 바꾸지 않은 경우.

왜 필요한가요

화면 확대 사용자는 툴팁을 읽으려고 포인터를 툴팁 쪽으로 옮겨야 하는데, 그때 툴팁이 사라지면 읽을 수 없습니다. 반대로 툴팁이 확대된 화면의 콘텐츠를 가렸는데 닫을 수 없으면 작업을 계속할 수 없습니다.

도움받는 사용자

• 저시력 사용자(화면 확대 사용자)
• 운동장애가 있는 사용자(포인터 조작이 어려운 사용자)
• 인지·학습 장애가 있는 사용자
• 키보드 사용자

적용 방법

• Esc 키로 툴팁·호버 메뉴를 닫는 기능을 넣습니다.
• 트리거와 툴팁 사이에 틈이 없게 배치하거나, 포인터가 툴팁 위에 있는 동안 닫지 않게 합니다.
• 시간 제한으로 자동으로 닫지 않습니다.

구현 예는 툴팁 패턴을 참고하세요.

trigger.addEventListener('keydown', function (e) {
  if (e.key === 'Escape') tip.hidden = true;
});
// 포인터가 트리거나 툴팁 위에 있는 동안은 닫지 않습니다
[trigger, tip].forEach(function (el) {
  el.addEventListener('mouseenter', show);
  el.addEventListener('mouseleave', hideIfOutside);
});

자주 하는 실수

• 포인터를 툴팁 쪽으로 옮기면 툴팁이 사라집니다.
• Esc 키로 툴팁·서브메뉴를 닫을 수 없습니다.
• 툴팁이 몇 초 뒤 저절로 사라집니다.

검사 방법

• 호버·포커스로 나타나는 콘텐츠(툴팁, 서브메뉴, 미리보기)를 찾습니다.
• 포인터·포커스를 그대로 둔 채 Esc 키로 닫히는지 확인합니다.
• 포인터를 추가 콘텐츠 위로 옮겨도 유지되는지, 시간이 지나도 사라지지 않는지 확인합니다.

관련 ARIA

참고 자료

• WCAG 2.2 원문: 1.4.13 (새 창)