Empfohlene Praxis Priorität: Gering
Ein Element hat eine Rolle, die nicht zu ihm passt
Ein HTML-Element hat ein role-Attribut, das für dieses Element nicht erlaubt ist, zum Beispiel ein <button>, der als Überschrift markiert ist, oder ein <nav>-Menü, das als Button markiert ist. Das ist eine empfohlene Praxis und für sich keine Anforderung der WCAG-Stufe AA, deutet aber oft auf weitere Probleme hin.
Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.
Warum das für Ihre Kunden wichtig ist
Screenreader kündigen das Element womöglich als etwas an, das es nicht ist, oder je nach Browser unterschiedlich. Kunden erwarten dann ein Verhalten, das es nicht hat. Meist ist das eine kleine Verwirrung, kein echtes Hindernis.
Wen es betrifft
- Screenreader-Nutzer
- Nutzer von Sprachsteuerung
So beheben Sie es
Verwenden Sie das native HTML-Element, das zum Zweck passt (<button> für Aktionen, <a href> für Navigation, <h2> für Überschriften), und entfernen Sie die widersprüchliche Rolle. Ist eine eigene Rolle wirklich nötig, setzen Sie sie auf ein neutrales Element wie <div> oder <span> und ergänzen Sie das Tastaturverhalten, das die Rolle erwartet. Die erlaubten Rollen je Element stehen in der W3C-Spezifikation „ARIA in HTML“.
Bei Shopify
Meist durch eigene Sections, Snippets oder Apps (Menüs, Slider, Pop-ups). Korrigieren Sie das Markup in der betreffenden Liquid-Section oder im Snippet oder melden Sie es dem App-Entwickler.
Bei Shoptet (CZ)
Meist durch das Template oder eigenen Code. Korrigieren Sie Ihren eigenen Code; liegt es am Template, melden Sie es Shoptet oder einem Partner.
Bei PrestaShop
Meist durch .tpl-Templates des Themes oder Drittanbieter-Module (Menüs, Slider). Korrigieren Sie das Markup in den Templates von Theme oder Modul, am besten per Override.
Bei WooCommerce
Meist durch Page-Builder-Widgets, Menü- oder Slider-Plugins oder eigene Theme-Templates. Beheben Sie es in einem Template des Child-Themes oder melden Sie es dem Plugin-Autor.
Standards
Kein WCAG-Erfolgskriterium, sondern eine empfohlene Praxis, die die Website leichter nutzbar macht.
Automatische Prüfung: axe-core-Regel aria-allowed-role.
dequeuniversity.com, github.com, www.w3.org