M

MLOG

한국어

호버 및 포커스 상태를 사용하여 접근성 있는 툴팁을 구현하는 종합 가이드. 장애가 있는 사용자를 포함한 모든 사용자의 사용성을 보장합니다.

툴팁 구현: 호버(Hover) 및 포커스(Focus)를 이용한 접근성 있는 정보 제공

툴팁은 사용자가 요소 위로 마우스 포인터를 올리거나(hover) 포커스(focus)할 때 나타나는 작은 상황별 도움말 메시지입니다. 추가 정보를 제공하거나, 요소의 목적을 명확히 하거나, 기능 사용법에 대한 힌트를 줄 수 있습니다. 하지만 툴팁은 올바르게 구현되지 않으면 쉽게 접근성 문제를 일으킬 수 있습니다. 이 가이드는 장애가 있는 사용자를 포함한 모든 사람이 사용할 수 있는 툴팁을 만드는 모범 사례를 설명합니다.

툴팁에서 접근성이 중요한 이유

접근성은 단순히 규정 준수에 관한 것이 아니라, 모두에게 더 나은 사용자 경험을 제공하는 것입니다. 툴팁에 접근성이 확보되지 않으면 스크린 리더, 키보드 탐색, 음성 입력과 같은 보조 기술에 의존하는 사용자가 배제될 수 있습니다. 다음 시나리오를 고려해 보세요:

접근성 모범 사례를 따르면 툴팁이 모든 사용자의 경험을 방해하는 대신 향상시킬 수 있습니다.

접근성 있는 툴팁의 핵심 원칙

다음 원칙들은 접근성 있는 툴팁을 만드는 데 매우 중요합니다:

  1. 대체 접근 방법 제공: 툴팁이 호버와 키보드 포커스 모두를 통해 접근 가능하도록 보장해야 합니다.
  2. ARIA 속성 사용: ARIA(Accessible Rich Internet Applications) 속성을 사용하여 보조 기술에 툴팁을 올바르게 식별하고 설명해야 합니다.
  3. 포커스 관리: 툴팁이 표시되고 숨겨질 때 포커스가 어디로 가는지 제어해야 합니다.
  4. 충분한 대비 보장: 툴팁 텍스트와 배경 사이에 충분한 색상 대비를 제공해야 합니다.
  5. 충분한 시간 허용: 사용자가 툴팁 내용을 읽을 충분한 시간을 주어야 합니다.
  6. 닫을 수 있도록 만들기: 툴팁을 닫을 수 있는 명확한 방법을 제공해야 합니다.
  7. 과도한 사용 피하기: 툴팁은 꼭 필요할 때만 아껴서 사용해야 합니다.

구현 기법

1. 호버(Hover)와 포커스(Focus) 사용하기

접근성 있는 툴팁의 가장 중요한 측면은 마우스와 키보드 사용자 모두가 접근할 수 있도록 하는 것입니다. 즉, 툴팁은 호버 상태와 요소가 포커스를 받았을 때 모두 나타나야 합니다.

HTML:

<a href="#" aria-describedby="tooltip-example">Example Link</a>
<div id="tooltip-example" role="tooltip" style="display: none;">This is an example tooltip.</div>

CSS:

a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Ensure the tooltip is on top */
}

설명:

JavaScript (고급 제어 - 선택 사항):

CSS가 간단한 표시/숨김을 처리할 수 있지만, JavaScript를 사용하면 특히 툴팁이 동적으로 생성되거나 더 복잡한 동작이 필요할 때 더욱 강력한 제어가 가능합니다.

const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

2. ARIA 속성 사용하기

ARIA 속성은 보조 기술에 의미론적 정보를 제공하는 데 필수적입니다. 주요 속성은 다음과 같습니다:

예시:

<button aria-describedby="help-tooltip">Submit</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Click here to submit the form.</div>

JavaScript (aria-hidden용):

const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

3. 포커스 관리하기

툴팁이 나타날 때, 일반적으로 트리거 요소에서 포커스를 빼앗아서는 *안 됩니다*. 포커스는 툴팁을 트리거한 요소에 그대로 남아 있어야 합니다. 이렇게 하면 키보드 사용자가 예기치 않은 중단 없이 페이지 탐색을 계속할 수 있습니다.

하지만, 특히 툴팁에 상호작용 가능한 요소(예: 링크, 버튼)가 포함된 경우, 포커스를 툴팁으로 옮기고 싶을 때가 있을 수 있습니다. 이 경우 다음 사항을 확인해야 합니다:

대부분의 경우, 단순성과 사용성을 위해 툴팁 자체 내에서 포커스 관리를 피하는 것이 좋습니다.

4. 충분한 대비 보장하기

색상 대비는 가독성에 매우 중요합니다. 툴팁의 텍스트 색상이 배경색과 충분한 대비를 이루는지 확인해야 합니다. WCAG(Web Content Accessibility Guidelines)는 일반 텍스트의 경우 최소 4.5:1, 큰 텍스트(18pt 또는 14pt 굵게)의 경우 3:1의 명암비를 권장합니다.

온라인 명암비 검사기를 사용하여 선택한 색상이 접근성 표준을 충족하는지 확인하세요. 명암비 검사기의 예는 다음과 같습니다:

예시 (좋은 대비):

.tooltip {
  background-color: #000;
  color: #fff;
}

예시 (나쁜 대비):

.tooltip {
  background-color: #fff;
  color: #eee;
}

5. 충분한 시간 허용하기

사용자는 툴팁 내용을 읽을 충분한 시간이 필요합니다. 너무 빨리 사라지는 툴팁은 피해야 합니다. 정해진 숫자는 없지만, 최소 몇 초의 표시 시간을 목표로 하세요. 또한, 사용자가 트리거 요소 위에 마우스를 올리거나 포커스를 맞추고 있는 동안에는 툴팁이 계속 표시되어야 합니다. 다른 이벤트로 인해 툴팁을 닫아야 하는 경우, 툴팁이 닫힐 것이라는 표시를 제공해야 합니다.

툴팁 내용이 긴 경우, 사용자가 수동으로 툴팁을 닫을 수 있는 방법(예: 닫기 버튼 또는 Escape 키 누르기)을 제공하는 것을 고려해야 합니다.

6. 닫을 수 있도록 만들기

툴팁은 사용자가 마우스를 멀리 옮기거나 포커스를 제거하면 자동으로 사라지는 경우가 많지만, 특히 내용이 길거나 상호작용 요소가 포함된 툴팁의 경우 수동으로 닫을 수 있는 명확한 방법을 제공하는 것이 좋습니다.

툴팁 닫기 방법:

예시 (닫기 버튼):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  This is my tooltip content.
  <button onclick="hideTooltip()">Close</button>
</div>

예시 (Escape 키):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Replace with your actual hide tooltip function
  }
});

7. 과도한 사용 피하기

툴팁은 아껴서 사용해야 하며, 정말로 유용한 정보를 제공할 때만 사용해야 합니다. 툴팁을 과도하게 사용하면 인터페이스가 복잡해지고 사용자의 주의를 산만하게 하며 실망스러운 경험을 만들 수 있습니다.

툴팁의 대안:

고급 고려사항

동적 콘텐츠

툴팁 콘텐츠가 동적으로 생성되는 경우(예: API에서 로드되거나 사용자 입력에 따라 업데이트되는 경우), aria-describedby 속성과 툴팁 가시성이 그에 따라 업데이트되도록 해야 합니다. JavaScript를 사용하여 이러한 업데이트를 관리하세요.

위치 지정

툴팁의 위치를 신중하게 고려하세요. 중요한 콘텐츠를 가리거나 레이아웃 변경을 유발하는 방식으로 배치하지 마세요. 다양한 화면 크기와 해상도를 염두에 두고 CSS를 사용하여 툴팁이 항상 뷰포트 내에 표시되도록 하세요.

모바일 기기

툴팁은 전통적으로 호버 상호작용에 의존하는데, 이는 터치 기반 장치에서는 사용할 수 없습니다. 모바일 장치의 경우 다음과 같은 대체 상호작용 방법을 사용하는 것을 고려하세요:

툴팁 테스트하기

툴팁이 모든 사용자에게 접근 가능한지 철저히 테스트하세요. 수동 테스트와 자동화된 접근성 테스트 도구를 조합하여 사용하세요.

테스트 방법:

국제화(i18n) 및 현지화(l10n)

전 세계 사용자를 위한 툴팁을 개발할 때는 국제화 및 현지화를 염두에 두어야 합니다:

결론

접근성 있는 툴팁을 구현하려면 신중한 계획과 세부 사항에 대한 주의가 필요합니다. 이 가이드에 설명된 원칙과 기법을 따르면 능력에 관계없이 모든 사람이 사용할 수 있는 툴팁을 만들 수 있습니다. 접근성은 지속적인 과정이므로, 모든 사용자의 요구를 충족시키기 위해 툴팁을 계속 테스트하고 개선해야 한다는 점을 기억하세요.

참고 자료