Foutidentificatie

Silktide onderzoekt verplichte formuliervelden die aangepaste validatie lijken te gebruiken in plaats van de ingebouwde controle van de browser, en waarschuwt wanneer er geen duidelijke manier is waarop de foutmelding mensen die hulptechnologie gebruiken kan bereiken.

Waarom dit belangrijk is

Wanneer een formulier een ongeldig antwoord weigert, zien ziende gebruikers meestal een rode omtrek of een melding bij het veld. Een gebruiker van een krijgt daar niets van mee, tenzij de pagina de fout in de code beschikbaar maakt: het formulier weigert simpelweg te verzenden, zonder uitleg over wat er misging of waar. Het resultaat is een formulier dat sommige bezoekers stilzwijgend buitensluit.

Browsers kondigen hun eigen ingebouwde validatiemeldingen automatisch aan. Het risico ontstaat wanneer een pagina dit uitschakelt of vervangt door eigen validatie en vergeet de vervanging aan te sluiten op .

Zo los je dit op

Geef elk veld met aangepaste validatie een programmatische route voor de foutmelding, met :

<!-- Probleem: aangepaste validatie zonder toegankelijk foutkanaal -->
<form novalidate>
  <input type="text" required>
  <span class="error">Voer je naam in</span>
</form>

<!-- Oplossing: het veld verwijst naar de foutmelding -->
<form novalidate>
  <input type="text" required aria-describedby="name-error">
  <span id="name-error" class="error">Voer je naam in</span>
</form>

Een van de volgende opties voldoet aan de controle:

aria-errormessage op het veld, verwijzend naar het element waarin je de fouttekst plaatst (stel aria-invalid="true" in wanneer de fout wordt weergegeven).
aria-describedby op het veld, verwijzend naar het meldingselement.
Een in het formulier: een element met role="alert", role="status" of aria-live, waarin je validatie fouttekst schrijft.

Je kunt de aanpassing ook verwijderen en de ingebouwde validatie van de browser fouten laten melden; die is standaard toegankelijk.

Zo test Silktide dit

Vind zichtbare verplichte velden: invoervelden, tekstgebieden en keuzemenu's met de markering required of aria-required="true".
Behoud alleen velden waarvoor aanwijzingen bestaan dat de ingebouwde validatie van de browser wordt omzeild of vervangen: het formulier heeft novalidate, een verzendknop heeft formnovalidate, het veld is gemarkeerd met aria-invalid, het gebruikt aria-required zonder het systeemeigen kenmerk required, of het veld of formulier bevat aanwijzingen voor aangepaste validatie (zoals foutgerelateerde kenmerken of containers voor foutmeldingen).
Zoek voor elk van deze velden naar een toegankelijk foutkanaal: een geldige verwijzing met aria-errormessage, een geldige verwijzing met aria-describedby of een livegebied binnen het formulier.
Waarschuw voor velden die geen van deze opties hebben. Dit is een waarschuwing en geen bevestigde fout, omdat validatiegedrag tijdens runtime niet volledig uit de code van de pagina kan worden afgeleid.

Problemen oplossen

Mijn fouten worden correct aangekondigd

De controle zoekt naar de structuur die aankondigingen mogelijk maakt, niet naar de aankondiging zelf. Als je framework alleen op het moment dat een fout optreedt een livegebied invoegt of de ARIA-verwijzingen toevoegt, bevat de geladen pagina geen foutkanaal en wordt het veld gemarkeerd. Door het (lege) meldingselement en de verwijzing vooraf toe te voegen, los je dit op. Dit is bovendien robuuster.

Het element waarnaar wordt verwezen bestaat nog niet

Verwijzingen moeten verwijzen naar elementen die op de pagina bestaan. Een aria-describedby die verwijst naar een id die pas later wordt aangemaakt, telt als geen foutkanaal.