Textfält - 1177

Exempel

Designspecifikation

Formulärfält har generellt blå ram och ljusblå fyllnad. Hörnradie 10 px.
När ett fält är i aktivt läge får den en innerskugga.

Om formulärfält behöver vara placerade på en färgad bakgrund (tex. ljusblå) har fälten vit fyllnad men i övrigt samma ram och skuggningar etc. som de vanliga formulärfälten.

Fält som signalerar felmeddelande har röd streckad ram och ljusrosa fyllnad.

Disablade fält har grå ram, stone-clear, och vit fyllnad. Texten är kursiv och har färgen stone-base.

Do’s and Don’ts

-

Tillgänglighet

I formulär ska användaren ges ledtexter och instruktioner som tydligt anger vad som ska väljas eller matas in. Det kan exempelvis handla om vilket format användaren förväntas fylla i informationen i, det är då viktigt att alla användare kan uppfatta instruktionerna.

Det är i och med detta viktigt att dessa ledtexter och instruktioner i kod är knutna till de respektive fält de är menade för. Detta åstadkoms med elementet label. Label-elementen måste också kopplas korrekt till respektive formulärobjekt med attributet for som ska peka på formulärobjektets id.

När felmeddelanden läggs in i formuläret så måste det knytas till formulärsobjektet eller gruppen det är menat att tillhöra. Detta är för att det inte bara ska synas visuellt utan vara kopplat så att alla användare kan uppfatta det.

När inmatningsfällt används så ska även autocomplete tas i beaktning, mer om detta du läsa här:

Autocomplete i inmatningsfält

Viktigt att tänka på när det gäller obligatoriska fält kan du läsa om här: Obligatoriska fält

Tillgängliga datepickers (<input=date>)

• Tvinga inte användare att bara använda en datepicker, ett inputfält för text kan passa vissa användare bättre. Se till att den har korrekt koppling med <label> och en beskrivning som är tydlig. 

• Gör det möjligt att navigera med ett tangentbord. Till exempel genom att tabba till kalendern och använda piltangenterna för att välja rätt datum.

• Dölj inte kalenderknappen från skärmläsare. Vissa användare av skärmläsare använder en kombination av syn- och skärmläsare, så att gömma kalenderknappen och kalendervyn för skärmläsare kommer att skada deras användarupplevelse.

• Se till att ikoner och knappar tolkas på ett bra sätt av skärmläsare genom exempelvis <label>’s. Ett exempel på detta är att datumen i månaden inte bara ska läsas som "1", "2 ″ etc. De borde läsas" 1 mars, torsdag "eller något liknande. Detta kan du lösa med en aria-label.

Tillgänglig tidskomponent (<input=time>)

• Se till att användaren kan använda tidskomponenten med tangentbord.  Ex. komma åt komponenten och sedan höja och sänka värdet med piltangenterna eller manuellt skriva in värdet som önskas.

• Se till att komponenten har beskrivande labels som tydligt kopplar den till sammanhang.

• Användare som inte kan se värdena måste kunna få informationen programmatiskt så att de också kan använda komponenten.  Det vill säga att det ska i kod gå att utläsa värdena så att en skärmläsare kan tolka komponenten. 

Tillgänglig slider (<input=range>)

• Se till att användaren kan använda slidern med tangentbord.  Ex. Komma åt slidern med tabb och sedan höja och sänka värdet med piltangenterna.

• Se till att slidern har beskrivande labels som tydligt kopplar slidern till sammanhang.

• Användare som inte kan se värdena måste kunna få informationen programmatiskt så att de också kan använda slidern.  Det vill säga att det ska i kod gå att utläsa värdena så att en skärmläsare kan tolka slidern. 

Research på komponenten

-

Relaterade resurser/komponenter

• Textarea - 1177

Status