Fejlidentifikation

Silktide undersøger obligatoriske formularfelter, der ser ud til at bruge brugerdefineret validering i stedet for browserens indbyggede kontrol, og advarer, når der ikke er nogen tydelig måde, hvorpå fejlmeddelelsen kan nå personer, der bruger hjælpeteknologier.

Hvorfor det er vigtigt

Når en formular afviser et ugyldigt svar, ser seende brugere typisk en rød kant eller en meddelelse nær feltet. En bruger af får intet af dette, medmindre siden eksponerer fejlen i koden: Formularen nægter blot at blive indsendt uden forklaring på, hvad der gik galt, eller hvor. Resultatet er en formular, der i stilhed udelukker nogle besøgende.

Browsere annoncerer automatisk deres egne indbyggede valideringsmeddelelser. Risikoen opstår, når en side slår dette fra eller erstatter det med sin egen validering og glemmer at forbinde erstatningen for .

Sådan løser du det

Giv hvert brugerdefineret valideret felt en programmatisk vej til dets fejlmeddelelse ved hjælp af :

<!-- Problem: brugerdefineret validering uden tilgængelig fejlkanal -->
<form novalidate>
  <input type="text" required>
  <span class="error">Indtast dit navn</span>
</form>

<!-- Løsning: feltet peger på sin fejlmeddelelse -->
<form novalidate>
  <input type="text" required aria-describedby="name-error">
  <span id="name-error" class="error">Indtast dit navn</span>
</form>

Et af disse opfylder tjekket:

aria-errormessage på feltet, der peger på det element, du udfylder med fejlteksten (angiv aria-invalid="true", når fejlen vises).
aria-describedby på feltet, der peger på meddelelseselementet.
En i formularen – et element med role="alert", role="status" eller aria-live – som din validering skriver fejltekst i.

Alternativt kan du fjerne tilpasningen og lade browserens oprindelige validering rapportere fejl, hvilket er tilgængeligt som standard.

Sådan tester Silktide dette

Find synlige obligatoriske felter – inputfelter, tekstområder og rullemenuer markeret med required eller aria-required="true".
Behold kun felter med tegn på, at browserens oprindelige validering omgås eller erstattes: Formularen har novalidate, en indsendelseskontrol har formnovalidate, feltet er markeret med aria-invalid, det bruger aria-required uden den oprindelige required-attribut, eller feltet eller formularen har spor af brugerdefineret validering (såsom fejlrelaterede attributter eller beholdere til fejlmeddelelser).
Se efter en tilgængelig fejlkanal for hvert sådant felt: en gyldig aria-errormessage-reference, en gyldig aria-describedby-reference eller en live region i formularen.
Advar om felter, der ikke har nogen. Dette er en advarsel frem for en bekræftet fejl, fordi valideringsadfærd under kørsel ikke kan observeres fuldt ud ud fra sidens kode.

Fejlfinding

Mine fejl annonceres korrekt

Tjekket ser efter den struktur, der gør annonceringer mulige, ikke selve annonceringen. Hvis dit framework kun indsætter en live region eller ARIA-referencer i det øjeblik, der opstår en fejl, viser den indlæste side ingen kanal, og feltet markeres. Hvis du tilføjer det (tomme) meddelelseselement og referencen på forhånd, løser det dette og er også mere robust.

Det refererede meddelelseselement findes ikke endnu

Referencer skal pege på elementer, der findes på siden. En aria-describedby, der peger på et id, som først oprettes senere, tæller som ingen kanal.