M

MLOG

Polski

Kompleksowy przewodnik po implementacji dostępnych etykiet narzędziowych z wykorzystaniem stanów hover i focus, zapewniający użyteczność dla wszystkich użytkowników, w tym osób z niepełnosprawnościami.

Implementacja etykiet narzędziowych: Dostępne informacje przy najechaniu kursorem i zaznaczeniu

Etykiety narzędziowe (tooltips) to małe, kontekstowe komunikaty pomocy, które pojawiają się, gdy użytkownik najedzie kursorem myszy na element lub go zaznaczy. Mogą one dostarczać dodatkowych informacji, wyjaśniać przeznaczenie elementu lub oferować wskazówki dotyczące korzystania z funkcji. Jednakże, etykiety narzędziowe mogą łatwo stać się koszmarem pod względem dostępności, jeśli nie zostaną prawidłowo wdrożone. Ten przewodnik przedstawia najlepsze praktyki tworzenia etykiet narzędziowych, które są użyteczne dla wszystkich, w tym użytkowników z niepełnosprawnościami.

Dlaczego dostępność ma znaczenie w przypadku etykiet narzędziowych

Dostępność to nie tylko kwestia zgodności z przepisami; to tworzenie lepszego doświadczenia użytkownika dla wszystkich. Kiedy etykiety narzędziowe nie są dostępne, może to wykluczyć użytkowników, którzy polegają na technologiach asystujących, takich jak czytniki ekranu, nawigacja za pomocą klawiatury czy wprowadzanie głosowe. Rozważmy następujące scenariusze:

Stosując najlepsze praktyki w zakresie dostępności, możemy zapewnić, że etykiety narzędziowe będą ulepszać, a nie utrudniać doświadczenie użytkownika dla wszystkich.

Kluczowe zasady dla dostępnych etykiet narzędziowych

Poniższe zasady są kluczowe dla tworzenia dostępnych etykiet narzędziowych:

  1. Zapewnij alternatywny dostęp: Upewnij się, że etykiety narzędziowe są dostępne zarówno przy najechaniu kursorem, jak i przy zaznaczeniu za pomocą klawiatury.
  2. Używaj atrybutów ARIA: Używaj atrybutów ARIA (Accessible Rich Internet Applications), aby prawidłowo identyfikować i opisywać etykiety narzędziowe dla technologii asystujących.
  3. Zarządzaj focusem: Kontroluj, gdzie trafia fokus, gdy etykieta narzędziowa jest wyświetlana i ukrywana.
  4. Zapewnij wystarczający kontrast: Zapewnij odpowiedni kontrast kolorów między tekstem etykiety a tłem.
  5. Zapewnij wystarczająco dużo czasu: Daj użytkownikom wystarczająco dużo czasu na przeczytanie treści etykiety narzędziowej.
  6. Umożliw ich zamykanie: Zapewnij jasny sposób na zamknięcie etykiety narzędziowej.
  7. Unikaj nadużywania: Używaj etykiet narzędziowych oszczędnie i tylko wtedy, gdy jest to konieczne.

Techniki implementacji

1. Używanie najechania kursorem i fokusu

Najważniejszym aspektem dostępnych etykiet narzędziowych jest zapewnienie, że są one dostępne zarówno dla użytkowników myszy, jak i klawiatury. Oznacza to, że etykieta narzędziowa powinna pojawiać się zarówno po najechaniu kursorem, jak i gdy element otrzyma fokus.

HTML:

<a href="#" aria-describedby="tooltip-example">Przykładowy link</a>
<div id="tooltip-example" role="tooltip" style="display: none;">To jest przykładowa etykieta narzędziowa.</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; /* Upewnij się, że etykieta jest na wierzchu */
}

Wyjaśnienie:

JavaScript (Zaawansowana kontrola - opcjonalnie):

Podczas gdy CSS może obsługiwać proste pokazywanie/ukrywanie, JavaScript pozwala na bardziej solidną kontrolę, zwłaszcza gdy etykiety narzędziowe są generowane dynamicznie lub wymagają bardziej złożonego zachowania.

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. Używanie atrybutów ARIA

Atrybuty ARIA są niezbędne do dostarczania informacji semantycznych technologiom asystującym. Oto omówienie kluczowych atrybutów:

Przykład:

<button aria-describedby="help-tooltip">Wyślij</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Kliknij tutaj, aby wysłać formularz.</div>

