Skapa tydliga och klickbara fältetiketter/ledtexter
För varje fält i ett formulär där användarna ska fylla i information, skapa en tydlig fältetikett (vanligtvis elementet label
) som förklarar fältets funktion. Men skriv inte mer information än vad som är nödvändigt, eftersom det kan göra att formuläret upplevs som rörigt och komplicerat.
Genom att i kod (med hjälp av for
-attributet på label
-elementet) koppla etiketten till fältet kan användare markera fältet även genom att klicka på etiketten, vilket ökar den klickbara ytan. Genom kopplingen blir det även möjligt för en person som saknar en visuell presentation att veta vilken etikett som hör till vilket fält, eftersom skärmläsare läser upp etiketten när fältet får fokus.
Om det behövs utförliga instruktioner, placera dessa i första hand i inledningen av formuläret.
Rekommendationer för fältetiketter/ledtexter i formulärLänk hit
- Skriv tydliga och informativa fältetiketter/ledtexter
- Koppla ihop fältetikett/ledtext och inmatningsfält så att även etiketten blir klickbar.
- Placera fältetiketterna där användarna lätt ser dem.
- Skriv utförliga instruktioner före formuläret, när sådana behövs.
- Lösningen ska inte vara beroende av title-attribut och placeholder-texter.
Skriv tydliga och informativa fältetiketterLänk hit
Målet är att det ska vara enkelt för användarna att förstå vilken information de ska fylla formulärets fält med, och hur de ska göra det. Se R61. Skriv beskrivande rubriker och etiketter.
Särskilt viktigt är att tydligt ange vilka fält som är obligatoriska. Se R101. Markera obligatoriska fält i formulär.
Skriv fältetiketter till kryssrutor så att det tydligt framgår vad det innebär om kryssrutan är ifylld respektive tom. Skriv i jakande form, till exempel ”Ja, jag vill få nyhetsbrevet via e-post”. Undvik kryssrutor där användaren ska välja bort någonting, till exempel ”Nej tack, jag vill inte ha nyhetsbrevet via e-post”.
Koppla ihop fältetikett och inmatningsfältLänk hit
För de flesta webbläsare kan ni koppla ihop fältetiketten och inmatningsfältet så att etiketten blir klickbar. Då räcker det att användaren klickar på etiketten för att fokus ska hamna på inmatningsfäletet (för textfält innebär det att markören hamnar i skrivfältet). Därmed blir den klickbara ytan för fältet större, vilket underlättar för användarna. Dessutom blir det möjligt för hjälpmedel, till exempel skärmläsare, att koppla rätt etikett till respektive fält. Det vanligaste är att använda label
-element för att skriva fältetiketter. Koppla etiketten till rätt inmatningsfält genom att i for
-attributet för label
-elementet ange id
för fältet den ska kopplas till.
Ibland kan det istället vara bättre att ange en gemensam etikett (legend
) för en grupp av inmatningsfält (fieldset
). Då kan det vara nödvändigt att komplettera denna med individuella (eventuellt visuellt osynliga) etiketter för varje enskilt fält. Det kan göras till exempel med aria-labelledby
eller title
-attribut. (Se även R121. Ange i kod vad sidans olika delar har för roll.)
Placera fältetiketterna där användarna lätt ser demLänk hit
- Textfält och rullgardinsmenyer: sätt etiketten ovanför eller till vänster om fältet.
- Radioknappar och kryssrutor: sätt etiketten till höger om knappen eller rutan.
- Personer som använder förstoringshjälpmedel har lättare att se etiketter som placeras nära fältet.
- Vänsterjustera fältetiketterna.
Skriv utförliga instruktioner före formuläret, när det behövsLänk hit
Undvik att skriva instruktioner mellan fältetiketten och fältet, eller efter fältet.
Längre textbeskrivningar kan kopplas till rätt inmatningsfält med hjälp av ARIA-attributet aria-describedby
. Då kan exempelvis en skärmläsare berätta mer detaljer om ett inmatningsfält när användaren så önskar.
Undvik att göra lösningen beroende av title-attribut och placeholder-texterLänk hit
Title
-texter visas sällan för användare med exempelvis pekskärm.
Placeholder
-texter har fördelen att de är sparsamma med utrymme, men även den stora nackdelen att texten inte längre syns när användaren börjat fylla i någon information i fältet. Använd gärna dessa attribut, men gör inte lösningen beroende av informationen.
Utdrag från WCAG-standardenLänk hit
Riktlinje 3.3 Inmatningsstöd: Hjälp användare att undvika misstag och rätta till misstag.
3.3.2 Ledtexter/etiketter eller instruktioner: Det finns Ledtexter/etiketter eller instruktioner när innehåll kräver inmatning från användaren. (Nivå A)
Relaterade riktlinjerLänk hit
- R50. Minimera antalet fält i formulär
- R52. Fyll formulär med kända uppgifter
- R101. Markera obligatoriska fält i formulär
- R61. Skriv beskrivande rubriker och etiketter
MätbarhetLänk hit
Gör användningstester på pappersprototyper för att enkelt och billigt undersöka om fältetiketterna är tydliga.
TerminologiLänk hit
I html kallas formulär för form. Inmatningsfält heter oftast input. Etiketter / ledtexter kallar vi för fältetiketter när de beskriver inmatningsfält.
Kommentarer till denna riktlinje
Kommentarer (6)
Hej, jag har en fråga om en riktlinje som jag inte riktigt förstår.
På https://webbriktlinjer.se/r/55-skapa-tydliga-och-klickbara-faltetiketter/#rekommendationer-for-faltetiketter-i-formular
punkt 5 under ”Rekommendationer för fältetiketter i formulär” så skriver ni ”Undvik att skriva title-texter till fält.” etc.
Vad syftar ni på med ordet ”title-texter”?
Vänliga hälsningar
Anna
Hej Anna, det syftar på html-attributet title, som kan sättas på länkar, inmatningsfält mm. Title-attributet presenteras endast i ett fåtal situationer, och användare med pekskärm kan oftast inte tillgodogöra sig innehållet. För- och nackdelar med title-attribut diskuteras flitigt i tillgänglighetskretsar, se t.ex. https://mrwweb.com/the-title-attribute-and-why-its-almost-useless/. När det gäller länkar avråder de flesta på senare tid från användning. För inmatningsfält är det en godkänd lösning, men bara i sista hand. Se http://www.w3.org/WAI/tutorials/forms/labels/#using-the-title-attribute
Hej, hur kopplar man en label till 2st radiobuttons?
I regel används elementet
fieldset
för att gruppera radioknappar, och elementetlegend
för att benämna gruppen. Då behövs bara enlabel
till varje radioknapp. Ett enkelt exempel på detta finns hos W3C: https://www.w3.org/WAI/tutorials/forms/grouping/#radio-buttonsPå w3.org beskrivs syftet med ’aria-label’ så här:
”The purpose of this technique is to provide a label for objects that can be read by assistive technology. The aria-label attribute provides the text label for an object, such as a button. When a screen reader encounters the object, the aria-label text is read so that the user will know what it is.”
https://www.w3.org/TR/WCAG20-TECHS/ARIA6.html
Finns det något som förbjuder att man använder ’aria-label’ för att beskriva ett formulärfält?
Hej!
Det finns inget förbud mot aria-label för att ge ett formulärfält ett maskinläsbart namn. Däremot är det rekommenderat att i första hand använda HTML-element framför ARIA, d.v.s. i detta fall. Genom att använda ett visuellt synligt label-element som kopplas med for-attribut till fältet, kommer den synliga ledtexten överensstämma med namnet, och användare kan markera fältet genom att klicka på etiketten vilket ökar den klickbara ytan. Om du använder aria-label måste du tänka på att det ska finnas en visuellt synlig ledtext för alla inmatningsfält, som ska överensstämma med fältets maskinläsbara namn.
Skriv kommentar
Funktionen för att skriva kommentarer använder kakor. Läs mer om kakorna. Enbart förstapartskakor används. Vill du inte godkänna kakor så kan du ställa in din webbläsare att blockera dem. Funktionen går ändå att använda men den kommer då att ställa vissa frågor om och om igen, och kan inte förhandsvisa dina kommentarer.
För att kunna erbjuda denna funktion behöver vi lagra de uppgifter som du själv skriver in (namn, e-post, eventuell webbadress och själva kommentaren) samt IP-nummer. Den rättsliga grunden är samtycke och informationen ligger kvar så länge DIGG bedömer att den tillför förståelse för riktlinjen, eller tills du begär att den raderas. Läs mer om DIGGs behandling av personuppgifter.