Wymaganie WCAG A/AA Priorytet: Umiarkowane
Niektóre grafiki wektorowe nie mają opisu tekstowego
Niektóre grafiki SVG, np. logo, ikony lub plakietki, są oznaczone jako obrazy, ale nie mają tekstu alternatywnego.
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 słyszą nic przydatnego o grafice, więc mogą przeoczyć plakietkę, logo metody płatności lub znaczenie ikony.
Kogo to dotyczy
- niewidomi klienci
- osoby korzystające z czytników ekranu
Jak to naprawić
Dla <svg> z role="img" dodaj <title> jako pierwszy element podrzędny albo użyj aria-label lub aria-labelledby. Jeśli grafika jest dekoracyjna, usuń role="img" i dodaj aria-hidden="true".
W Shopify
Zwykle fragmenty z ikonami w motywie lub widżety aplikacji. Dodaj title lub aria-label we fragmentach SVG motywu; ikony aplikacji zgłoś ich twórcy.
W Shoptet (CZ)
Zwykle ikony lub logo w szablonie. Zgłoś problem do Shoptet lub partnera Shoptet.
W PrestaShop
Zwykle ikony motywu lub moduły. Dodaj nazwy w szablonach .tpl motywu lub plikach SVG.
W WooCommerce
Zwykle ikony motywu, przesłane logo lub wtyczki ikon. Dodaj nazwy w szablonach motywu potomnego lub ustawieniach 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 svg-img-alt.
dequeuniversity.com, github.com, www.w3.org
Podobne testy
-
Nazwa lub wartość znajduje się poza swoją listą
WCAG 1.3.1 A
-
Lista rozwijana nie ma etykiety
WCAG 4.1.2 A
-
Klikalny obraz działa tylko z myszą
WCAG 2.1.1 A
-
Cała strona jest ukryta przed czytnikami ekranu
WCAG 1.3.1 A