2-5-3
CSS voegt tekst toe die niet in de naam zit
Een knop. In de HTML staat “Verwijderen.” Maar de CSS voegt via ::after het woord “definitief” toe.
Zichtbaar "Submit", aria-label "Verzenden"
Een Nederlandstalige website. Een knop. Op het scherm staat “Submit.” Het aria-label zegt “Verzenden.”
Afbeeldingsknop met afwijkende alt-tekst
Een knop die een afbeelding is. Op de afbeelding staat “Inschrijven.” De alt-tekst zegt: “Registreer voor de nieuwsbrief.”
Knop met icoon en tekst, maar aria-label vervangt alles
Een knop. Disketje-icoon. Daarnaast: “Opslaan.” De developer dacht: laat ik een uitgebreider aria-label toevoegen. “Sla het huidige document op naar de server.”
aria-labelledby verwijst naar de verkeerde tekst
Een invoerveld. Zichtbaar label: “E-mailadres.” Maar aria-labelledby verwijst naar een verborgen element met: “Voer uw elektronische postadres in.”
"Klik op Zoeken." Niets gebeurt.
Je gebruikt spraakbesturing. Je ziet een knop met “Zoeken” erop. Je zegt: “Klik op Zoeken.”
Taalswitch met alleen 'EN' en 'NL': hoe maak je die toegankelijk?
Je hebt vast wel eens zo’n strakke taalswitch gezien: twee letters, een sliding indicator, mooi geanimeerd. EN | NL. Simpel. Elegant. En meestal compleet ontoegankelijk.
SC 2.5.3 - Wat betekent “Label in naam”
Mensen die spraakherkenningssoftware gebruiken om te navigeren, moeten vaak de exacte naam of het label van een knop, link of ander interactief element uitspreken om die te activeren. Als de zichtbare tekst niet overeenkomt met de technische naam van het element, kan dit verwarrend zijn of zelfs onbruikbaar worden.