Förenklad beskrivning av WCAG-kriteriet 3.3.2

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)


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)

  • Besökare skriver:

    Hej, jag har en fråga om en riktlinje som jag inte riktigt förstår.

    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

  • Christer Hagman skriver:

    Hej, hur kopplar man en label till 2st radiobuttons?

  • Andreas skriver:

    På 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?

    • Elin Svensson skriver:

      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.


Om denna riktlinje

Den är relevant för DOS-lagen.

Status på vår webbplats


(Då uppdateras status i checklistorna.)

Om WCAG

WCAG (Web Content Accessibility Guidelines) är den standard som bland annat webbdirektivet och DOS-lagen bygger på. Se sidan Följ standarder för tillgänglighet.

WCAG 2.1 saknar ännu svensk översättning, men för de formuleringar som är identiska i version 2.0 och 2.1 citeras den officiella översättningen av version 2.0. Utdraget kan dock innehålla fel. Den version som är mest giltig vid uttolkning är det engelskspråkiga originalet på W3C:s webbplats.

Där finns även de officiella förklaringarna och lösningsförslag till riktlinjen (på engelska).