Ange syftet för formulärfält i koden

Om riktlinjen

  • EN 9.1.3.5
  • WCAG 1.3.5 (AA)

Att information i inmatningsfält förmedlas maskinläsbart är viktigt eftersom det hjälper användare med skärmläsare eller andra tekniska hjälpmedel att förstå och fylla i formulär korrekt. Det ökar användbarheten och tillgängligheten för personer som använder skärmläsare eller andra hjälpmedel.

Därför ska du ange vilket syfte ett formulärfält har

Att ange vilken typ av innehåll som förväntas hjälper personer att fylla i inmatningsfält i formulär.

Webbläsare eller hjälpmedel får då möjlighet att föreslå inmatning i vanliga formulärfält baserat på tidigare inmatning i fält av samma typ, såsom exempelvis gatu- och postadress. Det kan också göra det möjligt att presentera fältet på ett sätt (till exempel med en symbol) som personen känner igen.

Tanken är att det ska finnas standardiserade (eller individualiserade) symboler för dessa olika ändamål, som webbläsaren (eventuellt med hjälp av hjälpmedel eller tilläggsprogram) kan presentera för personen i direkt anslutning till inmatningsfältet. Än så länge har vi inte kännedom om någon sådan implementation.

Detta är bra för alla, men kanske framför allt för personer med vissa kognitiva och motoriska funktionsnedsättningar. Det underlättar också för personer som inte behärskar språket så bra.

Vad kräver lagen?

Syftet med ett inmatningsfält ska anges maskinläsbart

Syftet med ett inmatningsfält ska anges på ett maskinläsbart sätt. För html innebär detta användning av attributet autocomplete, med korrekt värde.

Html-standarden listar vanliga inmatningsfält

I html5-standarden finns en lista med vanliga ändamål för inmatningsfält. Nedan följer ett utdrag från listan, aningen förenklat och anpassat efter svenska förhållanden.

Html Living standard 4.10 Forms (whatwg.org) Länk till annan webbplats.

Html5-standarden – vanliga inmatningsfält

Standardiserad benämning

Betydelse

Exempel på inmatning

”name”

Fullständigt namn

Timothy John Berners-Lee

”given-name”

Förnamn

Timothy

”additional-name”

Mellannamn

John

”family-name”

Efternamn

Berners-Lee

”nickname”

Smeknamn

Tim

”organization-title”

Titel

Professor

”username”

Användarnamn

timbl

”new-password”

Nytt lösenord (inmatningsfält där användaren ska hitta på ett lösenord.)

GUMFXbadyrS3

”current-password”

Aktuellt lösenord (vid inloggning)

qwerty

”organization”

Namn på företag eller organisation

World Wide Web Consortium

”street-address”

Gatuadress (kan ha flera rader)

Storgatan 37

”address-level1”

Postort

Stockholm

”country”

Landskod

SE

”country-name”

Land

Sverige

”postal-code”

Postnummer

113 00

”cc-name”

Namn på kreditkort

Tim Berners-Lee

”cc-number”

Kreditkortsnummer

4114360123456785

”cc-exp”

Giltighetsdatum för kreditkort (Expiration date)

2014-12

”cc-exp-month”

Månad i sista giltighetsdatum för kreditkort

12

”cc-exp-year”

Årtal i sista giltighetsdatum för kreditkort

2014

”cc-csc”

Säkerhetskod (CVV) på baksidan av kreditkort

419

”cc-type”

Typ av kreditkort (eller annat betalningsmedel)

Visa

”transaction-currency”

Valutakod

SEK

”transaction-amount”

Penningbelopp

401

”language”

Språkkod

sv

”bday”

Födelsedatum

1955-06-08

”bday-day”

Födelsedatum – dag i månaden

8

”bday-month”

Födelsedatum – månad

6

”bday-year”

Födelseårtal

1955

”sex”

Kön

Man

”url”

Webbadress

https://www.w3.org/People/Berners-Lee/

”photo”

Foto

https://www.w3.org/Press/Stock/Berners-Lee/2001-europaeum-eighth.jpg

<kontaktväg>

“tel”

Telefonnummer

+46 8 678 55 00

<kontaktväg>

”tel-country-code”

Plustecken följt av landskod i telefonnummer

+46

<kontaktväg>

”tel-national”

Telefonnummer inklusive riktnummer men utan landskod

08-678 55 00

<kontaktväg>

”email”

E-postadress

timbl@w3.org

<kontaktväg> innebär att det går att specificera om det gäller hem (“home”), arbete (“work”), mobiltelefon (“mobile”), fax (“fax”) eller personsökare (“pager”) genom att inleda autocomplete-attributet med motsvarande kod.

Rekommendationer utöver lagkrav

Utöver det lagen kräver finns ett antal rekommendationer för hur du kan arbeta med formulärfält för att förbättra digital tillgänglighet:

Inmatningsfält för telefonnummer

Inmatningsfält för telefonnummer kan presenteras med exempelvis:

  • Symbol från användarens favoritsymbolspråk
  • Beskrivning av användarens språk
  • Personlig "autocomplete"

Kodexempel: <input id="hp" autocomplete="home tel" ...

Predikativ textinmatning kan underlätta

Prediktiv textinmatning innebär att systemet eller webbsidan, baserat på pågående textinmatning, kan komma med förslag på fortsättning av inmatningen. Detta underlättar för den som ska fylla i till exempel sökrutor eller formulär.

I en tjänst för flyttanmälan får användaren förslag på fortsättningen av inmatningen för gatuadress

Så testar du inmatningsfält

På webben kan du kontrollera att kravet är uppfyllt genom använda Inspektören eller Inspektera.

Kontrollera de fält som hämtar in information om användaren och säkerställ att de har ett autocomplete-attribut med rätt typvärde.

Utdrag ur WCAG

WCAG 1.3.5 (AA) Identifiera syfte med inmatning

Syftet med varje inmatningsfält som inhämtar information om användaren förmedlas maskinläsbart när

Originaltext på engelska: Success Criterion 1.3.5 Identify Input Purpose Länk till annan webbplats. (w3.org) Länk till annan webbplats.

Därför länkar vi till WCAG på svenska och engelska

Hjälpte denna information dig?

Ditt svar hjälper oss att förbättra sidan

Senast uppdaterad: