Wymaganie WCAG A/AA Priorytet: Umiarkowane
Niektóre grafiki nie mają opisu tekstowego
Niektóre elementy są oznaczone jako obrazy, ale nie mają tekstu alternatywnego, np. gwiazdki ocen lub 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 nie wiedzą, co przedstawia grafika, np. ocenę 4.5 gwiazdki lub plakietkę „darmowa dostawa”, a to może wpływać na decyzję o zakupie.
Kogo to dotyczy
- niewidomi klienci
- osoby korzystające z czytników ekranu
Jak to naprawić
Nadaj każdemu elementowi z role="img" nazwę przez aria-label lub aria-labelledby, np. aria-label="Ocena 4.5 na 5". Jeśli grafika jest dekoracyjna, usuń role="img" i ukryj ją za pomocą aria-hidden="true".
W Shopify
Często gwiazdki ocen z aplikacji opinii lub ikony w motywie. Dodaj nazwy we fragmentach Liquid motywu; kod aplikacji opinii musi poprawić jej twórca.
W Shoptet (CZ)
Często oceny lub ikony w szablonie. Zgłoś problem do Shoptet lub partnera Shoptet.
W PrestaShop
Często oceny lub ikony z modułów. Popraw to w nadpisanych szablonach modułów albo zgłoś problem twórcy modułu.
W WooCommerce
Często gwiazdki ocen z WooCommerce lub wtyczek opinii albo fonty ikon w motywie. Popraw to w szablonach motywu potomnego albo zgłoś problem autorowi wtyczki.
Normy
| Norma | Punkt |
|---|---|
| WCAG 2.2 | 1.1.1 (A) Non-text Content |
| WCAG 2.1 | 1.1.1 (A) Non-text Content |
| WCAG 2.0 | 1.1.1 (A) Non-text Content |
| EN 301 549 4.1.1 | 9.1.1.1 |
| EN 301 549 3.2.1 | 9.1.1.1 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.1.1.1 |
Automatyczny test: reguła axe-core role-img-alt.
dequeuniversity.com, github.com, www.w3.org
Podobne testy
-
Filmy nie mają napisów
WCAG 1.2.2 A
-
Atrybuty dostępności zawierają literówki
WCAG 4.1.2 A
-
Niestandardowe menu lub listy są zbudowane nieprawidłowo
WCAG 1.3.1 A
-
Na telefonie nie można powiększyć strony
WCAG 1.4.4 AA