Wymaganie WCAG A/AA Priorytet: Krytyczne
Niektóre przyciski nie mają nazwy
Niektóre przyciski nie mają czytelnej etykiety, np. przycisk „dodaj do koszyka”, wyszukiwania lub menu w postaci samej ikony.
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 lub sterowania głosem nie wiedzą, który przycisk dodaje produkt do koszyka, otwiera menu albo uruchamia wyszukiwanie. Może to całkowicie uniemożliwić im zakup.
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 nazwę każdemu przyciskowi: widoczny tekst, aria-label lub aria-labelledby wskazujące na widoczny tekst. Przyciski z samą ikoną potrzebują aria-label, np. "Dodaj do koszyka" lub "Zamknij". Nie polegaj na atrybucie title ani na ikonach dodanych tylko w CSS.
W Shopify
Zwykle przyciski-ikony w motywie (menu, wyszukiwanie, ilość, zamknięcie) lub przyciski dodane przez aplikacje. Dodaj etykiety we fragmentach Liquid motywu; poproś twórców aplikacji o poprawienie dodawanych przez nie przycisków.
W Shoptet (CZ)
Zwykle przyciski-ikony w szablonie. Sprawdź, czy istnieje nowsza wersja szablonu z etykietami; w przeciwnym razie poproś Shoptet lub partnera Shoptet o zmianę kodu szablonu.
W PrestaShop
Zwykle przyciski-ikony w motywie lub modułach (koszyk, wyszukiwanie, menu). Dodaj aria-label w szablonach .tpl motywu lub w nadpisanych szablonach modułów.
W WooCommerce
Częste w motywach, kreatorach stron oraz wtyczkach koszyka lub listy życzeń. Dodaj etykiety w szablonach motywu potomnego lub w ustawieniach wtyczki; przyciski wtyczek bez nazwy zgłoś autorowi wtyczki.
Normy
| Norma | Punkt |
|---|---|
| WCAG 2.2 | 4.1.2 (A) Name, Role, Value |
| WCAG 2.1 | 4.1.2 (A) Name, Role, Value |
| WCAG 2.0 | 4.1.2 (A) Name, Role, Value |
| EN 301 549 4.1.1 | 9.4.1.2 |
| EN 301 549 3.2.1 | 9.4.1.2 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.4.1.2 |
Automatyczny test: reguła axe-core button-name.
dequeuniversity.com, github.com, www.w3.org
Podobne testy
-
Ukryte elementy nadal są dostępne z klawiatury
WCAG 4.1.2 A
-
Niektóre grafiki nie mają opisu tekstowego
WCAG 1.1.1 A
-
Niektóre filmy lub dźwięki włączają się same z dźwiękiem
WCAG 1.4.2 A
-
Element listy znajduje się poza listą
WCAG 1.3.1 A