Empfohlene Praxis Priorität: Gering · experimentelle Prüfung: ggf. manuell nachsehen
Ein per Tastatur erreichbares Element sagt nicht, was es ist
Ein Element, das mit der Tab-Taste erreichbar ist, etwa ein klickbares div oder span, hat keine Rolle, die assistiven Technologien mitteilt, dass es ein Button, Link oder anderes Bedienelement ist. axe kennzeichnet diese Prüfung als experimentell, die Ergebnisse müssen daher manuell geprüft werden. Das ist eine empfohlene Praxis, keine Anforderung der WCAG-Stufe AA.
Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.
Warum das für Ihre Kunden wichtig ist
Wer mit Tastatur oder Screenreader unterwegs ist, landet auf dem Element, hört aber nur seinen Text oder gar nichts, ohne „Button“ oder „Link“. Man erkennt nicht, dass es sich aktivieren lässt, und überspringt womöglich Größenauswahl, Filter oder „Zur Wunschliste“.
Wen es betrifft
- Screenreader-Nutzende
- Tastaturnutzende
- Menschen mit Sprachsteuerung
So beheben Sie es
Verwenden Sie native Elemente für Bedienelemente: <button> für Aktionen und <a href> für Navigation. Muss ein eigenes Element bleiben, ergänzen Sie eine passende Rolle (button, link, tab, checkbox usw.) und das Tastaturverhalten, das diese Rolle erwartet. Ist das Element nicht interaktiv, entfernen Sie tabindex, damit es keinen Fokus erhält. Da die Regel experimentell ist, prüfen Sie jedes Ergebnis manuell, bevor Sie den Code ändern.
Bei Shopify
Meist verursacht durch eigenen Code im Theme oder in Apps, etwa Farbfelder, Schnellansicht oder Wunschlisten-Buttons. Ersetzen Sie das klickbare div oder span im Liquid-Snippet durch einen <button> oder bitten Sie den App-Entwickler um eine Korrektur.
Bei Shoptet (CZ)
Hängt vom Template und von Add-ons ab. Melden Sie das Element an Shoptet oder den Add-on-Entwickler; eigenen Code, den Sie selbst eingefügt haben, können Sie direkt korrigieren.
Bei PrestaShop
Kommt meist von Theme-JavaScript oder Modulen wie Variantenauswahl und Slidern. Korrigieren Sie das Markup in den .tpl-Dateien und Skripten des Themes oder fragen Sie den Modulautor.
Bei WooCommerce
Kommt oft von Page-Builder-Widgets oder Plugins, die divs klickbar machen. Aktualisieren Sie das Plugin oder ändern Sie das Markup in einem Child-Theme-Template, damit Bedienelemente echte Buttons oder Links sind.
Standards
Kein WCAG-Erfolgskriterium, sondern eine empfohlene Praxis, die die Website leichter nutzbar macht.
Automatische Prüfung: axe-core-Regel focus-order-semantics.
dequeuniversity.com, github.com