M

MLOG

Українська

Посібник із впровадження доступних підказок, що з'являються при наведенні та фокусуванні, для забезпечення зручності всім користувачам.

Реалізація підказок: доступна інформація при наведенні та фокусуванні

Спливаючі підказки — це невеликі контекстні повідомлення, які з'являються, коли користувач наводить курсор миші на елемент або фокусується на ньому. Вони можуть надавати додаткову інформацію, пояснювати призначення елемента або пропонувати поради щодо використання функції. Однак, якщо підказки реалізовані неправильно, вони можуть стати кошмаром для доступності. Цей посібник описує найкращі практики для створення підказок, якими зможе користуватися кожен, включно з людьми з інвалідністю.

Чому доступність важлива для спливаючих підказок

Доступність — це не лише про відповідність стандартам; це про створення кращого користувацького досвіду для всіх. Коли підказки недоступні, це може виключити користувачів, які покладаються на допоміжні технології, такі як екранні зчитувачі, клавіатурна навігація або голосове введення. Розглянемо такі сценарії:

Дотримуючись найкращих практик доступності, ми можемо гарантувати, що підказки покращуватимуть, а не погіршуватимуть користувацький досвід для всіх.

Ключові принципи доступних підказок

Наступні принципи є вирішальними для створення доступних підказок:

  1. Надайте альтернативний доступ: Переконайтеся, що підказки доступні як при наведенні курсора, так і при фокусуванні з клавіатури.
  2. Використовуйте атрибути ARIA: Використовуйте атрибути ARIA (Accessible Rich Internet Applications) для правильної ідентифікації та опису підказок для допоміжних технологій.
  3. Керуйте фокусом: Контролюйте, куди переміщується фокус, коли підказка відображається та приховується.
  4. Забезпечте достатню контрастність: Забезпечте достатній колірний контраст між текстом підказки та її фоном.
  5. Надайте достатньо часу: Дайте користувачам достатньо часу, щоб прочитати вміст підказки.
  6. Зробіть їх такими, що можна закрити: Надайте чіткий спосіб закрити підказку.
  7. Уникайте надмірного використання: Використовуйте підказки зрідка і лише за потреби.

Техніки реалізації

1. Використання наведення та фокусування

Найважливішим аспектом доступних підказок є забезпечення їх доступності як для користувачів миші, так і для користувачів клавіатури. Це означає, що підказка повинна з'являтися як при наведенні курсора, так і коли елемент отримує фокус.

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) рекомендують коефіцієнт контрастності щонайменше 4.5:1 для звичайного тексту та 3:1 для великого тексту (18pt або 14pt жирний).

Використовуйте онлайн-перевірки контрастності, щоб переконатися, що ваш вибір кольорів відповідає стандартам доступності. Приклади таких інструментів:

Приклад (хороший контраст):

.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()">Закрити</button>
</div>

Приклад (Клавіша Escape):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Замініть на вашу функцію приховування підказки
  }
});

7. Уникнення надмірного використання

Підказки слід використовувати зрідка і лише тоді, коли вони надають дійсно корисну інформацію. Надмірне використання підказок може захаращувати інтерфейс, відволікати користувачів і створювати негативний досвід.

Альтернативи спливаючим підказкам:

Додаткові аспекти

Динамічний вміст

Якщо вміст вашої підказки генерується динамічно (наприклад, завантажується з API або оновлюється на основі дій користувача), переконайтеся, що атрибут aria-describedby та видимість підказки оновлюються відповідним чином. Використовуйте JavaScript для керування цими оновленнями.

Позиціонування

Ретельно продумайте позиціонування ваших підказок. Уникайте розміщення їх таким чином, щоб вони закривали важливий вміст або викликали зсуви макета. Враховуйте різні розміри екранів та роздільну здатність і використовуйте CSS, щоб підказки завжди були видимі в межах області перегляду.

Мобільні пристрої

Підказки традиційно покладаються на взаємодію при наведенні курсора, яка недоступна на сенсорних пристроях. Для мобільних пристроїв розгляньте альтернативні методи взаємодії, такі як:

Тестування ваших підказок

Ретельно тестуйте ваші підказки, щоб переконатися, що вони доступні для всіх користувачів. Використовуйте поєднання ручного тестування та автоматизованих інструментів для перевірки доступності.

Методи тестування:

Інтернаціоналізація (i18n) та локалізація (l10n)

При розробці підказок для глобальної аудиторії враховуйте інтернаціоналізацію та локалізацію:

Висновок

Реалізація доступних підказок вимагає ретельного планування та уваги до деталей. Дотримуючись принципів і технік, викладених у цьому посібнику, ви можете створювати підказки, якими зможе користуватися кожен, незалежно від його можливостей. Пам'ятайте, що доступність — це безперервний процес, тому продовжуйте тестувати та вдосконалювати ваші підказки, щоб вони відповідали потребам усіх ваших користувачів.

Ресурси