Wymaganie WCAG A/AA Priorytet: Poważne
Niektóre linki nie mówią, dokąd prowadzą
Niektóre linki nie mają czytelnego tekstu, często są to ikony, np. koszyk, serce lub logo bez opisu.
Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.
Dlaczego to ważne dla Twoich klientów
Osoby korzystające z czytników ekranu słyszą tylko „link” i nie wiedzą, czy otworzy on koszyk, konto czy Instagram. Tracą czas lub rezygnują z szukania koszyka albo strony kontaktowej.
Kogo to dotyczy
- niewidomi klienci
- osoby korzystające z czytników ekranu
- osoby sterujące urządzeniem za pomocą głosu
Jak to naprawić
Nadaj każdemu linkowi nazwę tekstową: widoczny tekst, alt obrazka wewnątrz linku lub aria-label przy linkach z samą ikoną. Nazwa powinna opisywać cel, np. "Koszyk, 2 produkty". Dekoracyjne ikony ukryj za pomocą aria-hidden="true".
W Shopify
Zwykle linki-ikony w nagłówku lub stopce motywu. Dodaj tekst ukryty wizualnie lub aria-label w sekcjach i fragmentach Liquid motywu; linki dodane przez aplikacje musi poprawić aplikacja lub należy je zgłosić jej twórcy.
W Shoptet (CZ)
Zwykle linki-ikony w nagłówku lub stopce szablonu. Sprawdź ustawienia szablonu pod kątem etykiet linków; w przeciwnym razie kod szablonu musi zmienić Shoptet lub partner Shoptet.
W PrestaShop
Zwykle linki-ikony w modułach nagłówka lub szablonach motywu. Dodaj ukryty tekst lub aria-label w plikach .tpl motywu albo w nadpisanych szablonach modułów.
W WooCommerce
Często linki-ikony z nagłówka motywu, mini-koszyka lub wtyczki ikon społecznościowych. Dodaj etykiety tekstowe w szablonach motywu lub motywu potomnego albo wybierz ustawienia wtyczki generujące dostępne etykiety.
Normy
| Norma | Punkt |
|---|---|
| WCAG 2.2 | 2.4.4 (A) Link Purpose (In Context) |
| WCAG 2.2 | 4.1.2 (A) Name, Role, Value |
| WCAG 2.1 | 2.4.4 (A) Link Purpose (In Context) |
| WCAG 2.1 | 4.1.2 (A) Name, Role, Value |
| WCAG 2.0 | 2.4.4 (A) Link Purpose (In Context) |
| WCAG 2.0 | 4.1.2 (A) Name, Role, Value |
| EN 301 549 4.1.1 | 9.2.4.4 |
| EN 301 549 4.1.1 | 9.4.1.2 |
| EN 301 549 3.2.1 | 9.2.4.4 |
| EN 301 549 3.2.1 | 9.4.1.2 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.2.4.4 |
| ДСТУ EN 301 549 2022 | 9.4.1.2 |
Automatyczny test: reguła axe-core link-name.
dequeuniversity.com, github.com, www.w3.org, www.w3.org
Podobne testy
-
Linki w tekście wyglądają jak zwykły tekst
WCAG 1.4.1 A
-
Pola formularza nie mają etykiet
WCAG 4.1.2 A
-
Niektóre przyciski formularzy nie mają nazwy
WCAG 4.1.2 A
-
Atrybuty dostępności mają nieprawidłowe wartości
WCAG 4.1.2 A