Ontbrekende ID voor aria-errormessage

Silktide controleert elk aria-errormessage-attribuut op je pagina's en verifieert of de element-ID waarnaar het verwijst daadwerkelijk bestaat. Dit attribuut koppelt een formulierveld aan het bericht waarin wordt uitgelegd wat er mis is met de ingevoerde waarde.

<!-- Probleem: geen element op de pagina heeft id="email-error" -->
<input type="email" aria-invalid="true" aria-errormessage="email-error">

Waarom dit belangrijk is

Wanneer een formulierveld als ongeldig is gemarkeerd, vertelt het ARIA- attribuut aria-errormessage aan ondersteunende technologie waar de uitleg staat. Als de verwijzing niet klopt, krijgt een gebruiker van een schermlezer te horen dat de invoer onjuist is, maar nooit waarom. Die gebruiker moet dan raden naar indelingen en vereisten die ziende gebruikers op het scherm kunnen lezen, en kan het formulier misschien helemaal verlaten.

Zo los je het op

1. Zorg dat het attribuut verwijst naar de id van het element dat het zichtbare foutbericht voor het veld bevat.
2. Combineer het met aria-invalid="true" op het veld zolang de fout van toepassing is. aria-errormessage wordt alleen aangekondigd voor ongeldige velden.
3. Zorg ervoor dat het verwezen element leesbare tekst bevat wanneer de fout wordt weergegeven, en leeg of verborgen is wanneer dat niet het geval is.

Hoe Silktide dit controleert

1. Zoek elk element op de pagina met een aria-errormessage-attribuut.
2. Controleer de ID waarnaar het verwijst aan de hand van de element-ID's die op de pagina aanwezig zijn.
3. Rapporteer elke verwijzing die niet overeenkomt met een element.

Problemen oplossen

Het fout­element wordt pas toegevoegd wanneer de validatie mislukt

Silktide controleert de pagina tijdens het laden. Laat de foutcontainer bij voorkeur permanent op de pagina staan (leeg of verborgen totdat deze nodig is), zodat de verwijzing altijd kan worden opgelost en de aankondiging werkt zodra de fout verschijnt.

Deze controle rapporteert niets, hoewel ik resultaten verwacht

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

Meer informatie

• Ontbrekende ID voor aria-describedby
• Labels voor formuliervelden
• aria-errormessage (MDN)
• WCAG 2.2: Foutidentificatie begrijpen