Skriv tillgängliga fel för tidsbokningsformulär

Ett felmeddelande ska förklara vad personen kan göra härnäst. ”Ogiltig inmatning” hjälper knappt vid fel datumformat och beskriver en upptagen tid felaktigt. En bokning med okänd status behöver ytterligare en annan återkoppling.

Tre situationer med lämpliga texter

Följande tidsbokningstjänst är fiktiv. Den använder ett textfält för datum och har en översikt över befintliga bokningar. Exempeldatumet är 14 december 2026.

Det tredje meddelandet säger inte att bokningen misslyckades: det är ännu inte känt. I exemplet leder ”Öppna tidsöversikt” till befintliga bokningar. Om den verkliga produkten saknar en sådan översikt behövs ett annat tillförlitligt sätt att klarlägga statusen.

Koppla meddelandet till fältet

Visa format och exempel innan ett fel uppstår. Stöd så långt möjligt de inmatningssätt målgruppen behöver; undvik onödigt snäva format. Det förenklade exemplet visar textfältet efter ett formatfel:

<label for="appointment-date">Datum</label>
<p id="appointment-date-hint">ÅÅÅÅ-MM-DD, till exempel 2026-12-14</p>
<input id="appointment-date" name="appointmentDate" type="text"
  value="14/12" aria-invalid="true"
  aria-describedby="appointment-date-hint appointment-date-error">
<p id="appointment-date-error">Ange datum som ÅÅÅÅ-MM-DD.</p>

Identifierarna kopplar etikett, hjälptext och fel till samma fält. Färg får hjälpa, men meddelandet ska förstås även utan röd kant. W3C WAI-handledningen beskriver kopplingen med aria-describedby och begripliga anvisningar för rättning.

Ta bort feltexten, dess referens och det ogiltiga tillståndet efter en giltig rättning; formathjälpen kan vara kvar. Koden visar inte ensam att hela formuläret är tillgängligt.

Testa vägen till rättning

Vid flera fel efter inskickning hjälper en sammanställning med länkar till berörda fält. Bestäm om fokus flyttas till sammanställningen eller det första felaktiga fältet, och testa med tangentbord och avsedda skärmläsare. Dynamiska meddelanden måste märkas utan att varje inmatning avbryts i onödan.

I exemplet ska personen kunna rätta datumet utan att fylla i andra giltiga uppgifter igen. Kontrollera sedan att det gamla felet inte längre läses upp. Vid en upptagen tid behålls övriga uppgifter medan personen väljer en annan tid. Vid oklar status ska nästa steg först klarlägga den befintliga bokningen.

Testa också ett tydligt framgångsmeddelande med den bekräftade tiden. Då kan personen förstå att uppgiften är klar.

Källor

• W3C WAI: User Notification