Manglende aria-controls-id
Silktide tjekker alle aria-controls-attributter på dine sider og verificerer, at de element-id'er, de angiver, faktisk findes. Denne attribut angiver, hvilken del af siden et kontrolelement styrer, f.eks. panelet, som en fane viser, eller menuen, som en knap åbner.
<!-- Problem: Intet element på siden har id="filter-panel" -->
<button aria-expanded="false" aria-controls="filter-panel">Filtre</button>
Hvorfor det er vigtigt
ARIA-attributten aria-controls gør det muligt for
at forbinde et
kontrolelement med det indhold, det påvirker – nogle
tilbyder en genvej til at springe
direkte til det styrede element. Når referencen er brudt, forsvinder dette
forhold uden varsel. Brudte referencer betyder som regel, at et id er
blevet omdøbt, eller at en komponent er blevet fjernet, så de er også en
tidlig advarsel om, at selve widgetten muligvis ikke længere fungerer som
tilsigtet.
Sådan retter du det
- Sørg for, at hvert id i
aria-controlsmatcherid'et for et reelt element på den samme side. Attributten kan angive flere id'er adskilt af mellemrum; tjek dem alle. - Hvis det styrede element tilføjes dynamisk, skal du enten gengive det skjult
fra starten eller indstille
aria-controls, når det findes. - Hvis det styrede element er væk for altid, skal du fjerne attributten.
Sådan tester Silktide dette
- Find alle elementer på siden med en
aria-controls-attribut. - Tjek hvert id, den refererer til, i forhold til de element-id'er, der findes på siden.
- Rapportér hver reference, der ikke matcher noget element.
Fejlfinding
Målet oprettes senere af et script
Silktide tester siden, mens den indlæses. Hvis det refererede panel først vises efter brugerinteraktion, er referencen brudt indtil da – det er bedre at beholde målet på siden (skjult), så referencen altid kan findes.
Dette tjek rapporterer ikke noget, selvom jeg forventer fund
ARIA-test kan slås fra for hver enkelt website. Tjek de avancerede indstillinger for websitet.