WCAG 3.3.1 Identifiering av fel

När butiken upptäcker ett fel i det kunden har fyllt i ska det synas vilket fält det gäller, och felet ska beskrivas med text. En röd ram räcker inte. I kassan är det felen i adress, postnummer, e-post och kortuppgifter som avgör om köpet blir av.

• Fältet får bara en röd ram, utan någon text som säger vad som är fel.
• Ett allmänt meddelande högst upp, ”Något gick fel”, utan att det framgår vilket fält det gäller.
• Felmeddelandet står långt från fältet och är inte kopplat till det i koden.
• Fel i rabattkoden eller i betalsteget visas en kort stund och försvinner sedan.
• Felet visas, men skärmläsaren säger inget, eftersom meddelandet varken får fokus eller läses upp.

Skriv felet med text vid fältet, koppla texten till fältet med aria-describedby och markera fältet med aria-invalid. Flytta fokus till det första fältet med fel när kunden försöker gå vidare.

<label for="epost">E-post</label>
<input id="epost" type="email" autocomplete="email"
       aria-invalid="true" aria-describedby="epost-fel">
<p id="epost-fel">E-postadressen saknar @, till exempel namn@exempel.se.</p>

Månadsgranskningen

Månadsgranskningen skickar formulären tomma, utan att något skickas vidare, och larmar när ett synligt felmeddelande visas utan att skärmläsare får veta det (aria-invalid, role="alert", aria-live eller flyttat fokus). Om meddelandet beskriver felet begripligt, och hur betalsteget hanterar fel, behöver du prova själv.

• Understanding 3.3.1 Error Identification hos W3C (på engelska)
• Kravet i W3C:s svenska översättning

Det svenska namnet kommer från W3C:s auktoriserade svenska översättning, som gäller WCAG 2.0. Kravet 3.3.1 har samma lydelse i WCAG 2.1.