Ongeldige ARIA-attribuutwaarde

Silktide controleert de waarde van elk ARIA-attribuut op je pagina's aan de hand van de waarden die de standaard daarvoor toestaat. Een attribuut met een onjuiste waarde, zoals een selectievakje met de status "yes" in plaats van "true", wordt door browsers genegeerd. Daardoor wordt de status die het beschrijft nooit aangekondigd.

<!-- Probleem: "yes" is geen geldige waarde, de status wordt genegeerd -->
<div role="checkbox" aria-checked="yes">Subscribe</div>

<!-- Oplossing: gebruik het gedefinieerde token -->
<div role="checkbox" aria-checked="true">Subscribe</div>

Waarom dit belangrijk is

Elk -attribuut bepaalt precies welke waarden het accepteert. Browsers negeren alle andere waarden in plaats van te raden. De fouten bestaan meestal uit intuïtief lijkende waarden — aria-expanded="1", aria-checked="yes", aria-level="0" — die elke visuele test doorstaan, terwijl gebruikers van een besturingselement krijgen waarvan de status niet wordt aangekondigd: een menu dat nooit zegt of het geopend is, of een selectievakje dat nooit zegt of het is aangevinkt.

Zo los je dit op

Vervang informele waarden door de tokens die het attribuut definieert: true en false in plaats van yes, no, 1 of 0.
Controleer numerieke attributen: telattributen zoals aria-level en aria-rowindex beginnen bij 1, niet bij 0.
Verwijder attributen die leeg zijn gelaten, zoals aria-checked="" — als er geen status hoeft te worden doorgegeven, hoort het attribuut niet aanwezig te zijn.

De exacte waarden die elk attribuut toestaat, staan in de MDN ARIA-attribuutreferentie.

Zo voert Silktide deze controle uit

Zoek elk element op de pagina dat ten minste één aria--attribuut bevat.
Controleer de waarde van elk attribuut aan de hand van het type dat ARIA 1.2 daarvoor definieert: true/false-attributen, attributen met drie statussen zoals aria-checked (true, false, mixed), getallen en gehele getallen, en attributen met vaste woordenlijsten zoals aria-live en aria-current.
Rapporteer elke waarde die niet overeenkomt en geef aan wat er werd verwacht.

Attributen die verwijzen naar element-ID's worden door hun eigen controles getest, zoals Ontbrekende aria-controls-ID. Attributen met vrije tekst, zoals aria-label, accepteren elke tekst.

Problemen oplossen

De waarde wordt ingesteld door een framework

Componentbibliotheken serialiseren statussen soms onjuist, bijvoorbeeld door aria-expanded="undefined" weer te geven. De bevinding verwijst naar het element, maar de oplossing ligt meestal in de configuratie van de component of in een update van de bibliotheek.

Deze controle rapporteert niets, hoewel ik bevindingen verwacht

ARIA-tests kunnen per website worden uitgeschakeld. Controleer de geavanceerde instellingen voor de website.