Visa var ett fel uppstått och beskriv det tydligt

Om riktlinjen

Innehåller lagkrav
EN 9.3.3.1
WCAG 3.3.1 (A)

Område

Felmeddelanden ska vara lätta att förstå och ska visas tydligt på webbplatsen så att det är enkelt att rätta felet och komma vidare.

Därför ska det vara tydligt var det blivit fel och vad som blivit fel

Hjälp personer om det blir fel när de fyller i information på webbplatsen. Det måste vara tydligt var felet finns och felet behöver beskrivas med text. Välformulerade felmeddelanden ger personen möjlighet att rätta det som hen skrivit fel i exempelvis ett formulär.

Tydliga felmeddelanden minskar också risken för att personer som ska göra något på din webbplats blir frustrerade för att systemet inte förstår eller kan tolka den felaktigt inmatade informationen.

Vad kräver lagen?

Om det finns fält med validering av den data som personen matar in, ska felmeddelanden visas med text och det ska framgå vilket fält som är felande.

Rekommendationer utöver lagkrav

Förutom lagkraven finns det rekommendationer som kan förbättra den digitala tillgängligheten:

Utforma användbara felmeddelanden

Ett formulär med bra felmeddelanden hjälper personer att snabbt upptäcka fel, åtgärda fel och fortsätta fylla i formuläret.

Använd tydlig layout

Separera felmeddelanden från webbplatsens övriga design.
Placera felmeddelanden väl synligt och i direkt anslutning till det fält där felet inträffat.

Skriv begripligt

Skriv tydliga felmeddelanden genom att använda lättbegripliga ord och formuleringar. De ord som används i felmeddelandet ska stämma överens med de ord som används i formuläret.

Samla och sammanfatta felmeddelanden

Samla alla felmeddelanden i början av sidan så att personen får en överblick över vad hen måste göra för att korrigera felen. Om flera fel har inträffat bör du ange i texten hur många fel som måste åtgärdas för att komma vidare.

Länka felmeddelandet till rätt inmatningsfält

Vägled personen till den del av formuläret där hen kan rätta felet genom att använda länkar i felmeddelandetexter. Det underlättar navigationen från felmeddelandet till det relaterade inmatningsfältet.

Låt personen välja

Om det finns flera olika sätt att mata in uppgifterna, låt personen välja i en lista över de olika möjligheterna.

Spara det som inte är fel

Behåll så mycket av den inmatade informationen som möjligt, så att bara det som blivit fel behöver fyllas i igen. Det riskerar att bli tröttande för personen om hen måste börja om från början, trots att bara ett fält behöver rättas.

Gör fel och felmeddelanden lätta att uppfatta för användare med hjälpmedel

För personer som till exempel lyssnar igenom sidan kan det vara svårt att hitta ett fel. Ett sätt att säkerställa att personer med skärmläsare blir informerade om identifierade fel är att markera både fel och felmeddelande i koden, med hjälp av aria.

Attributet aria-invalid

Attributet aria-invalid kan sättas dynamiskt på ett formulärelement för att indikera att det innehåller ett fel – till exempel att ett värde saknas trots att fältet är obligatoriskt, eller att formatet på angiven data är fel.

Aria-attributet role med alert-dialog

Aria-attributet role med värdet alert-dialog kan användas för att indikera med kod att ett felmeddelande presenteras. Då skapas en notifiering som gör att personen inte missar meddelandet.

Så testar du felmeddelanden

Framkalla valideringsfel, till exempel genom att:

lämna obligatoriska fält tomma
fyll i fler eller färre tecken än tillåtet i ett fält
fyll i bokstäver i numeriska fält
fyll i en formellt oriktig adress (utan ”@”) i ett e-postfält
fyll i för låga eller för höga värden i numeriska fält
fyll i datum på ett otillåtet format, eller ett ogiltigt datum
fyll i ogiltiga värden i fält där det framgår att det krävs ett specifikt format.

Kontrollera att felmeddelandena gör det lätt att förstå vad som blivit fel.