JavaScript (dla 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. Zarządzanie focusem

Gdy etykieta narzędziowa się pojawia, generalnie *nie powinna* ona kraść fokusu z elementu wyzwalającego. Fokus powinien pozostać na elemencie, który wywołał etykietę. Zapewnia to, że użytkownicy klawiatury mogą kontynuować nawigację po stronie bez nieoczekiwanych przerw.

Mogą jednak wystąpić sytuacje, w których *chcesz* przenieść fokus do etykiety narzędziowej, szczególnie jeśli zawiera ona interaktywne elementy (np. linki, przyciski). W takim przypadku upewnij się, że:

W większości przypadków unikanie zarządzania focusem w samej etykiecie jest preferowane ze względu na prostotę i użyteczność.

4. Zapewnienie wystarczającego kontrastu

Kontrast kolorów jest kluczowy dla czytelności. Upewnij się, że kolor tekstu w etykietach narzędziowych ma wystarczający kontrast w stosunku do koloru tła. Wytyczne dotyczące dostępności treści internetowych (WCAG) zalecają współczynnik kontrastu co najmniej 4.5:1 dla normalnego tekstu i 3:1 dla dużego tekstu (18pt lub 14pt pogrubiony).

Użyj internetowych narzędzi do sprawdzania kontrastu, aby zweryfikować, czy wybrane kolory spełniają standardy dostępności. Przykłady takich narzędzi to:

Przykład (dobry kontrast):

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

Przykład (słaby kontrast):

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

5. Zapewnienie wystarczającej ilości czasu

Użytkownicy potrzebują wystarczająco dużo czasu na przeczytanie treści etykiety narzędziowej. Unikaj etykiet, które znikają zbyt szybko. Chociaż nie ma magicznej liczby, staraj się zapewnić minimalny czas wyświetlania wynoszący kilka sekund. Ponadto etykieta powinna pozostać widoczna tak długo, jak użytkownik najeżdża kursorem lub ma zaznaczony element wyzwalający. Jeśli musisz zamknąć etykietę z powodu innych zdarzeń, poinformuj o tym użytkownika.

Jeśli treść etykiety jest długa, rozważ zapewnienie użytkownikowi możliwości jej ręcznego zamknięcia (np. za pomocą przycisku zamknięcia lub naciśnięcia klawisza Escape).

6. Umożliwienie ich zamykania

Chociaż etykiety narzędziowe często znikają automatycznie, gdy użytkownik odsunie mysz lub usunie fokus, dobrą praktyką jest zapewnienie jasnego sposobu na ich ręczne zamknięcie, zwłaszcza w przypadku długich etykiet lub etykiet zawierających elementy interaktywne.

Metody zamykania etykiet narzędziowych:

Przykład (przycisk zamknięcia):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  To jest treść mojej etykiety narzędziowej.
  <button onclick="hideTooltip()">Zamknij</button>
</div>

Przykład (klawisz Escape):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Zastąp swoją funkcją ukrywania etykiety
  }
});

7. Unikanie nadużywania

Etykiety narzędziowe powinny być używane oszczędnie i tylko wtedy, gdy dostarczają naprawdę pomocnych informacji. Nadużywanie etykiet może zaśmiecać interfejs, rozpraszać użytkowników i prowadzić do frustracji.

Alternatywy dla etykiet narzędziowych:

Zaawansowane zagadnienia

Zawartość dynamiczna

Jeśli treść Twojej etykiety narzędziowej jest generowana dynamicznie (np. ładowana z API lub aktualizowana na podstawie danych wejściowych użytkownika), upewnij się, że atrybut aria-describedby i widoczność etykiety są odpowiednio aktualizowane. Użyj JavaScriptu do zarządzania tymi aktualizacjami.

Pozycjonowanie

Starannie rozważ pozycjonowanie swoich etykiet narzędziowych. Unikaj umieszczania ich w sposób, który zasłania ważną treść lub powoduje przesunięcia układu. Pamiętaj o różnych rozmiarach i rozdzielczościach ekranu i użyj CSS, aby zapewnić, że etykiety są zawsze widoczne w obrębie okna przeglądarki.

Urządzenia mobilne

Etykiety narzędziowe tradycyjnie opierają się na interakcjach typu hover, które nie są dostępne na urządzeniach dotykowych. W przypadku urządzeń mobilnych rozważ użycie alternatywnych metod interakcji, takich jak:

Testowanie etykiet narzędziowych

Dokładnie przetestuj swoje etykiety narzędziowe, aby upewnić się, że są dostępne dla wszystkich użytkowników. Użyj kombinacji testów manualnych i zautomatyzowanych narzędzi do testowania dostępności.

Metody testowania:

Internacjonalizacja (i18n) i Lokalizacja (l10n)

Tworząc etykiety narzędziowe dla globalnej publiczności, pamiętaj o internacjonalizacji i lokalizacji:

Podsumowanie

Implementacja dostępnych etykiet narzędziowych wymaga starannego planowania i dbałości o szczegóły. Postępując zgodnie z zasadami i technikami opisanymi w tym przewodniku, możesz tworzyć etykiety narzędziowe, które są użyteczne dla wszystkich, niezależnie od ich umiejętności. Pamiętaj, że dostępność to ciągły proces, dlatego kontynuuj testowanie i doskonalenie swoich etykiet, aby zapewnić, że spełniają one potrzeby wszystkich Twoich użytkowników.

Zasoby