Tillgängliga formulär: etiketter, tips och felmeddelanden

Sex framgångskriterier för formulär

WCAG 2.2 är W3C:s aktuella rekommendation för tillgängligt webbinnehåll. För texterna i ett formulär är sex av dess framgångskriterier viktigast:

• 1.3.1 Information och relationer (nivå A): det som layouten visar, till exempel vilken etikett som hör till vilket fält, finns också i koden eller i text.
• 1.3.5 Identifiera syftet med inmatning (nivå AA): fält som frågar efter uppgifter om användaren, som namn eller e-post, anger sitt syfte i koden.
• 3.3.1 Identifiering av fel (nivå A): om ett inmatningsfel upptäcks automatiskt anges fältet och felet beskrivs i text.
• 3.3.2 Etiketter eller instruktioner (nivå A): det finns etiketter eller instruktioner när innehållet kräver inmatning från användaren.
• 3.3.3 Förslag vid fel (nivå AA): om ett fel upptäcks och en rättning är känd föreslås den, om det inte skulle äventyra säkerheten eller innehållets syfte.
• 4.1.2 Namn, roll, värde (nivå A): varje kontroll har ett namn och en roll som programvara kan läsa.

Varje fält behöver en synlig etikett

En etikett säger vad som ska stå i fältet, och den syns hela tiden medan användaren skriver. I HTML kopplar du label-elementet till fältet: etikettens for-attribut har exakt samma värde som fältets id. Skärmläsare läser då upp etiketten tillsammans med fältet, och ett klick på etiketten placerar markören i fältet. En knapp får sin etikett från sin text, och ”Skicka meddelande” säger mer än ”Skicka”. Etiketter står oftast till höger om radioknappar och kryssrutor och till vänster om eller ovanför andra fält; etiketter ovanför fälten tar mindre plats på bredden.

En platshållare är ingen etikett

Den grå texten i ett tomt fält ser ut som en etikett, men är det inte. W3C nämner problemen:

• Den försvinner så snart någon skriver, så det blir svårare att kontrollera uppgifterna innan man skickar.
• Webbläsare visar den ofta i en ljus färg med för låg kontrast.
• Skärmläsare behandlar den inte som en etikett, och stödet varierar.

Använd en platshållare högst för ett exempel, och lägg allt viktigt i etiketten eller i ett tips.

Tips och obligatoriska fält

• Lägg regler i ett tips: datumformatet, längden på ett kundnummer, vad ett lösenord behöver. I HTML kan du koppla tipset med aria-describedby, så att skärmläsare läser upp det efter etiketten.
• Ange vilka fält som är obligatoriska och vilka som är frivilliga. Om du använder en asterisk, förklara den en gång i början av formuläret.
• Placera instruktioner för hela formuläret före formuläret, till exempel om en tidsgräns.
• Håll tipsen korta. För många instruktioner gör ett formulär svårare, inte lättare.

Gruppera fält som hör ihop

Radioknappar och kryssrutor som hör ihop grupperas med elementet fieldset, och elementet legend namnger gruppen, till exempel ”Hur vill du att vi kontaktar dig?”. W3C säger att grupper av radioknappar alltid bör grupperas på det sättet. Håll legend kort, eftersom vissa skärmläsare läser upp den vid varje fält. Grupper hjälper också vid fält med samma etikett, som gatan i en leverans- och en fakturaadress.

autocomplete: låt webbläsaren hjälpa till

För fält som frågar efter uppgifter om användaren kräver 1.3.5 att syftet kan avgöras i koden. WCAG 2.2 har en lista över dessa syften, baserad på autofill-avsnittet i HTML-specifikationen, till exempel name, given-name, family-name, email, tel, street-address och postal-code. I HTML anger du dem med attributet autocomplete, till exempel autocomplete="email". Webbläsare kan då fylla i sparade värden, vilket sparar skrivande. Fält som inte handlar om användaren behöver inget syfte.

Felmeddelanden som hjälper

Ett felmeddelande har tre uppgifter: ange fältet, säga vad som är fel och säga hur det rättas. 3.3.1 kräver de två första, i text, så en röd ram eller en ikon räcker inte ensam. 3.3.3 kräver rättningen där den är känd.

• Visa meddelandet bredvid fältet och koppla det med aria-describedby, så att skärmläsare läser upp det tillsammans med fältet.
• Visa efter inskickandet en lista över alla fel högst upp, före formuläret, under en tydlig rubrik. Varje post anger fältet, problemet och rättningen, och länkar till fältet.
• Uppdatera också sidans titel, till exempel ”2 fel – Kontaktformulär”, och flytta fokus till det första fältet med ett fel.
• Behåll det som användaren redan har fyllt i. Det är vårt råd, inte en WCAG-regel: att behöva skriva allt igen efter ett enda misstag får folk att ge upp.

Kontrollera ditt formulär med Do4U

Verktyget Formulärtexter kontrollerar texterna i ett webbformulär. Du klistrar in formulärets HTML eller anger sidans adress, och du kan lägga till de felmeddelanden som ditt formulär visar. Koden läser varje fält: dess etikett och var etiketten kommer ifrån, tips, platshållare, obligatoriska fält, autocomplete-värden och grupper av radioknappar eller kryssrutor. Den hittar problem som ett fält utan etikett, en platshållare som enda etikett, obligatoriska fält som texten inte nämner, saknade autocomplete-värden och vaga felmeddelanden, vart och ett med sitt framgångskriterium. AI:n föreslår en tydlig etikett, ett kort tips och ett felmeddelande som anger fältet och säger hur inmatningen rättas. Koden kontrollerar varje förslag och bygger ett förbättrat HTML-utkast av ditt formulär.

Do4U hittar ledtrådar och bygger ett utkast, du kontrollerar och bestämmer. Verktyget kontrollerar märkningen, inte dina stilar, skript eller tangentbordsanvändning, och det säger inte om ditt formulär är tillgängligt. Testa det förbättrade formuläret med tangentbord och skärmläsare.