Empfohlene Praxis Priorität: Mittel
Ein Textblock verbirgt Links oder Buttons in seinem Inneren
Ein Element mit role="text" enthält einen Link, einen Button oder ein anderes fokussierbares Element. role="text" ist eine nicht standardisierte Rolle, die manche Screenreader anweist, den gesamten Inhalt als reinen Text vorzulesen. 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
In Screenreadern, die role="text" unterstützen, vor allem VoiceOver auf iPhone und Mac, wird der Link oder Button darin womöglich als reiner Text vorgelesen. Die Kundin weiß dann nicht, dass er sich aktivieren lässt, oder erreicht ihn gar nicht. Umschließt die Rolle einen Preislink oder den Button „In den Warenkorb“, kann das einen Kauf verhindern.
Wen es betrifft
- Screenreader-Nutzer
- VoiceOver-Nutzer auf iPhone, iPad und Mac
So beheben Sie es
Verwenden Sie role="text" nur für Elemente mit reinem Text, etwa damit ein geteilter Preis wie „€19<sup>99</sup>“ nicht stückweise vorgelesen wird. Entfernen Sie role="text" von allen Elementen, die Links, Buttons, Formularfelder oder Elemente mit tabindex enthalten, oder verschieben Sie diese interaktiven Elemente nach außen.
Bei Shopify
Meist durch eigenes Preis- oder Badge-Markup in Liquid-Snippets oder durch eine App. Entfernen Sie role="text" von Elementen, die Links oder Buttons enthalten.
Bei Shoptet (CZ)
Meist durch eigenen Code. Entfernen Sie role="text" von Elementen, die Links oder Buttons enthalten; fügt das Template es hinzu, fragen Sie Shoptet oder einen Partner.
Bei PrestaShop
Meist durch angepasste .tpl-Templates für Produktlisten oder Preise oder durch Module. Entfernen Sie role="text" um interaktive Elemente, am besten per Override.
Bei WooCommerce
Meist durch eigene Preis-Templates, Page-Builder-Widgets oder Plugins. Beheben Sie es in einem Template des Child-Themes oder fragen Sie den Plugin-Autor.
Standards
Kein WCAG-Erfolgskriterium, sondern eine empfohlene Praxis, die die Website leichter nutzbar macht.
Automatische Prüfung: axe-core-Regel aria-text.
dequeuniversity.com, github.com