Ugyldig ARIA-attributtverdi

Silktide kontrollerer verdien til hvert ARIA-attributt på sidene dine opp mot verdiene standarden tillater for det. Et attributt med feil verdi, for eksempel en avkrysningsboks med tilstanden «yes» i stedet for «true», ignoreres av nettlesere, slik at tilstanden det beskriver aldri blir kunngjort.

<!-- Problem: "yes" er ikke en gyldig verdi, så tilstanden fjernes -->
<div role="checkbox" aria-checked="yes">Abonner</div>

<!-- Løsning: bruk det definerte symbolet -->
<div role="checkbox" aria-checked="true">Abonner</div>

Hvorfor dette er viktig

Hvert -attributt definerer nøyaktig hvilke verdier det aksepterer, og nettlesere forkaster alt annet i stedet for å gjette. Feilene er vanligvis intuitive verdier – aria-expanded="1", aria-checked="yes", aria-level="0" – som består alle visuelle tester, mens brukere av får en kontroll uten kunngjort tilstand: en meny som aldri sier om den er åpen, eller en avkrysningsboks som aldri sier om den er avkrysset.

Slik løser du problemet

Erstatt uformelle verdier med symbolene attributtet definerer: true og false i stedet for yes, no, 1 eller 0.
Kontroller numeriske attributter: telleattributter som aria-level og aria-rowindex begynner på 1, ikke 0.
Fjern attributter som står tomme, for eksempel aria-checked="" – hvis det ikke finnes noen tilstand å formidle, skal attributtet ikke være til stede.

De nøyaktige verdiene som er tillatt for hvert attributt, står i MDNs ARIA-attributtreferanse.

Slik tester Silktide dette

Finn alle elementer på siden som har minst ett aria--attributt.
Kontroller verdien til hvert attributt opp mot typen ARIA 1.2 definerer for det: true/false-attributter, attributter med tre tilstander som aria-checked (true, false, mixed), tall og heltall, samt attributter med faste ordlister som aria-live og aria-current.
Rapporter hver verdi som ikke samsvarer, og oppgi hva som var forventet.

Attributter som refererer til element-ID-er, testes av egne kontroller, for eksempel Manglende aria-controls-ID, og fritekstattributter som aria-label godtar all tekst.

Feilsøking

Verdien settes av et rammeverk

Komponentbiblioteker serialiserer av og til tilstander feil, for eksempel ved å gjengi aria-expanded="undefined". Funnet peker på elementet, men løsningen ligger vanligvis i hvordan komponenten er konfigurert, eller i en oppdatering av biblioteket.

Denne kontrollen rapporterer ingenting, selv om jeg forventer funn

ARIA-testing kan slås av for hvert nettsted. Kontroller de avanserte innstillingene for nettstedet.