Fouten aan velden koppelen met aria-describedby

Een foutmelding naast een veld lijkt voor jou met dat veld verbonden. Voor een schermlezer is het echter slechts losse tekst die de gebruiker misschien nooit hoort. ⚠️

Je moet de melding formeel aan de invoer koppelen. Het attribuut dat dit doet is aria-describedby en het staat op het veld.

Geef het foutmeldingselement een id en stel aria-describedby van de invoer in op diezelfde id. Nu zijn de twee officieel aan elkaar gekoppeld.

Wanneer de focus op de invoer landt, leest de schermlezer het label, het type en daarna de beschrijving voor. De foutmelding staat niet langer op zichzelf.

aria-describedby vervangt het label niet. Het label geeft de naam; describedby voegt extra informatie toe die daarna wordt voorgelezen.

Je kunt meerdere id's opgeven, gescheiden door spaties. De browser leest ze in volgorde voor, zodat je een hint en een foutmelding kunt combineren.

Voeg de id van de foutmelding alleen aan aria-describedby toe zolang de foutmelding wordt weergegeven. Verwijzen naar een leeg of verborgen knooppunt kan niets voorlezen of gebruikers in verwarring brengen.

Het beschreven element moet echte, zichtbare tekst bevatten. aria-describedby leest de inhoud ervan voor, dus een lege span beschrijft niets bruikbaars.

Als het doel display none heeft, slaan de meeste schermlezers het over. Zorg dat de fouttekst wordt weergegeven en zichtbaar is, zodat de beschrijving daadwerkelijk wordt aangekondigd.

Combineer describedby met aria-invalid op hetzelfde veld. Het ene zegt dat er iets is mislukt; het andere zegt waarom. Samen vertellen ze het volledige verhaal.

Hetzelfde attribuut kan ook opmaakhints bevatten, zoals hints voor wachtwoordregels. Fouten zijn een veelgebruikte toepassing, maar niet de enige.

Koppel fouten aan velden met aria-describedby, dat naar een echte, zichtbare id verwijst. De schermlezer leest het veld en de foutmelding daarna samen voor. ✅