Tworzenie dostępnych zasobów: Linki

Dostępne linki pomagają wszystkim użytkownikom (zwłaszcza tym korzystającym z czytników ekranu lub nawigacji za pomocą klawiatury) zrozumieć, dokąd zaprowadzi ich link i jak z nim współdziałać. W tym artykule omówiono najlepsze praktyki dotyczące pisania jasnego tekstu linku, używania znaczącego kontekstu i unikania niejasnych zwrotów, takich jak “kliknij tutaj”. Dowiedz się, jak uczynić swoje linki bardziej użytecznymi, informacyjnymi i zgodnymi ze standardami dostępności.

Wymagania

• Linki muszą być semantycznie oznaczone jako takie.
• W idealnym przypadku oznacza to użycie elementu <a> z prawidłową wartością href. Ustawienie role="link" (i dodanie wszystkich innych aspektów funkcjonalności linku) może być dopuszczalne w rzadkich, problematycznych przypadkach.
• Link musi mieć tekst, który program może rozpoznać, zgodnie z algorytmem obliczania dostępnej nazwy.
• Szczegóły dotyczące takich informacji są zdefiniowane w innych specyfikacjach, takich jak WAI-ARIA, lub w odpowiednich standardach platformy.
• Cel każdego linku powinien być jasny i odróżnialny od innych linków na tej samej stronie, albo z samego tekstu linku (najlepiej), albo z otaczającego kontekstu linku.
• Zaleca się unikanie nazw linków takich jak:
  • Dowiedz się więcej,
  • Dowiedz się więcej,
  • Kliknij tutaj, aby uzyskać szczegółowe informacje.
• Linki prowadzące do tych samych miejsc docelowych muszą konsekwentnie używać tego samego (lub bardzo podobnego) tekstu linku na wszystkich stronach witryny
• Linki muszą być dostępne z klawiatury bez konieczności precyzyjnego ustawiania czasu dla każdego naciśnięcia klawisza.
• Dodatkowo, linki muszą być aktywowane za pomocą klawisza Enter/Return.
• Kolejność nawigacji elementów, na których można ustawić ostrość (linki, elementy formularzy itp.) musi być logiczna i intuicyjna.
• Kolejność elementów musi być logiczna.
• Linki muszą być wizualnie odróżnialne od otaczającego je tekstu.
• Linki nie powinny polegać wyłącznie na kolorze, aby odróżnić je od otaczającego tekstu, chyba że istnieje wystarczający kontrast między nimi a tekstem.
• Po najechaniu kursorem na link lub ustawieniu na nim ostrości powinna pojawić się dodatkowa wskazówka wizualna (np. podkreślenie lub kontur).
• Linki muszą mieć współczynnik kontrastu 4,5 do 1 (dla małego tekstu) lub 3 do 1 (dla dużego tekstu) w stosunku do tła.
• Wszystkie linki muszą pokazywać wizualny wskaźnik ostrości, gdy są w centrum uwagi.
• Kontrast wszystkich wizualnych wskaźników ostrości na tle musi wynosić co najmniej 3 do 1.
• Użytkownicy powinni mieć możliwość pominięcia powtarzających się bloków treści na wielu stronach internetowych (np. długa lista plików na stronie e-commerce, która jest standardowym elementem wielu stron).
  • Link “pomiń” powinien być pierwszym elementem na stronie, na którym można się skupić.
  • Link “pomiń” musi być zawsze widoczny lub znajdować się pod fokusem klawiatury.
  • linki “pomiń”, punkty orientacyjne (np. <nav>, <main> itp.) i spis treści strony są akceptowalnymi metodami spełnienia wymogu WCAG 2.4.1, aby umożliwić użytkownikom ominięcie bloków treści. Idealnie jest włączyć wszystkie te techniki do projektu tam, gdzie jest to odpowiednie.
• Spis treści strony może być umieszczony na górze treści lub w nagłówku.
• Najlepiej byłoby, gdyby linki w spisie treści odpowiadały strukturze nagłówków w treści strony.

Przykłady

	Panel filtrów otwiera się na żądanie użytkownika, pozwalając pominąć czytanie zawartości tej kolumny odpadów za pomocą czytnika ekranu.
	NIE: Poniższy przykład nieprawidłowo wykorzystuje tabindex do określenia alternatywnej kolejności zakładek. Jeśli ta lista jest nawigowana za pomocą klawisza tabulacji, lista jest nawigowana w kolejności Strona główna, rozdział 3, rozdział 2, rozdział 1, co nie jest zgodne z sekwencją w treści.
	Gdy pola tekstowe otrzymują fokus, w polu wyświetlany jest pionowy pasek, wskazujący, że użytkownik może wstawić tekst lub cały tekst jest podświetlony, wskazując, że użytkownik może pisać nad tekstem.
	NIE: W tym przykładzie, podczas korzystania z klawiatury, przycisk wezwania do działania jest pomijany (lub nawet cały element, który daje użytkownikowi kluczowe informacje).
	NIE: Wszystkie elementy zaznaczone na czerwono wyglądają tak samo, ale View pricing to link. Reszta niebieskiego tekstu to tylko podkreślenia. Oznacza to, że linki nie są wizualnie odróżnialne od otaczającego tekstu bez linków. NIE: W tym samym czasie elementy oznaczone na zielono powodują działanie, ale wyglądają jak zwykły tekst. Oznacza to, że linki nie są wizualnie odróżnialne od otaczającego je tekstu bez linków.