Wymaganie WCAG A/AA Priorytet: Krytyczne
Przycisk graficzny nie ma opisu tekstowego
Przycisk w postaci obrazka nie ma tekstu alternatywnego, więc nie wiadomo, do czego służy.
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 rozpoznają przycisku wyszukiwania, zamówienia czy zapisu do newslettera. Może to uniemożliwić im wykonanie tej czynności.
Kogo to dotyczy
- niewidomi klienci
- osoby korzystające z czytników ekranu
- osoby sterujące urządzeniem za pomocą głosu
Jak to naprawić
Dodaj atrybut alt do każdego <input type="image">, opisujący działanie, np. alt="Szukaj" lub alt="Złóż zamówienie". Lepiej: zastąp go zwykłym <button> z tekstem lub aria-label.
W Shopify
Rzadkie w obecnych motywach; zwykle w starszych motywach lub własnym kodzie. Dodaj tekst alternatywny albo zastąp pole graficzne przyciskiem w szablonie Liquid.
W Shoptet (CZ)
Zwykle w starszych szablonach lub własnym kodzie. Poproś Shoptet lub partnera Shoptet o dodanie tekstu alternatywnego albo zastąpienie elementu zwykłym przyciskiem.
W PrestaShop
Zwykle w starszych motywach lub modułach. Dodaj atrybut alt albo zastąp element przyciskiem <button> w szablonie .tpl.
W WooCommerce
Zwykle w starszych motywach lub wtyczkach. Dodaj atrybut alt albo zastąp element przyciskiem <button> w szablonie motywu potomnego lub ustawieniach wtyczki.
Normy
| Norma | Punkt |
|---|---|
| WCAG 2.2 | 1.1.1 (A) Non-text Content |
| WCAG 2.2 | 4.1.2 (A) Name, Role, Value |
| WCAG 2.1 | 1.1.1 (A) Non-text Content |
| WCAG 2.1 | 4.1.2 (A) Name, Role, Value |
| WCAG 2.0 | 1.1.1 (A) Non-text Content |
| WCAG 2.0 | 4.1.2 (A) Name, Role, Value |
| EN 301 549 4.1.1 | 9.1.1.1 |
| EN 301 549 4.1.1 | 9.4.1.2 |
| EN 301 549 3.2.1 | 9.1.1.1 |
| EN 301 549 3.2.1 | 9.4.1.2 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.1.1.1 |
| ДСТУ EN 301 549 2022 | 9.4.1.2 |
Automatyczny test: reguła axe-core input-image-alt.
dequeuniversity.com, github.com, www.w3.org, www.w3.org
Podobne testy
-
Atrybuty dostępności użyte w niewłaściwych elementach
WCAG 4.1.2 A
-
Niektóre elementy mają rolę, która nie istnieje
WCAG 4.1.2 A
-
Niektóre osadzone pliki lub multimedia nie mają opisu tekstowego
WCAG 1.1.1 A
-
Przycisk graficzny nie ma opisu tekstowego
WCAG 1.1.1 A