Saknat aria-controls-ID

Silktide kontrollerar alla aria-controls-attribut på dina sidor och verifierar att element-ID:na som de anger faktiskt finns. Det här attributet anger vilken del av sidan som en kontroll styr, till exempel panelen som en flik visar eller menyn som en knapp öppnar.

<!-- Problem: inget element på sidan har id="filter-panel" -->
<button aria-expanded="false" aria-controls="filter-panel">Filter</button>

Varför detta är viktigt

Attributet aria-controls i gör det möjligt för att koppla en kontroll till det innehåll som den påverkar – vissa erbjuder en genväg för att hoppa direkt till det styrda elementet. När referensen är felaktig försvinner relationen obemärkt. Felaktiga referenser innebär oftast att ett ID har bytt namn eller att en komponent har tagits bort, så de är också en tidig varningssignal om att själva widgeten kanske inte längre fungerar som avsett.

Så här åtgärdar du det

Se till att varje ID som anges i aria-controls matchar id för ett verkligt element på samma sida. Attributet kan innehålla flera ID:n separerade med mellanslag; kontrollera varje ID.
Om det styrda elementet läggs till dynamiskt kan du antingen rendera det dolt från början eller ange aria-controls när elementet finns.
Om det styrda elementet har tagits bort permanent tar du bort attributet.

Så här testar Silktide detta

Hitta alla element på sidan som har attributet aria-controls.
Kontrollera varje ID som attributet refererar till mot de element-ID:n som finns på sidan.
Rapportera varje referens som inte matchar något element.

Felsökning

Målet skapas senare av ett skript

Silktide testar sidan medan den läses in. Om den refererade panelen visas först efter att användaren har interagerat med sidan är referensen felaktig fram till dess – behåll helst målet på sidan (dolt) så att referensen alltid kan lösas.

Den här kontrollen rapporterar inget trots att jag förväntar mig resultat

ARIA-testning kan stängas av per webbplats. Kontrollera de avancerade inställningarna för webbplatsen.