Ange syftet för formulärfält i koden
Om riktlinjen
- Innehåller lagkrav
- EN 9.1.3.5
- WCAG 1.3.5 (AA)
Innehåller lagkravOmråde
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
Förutom lagkraven finns det rekommendationer som kan förbättra den digitala tillgängligheten:
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.
.svg)
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
- inmatningsfältet har ett syfte som identifieras i avsnittet Input Purposes for User Interface Components (w3.org) Länk till annan webbplats. och
- innehållet är implementerat med någon teknologi som har stöd för att identifiera det förväntade syftet för formulärinmatningar.
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
Ditt svar hjälper oss att förbättra sidan
Senast uppdaterad: