Empfohlene Praxis Priorität: Mittel
Ein Pop-up-Fenster hat keinen Namen
Ein Dialog wie ein seitlicher Warenkorb, ein Cookie-Banner, ein Newsletter-Pop-up oder eine Schnellansicht ist mit role="dialog" oder role="alertdialog" markiert, hat aber keinen zugänglichen Namen. Das ist eine empfohlene Praxis und für sich 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
Öffnet sich das Fenster, sagt der Screenreader nur „Dialog“, ohne zu sagen, worum es geht. Kunden müssen es erst erkunden, um zu erfahren, ob es der Warenkorb, ein Rabattangebot oder eine Cookie-Abfrage ist. Das verwirrt in wichtigen Momenten, etwa nach dem Hinzufügen zum Warenkorb.
Wen es betrifft
- Screenreader-Nutzer
- blinde und sehbehinderte Kundinnen und Kunden
So beheben Sie es
Geben Sie jedem Element mit role="dialog" oder role="alertdialog" einen Namen: Verweisen Sie mit aria-labelledby auf die sichtbare Überschrift des Dialogs oder ergänzen Sie ein aria-label wie aria-label="Warenkorb". Setzen Sie bei der Gelegenheit den Fokus beim Öffnen in den Dialog und beim Schließen zurück auf das auslösende Element.
Bei Shopify
Meist durch den seitlichen Warenkorb, die Suche, die Schnellansicht oder Pop-up-Apps. Ergänzen Sie aria-labelledby oder aria-label in der betreffenden Liquid-Section oder im Snippet; bei App-Pop-ups wenden Sie sich an den App-Entwickler.
Bei Shoptet (CZ)
Meist durch Pop-ups des Templates oder Skripte von Drittanbietern wie Cookie-Banner oder Chat. Korrigieren Sie Ihren eigenen Code; bei Template-Elementen melden Sie es Shoptet oder einem Partner.
Bei PrestaShop
Meist durch Modal-Fenster des Themes (Warenkorb-Bestätigung, Schnellansicht) oder Module. Ergänzen Sie aria-labelledby im Modal-Markup der .tpl-Templates, am besten per Override.
Bei WooCommerce
Meist durch Cookie-Consent-, Pop-up-, Mini-Warenkorb- oder Schnellansicht-Plugins. Prüfen Sie die Plugin-Einstellungen auf eine Barrierefreiheitsoption, ergänzen Sie den Namen 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-dialog-name.
dequeuniversity.com, github.com, www.w3.org