Saknad överordnad ARIA-roll
Silktide utför kontroller av element vars ARIA-roll bara är meningsfull i en specifik typ av behållare, till exempel en flik som måste ligga i en fliklist, och verifierar att den obligatoriska behållaren finns.
<!-- Problem: en flik utan någon tablist runt sig -->
<button role="tab">Översikt</button>
<!-- Lösning: omslut flikarna med deras obligatoriska behållare -->
<div role="tablist">
<button role="tab">Översikt</button>
</div>
Varför detta är viktigt
Objektroller i definieras av sitt sammanhang:
en tab är den tredje av fem flikar, en option är ett val i en lista, och en
row är en del av en tabell.
hämtar position, antal och navigeringsbeteende från den överordnade widgeten.
Utan den kan objektet identifieras felaktigt, meddelas utan något sammanhang
eller hoppas över helt – utvecklaren har lagt till halva widgeten, och användarna
får inte tillförlitligt någon av delarna.
Så här åtgärdar du det
- Omslut elementet med en behållare med den obligatoriska rollen – placera till exempel
element med
role="tab"inuti enrole="tablist". - Om den överordnade behållaren inte fysiskt kan omsluta de underordnade elementen i koden, lägger du till
aria-ownspå den logiska överordnade behållaren för att göra dem till dess underordnade element. - Om elementet egentligen inte är den typen av objekt tar du bort eller korrigerar dess roll.
Vanliga par: tab behöver tablist; option behöver listbox;
menuitem behöver menu eller menubar; radio i en ARIA-grupp behöver
radiogroup; treeitem behöver tree; row behöver grid, table,
treegrid eller rowgroup; celler och rubriker behöver row.
Så här testar Silktide detta
- Hitta alla element vars ARIA-roll kräver en specifik överordnad roll.
- Gå upp genom dess överordnade element och följ även eventuell adoption via
aria-owns, och leta efter ett element med en obligatorisk överordnad roll. - Rapportera element där ingen sådan överordnad förekomst hittas.
Felsökning
Den överordnade rollen finns på ett element med en implicit roll
Inbyggda element räknas: en <option> inuti en <select> behöver inga uttryckliga
roller, eftersom båda implicit har rätt roller. Resultat visas när en uttrycklig objektsroll
används utan någon kvalificerande överordnad roll, uttrycklig eller implicit.
Den här kontrollen rapporterar inget trots att jag förväntar mig resultat
ARIA-testning kan stängas av per webbplats. Kontrollera webbplatsens avancerade inställningar.