WCAG-A/AA-Anforderung Priorität: Kritisch
Eine Bild-Schaltfläche hat keine Textbeschreibung
Eine Schaltfläche, die aus einem Bild besteht, hat keine Textalternative. Es ist daher unklar, was sie tut.
Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.
Warum das für Ihre Kunden wichtig ist
Wer einen Screenreader oder Sprachsteuerung nutzt, erkennt die Schaltfläche für Suche, Bestellung oder Newsletter-Anmeldung nicht. Das kann verhindern, dass die Aktion abgeschlossen wird.
Wen es betrifft
- blinde Kundinnen und Kunden
- Screenreader-Nutzer
- Nutzer von Sprachsteuerung
So beheben Sie es
Ergänzen Sie an jedem <input type="image"> ein alt-Attribut, das die Aktion benennt, zum Beispiel alt="Suchen" oder alt="Bestellung abschicken". Besser: durch ein normales <button> mit Text oder aria-label ersetzen.
Bei Shopify
In aktuellen Themes selten; meist in alten Themes oder eigenem Code. Ergänzen Sie einen Alternativtext oder ersetzen Sie das Bild-Input im Liquid-Template durch einen Button.
Bei Shoptet (CZ)
Meist in älteren Templates oder eigenem Code. Bitten Sie Shoptet oder eine Partneragentur, einen Alternativtext zu ergänzen oder es durch einen normalen Button zu ersetzen.
Bei PrestaShop
Meist in älteren Themes oder Modulen. Ergänzen Sie das alt-Attribut oder ersetzen Sie es im .tpl-Template durch ein <button>.
Bei WooCommerce
Meist in alten Themes oder Plugins. Ergänzen Sie das alt-Attribut oder ersetzen Sie es im Child-Theme-Template bzw. über die Plugin-Einstellungen durch ein <button>.
Standards
| Standard | Abschnitt |
|---|---|
| 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 |
Automatische Prüfung: axe-core-Regel input-image-alt.
dequeuniversity.com, github.com, www.w3.org, www.w3.org