Fehlende übergeordnete ARIA-Rolle
Silktide überprüft Elemente, deren ARIA-Rolle nur innerhalb eines bestimmten Containers sinnvoll ist, etwa ein Tab, das in einer Tab-Leiste liegen muss, und verifiziert, dass der erforderliche Container vorhanden ist.
<!-- Problem: ein Tab ohne umgebende tablist -->
<button role="tab">Übersicht</button>
<!-- Lösung: die Tabs in ihrem erforderlichen Container einschließen -->
<div role="tablist">
<button role="tab">Übersicht</button>
</div>
Warum das wichtig ist
Elementrollen in werden durch ihren Kontext definiert:
Ein tab ist das dritte von fünf Tabs, eine option ist eine Auswahl in einer Liste, eine
row ist Teil einer Tabelle.
leiten Position, Anzahl und Navigationsverhalten vom übergeordneten Widget ab.
Ohne diesen Kontext kann das Element falsch erkannt, ohne Kontext angekündigt
oder ganz übersprungen werden – der Autor hat nur die Hälfte eines Widgets hinzugefügt;
für Nutzer ergibt sich dadurch kein verlässlich nutzbares Ganzes.
So beheben Sie das
- Umschließen Sie das Element mit einem Container mit der erforderlichen Rolle – z. B.
gehören Elemente mit
role="tab"in einerole="tablist". - Wenn der Eltern-Container die Kinder im Code nicht physisch umschließen kann, fügen Sie
aria-ownsam logischen Elternteil hinzu, um sie zu übernehmen. - Wenn das Element in Wahrheit kein solches Item ist, entfernen oder korrigieren Sie seine Rolle.
Häufige Zuordnungen: tab benötigt tablist; option benötigt listbox;
menuitem benötigt menu oder menubar; radio in einer ARIA-Gruppe benötigt
radiogroup; treeitem benötigt tree; row benötigt grid, table,
treegrid oder rowgroup; Zellen und Header benötigen row.
So prüft Silktide dies
- Jedes Element finden, dessen ARIA-Rolle eine bestimmte übergeordnete Rolle erfordert.
- Seine Vorfahren nach oben durchgehen, einschließlich eventueller Übernahme per
aria-owns, und nach einem Element mit der erforderlichen übergeordneten Rolle suchen. - Elemente melden, bei denen kein solcher Vorfahre gefunden wurde.
Fehlerbehebung
Die übergeordnete Rolle befindet sich auf einem Element mit einer impliziten Rolle
Native Elemente zählen: Ein <option> innerhalb eines <select> benötigt keine expliziten
Rollen, weil beide die richtigen Rollen implizit haben. Treffer erscheinen, wenn
eine explizite Item-Rolle ohne jeden passenden übergeordneten Kontext – explizit oder
implizit – verwendet wird.
Dieser Check meldet nichts, obwohl ich Treffer erwarte
ARIA-Tests können pro Website deaktiviert werden. Prüfen Sie die Erweiterten Einstellungen der Website.