Datepicker låter användaren välja datum, antingen genom att välja i en kalender eller genom fritext.
.png?version=1&modificationDate=1684148637717&cacheVersion=1&api=v2&width=442&height=506)
.png?version=1&modificationDate=1684148643905&cacheVersion=1&api=v2&width=442&height=506)
Innehållsförteckning
Komponentkällor
Observera att ramverket inte har en egen datepicker, utan erbjuder styling för en datepicker från tredjepart. Läs mer i dokumentationen här.
1177
Inera
Designspecifikation
Date range
Om möjligheten finns att välja ett datumintervall (date range) ska det vara tillräcklig visuell skillnad mellan start- och slutdatum och mellanliggande datum.
Inera: start- och slutdatum har färgen Accent30, mellanliggande datum färgen Accent40. Markeringen för start- och slutdatum ska även ha en vit kantlinje som skiljer de två färgerna åt.
Inera: start- och slutdatum har färgen sky-dark, mellanliggande datum färgen sky-base. Markeringen för start- och slutdatum ska även ha en vit kantlinje som skiljer de två färgerna åt.
Tillgänglighet
Allmänt:
Användaren ska kunna välja att skriva in input direkt i fältet istället för att använda datum-väljaren/tid-väljaren. Det specificerade formatet för inputen bör framgå i labeln för de användare som använder skärmläsare. Dölj inte datum-väljaren för skärmläsare och tangentbord. Det datum som har blivit valt bör framhävas genom en tydlig markering som omger det. Detta hjälper till att förbättra synligheten och tydligheten av det valda datumet.
Det ska enbart gå att mata in det format som förväntas, exempelvis enbart siffror i det format som anges i ledtexten (Ex: ÅÅÅÅ-MM-DD). Det ska inte gå att skriva in datum fel eller använda sig utav bokstäver och specialtecken.
Det bör vara möjligt att styra datumväljaren med hjälp av tangentbordet. Denna styrning ska utföras med piltangenterna på tangentbordet. Det ska vara möjligt att ändra månaden genom att använda upp- och nerpiltangenterna. Dessutom bör användningen av tangenterna "Home" och "End" leda till den första respektive sista dagen i veckan.
När ett datum har valts så ska skärmläsaren informera om det valda datumet för användaren. Den aktuella dagen (till exempel "Måndag", "Torsdag", "Fredag", etc.) bör uppläsas för att informera dem om vilken dag de befinner sig på. Mer info finns här:
https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html
Icke-textinnehåll: All innehåll som inte är textbaserad ska ha ett textalternativ för att kunna erbjuda möjligheten att ha innehållet uppläst för användaren.
Kontrast på icke-textobjekt: Det ska vara tillräcklig kontrast mellan bakgrund och komponenter, ikoner, symboler och andra grafiska informationsbärande objekt. Minsta kontrast värdet det ska uppnå är: 3.1. Samt när det gäller text så ska det uppnå 4.5 för liten text och 3.1 för stor text.
Tangentbordsnavigering: All funktionalitet ska kunna nås och hanteras med enbart tangentbordsnavigering. (Nivå A)
Fokus ordningen: Om en komponent används i flera steg och varje steg påverkar hur komponenten fungerar, måste stegen göras i rätt ordning så att det fortfarande fungerar meningsfullt.
Rubriker och ledtexter/etiketter: Rubriker och ledtexter/etiketter/labels beskriver ämne eller syfte. Labels beskriver vad som förväntas av användaren för att göra klart sin input. Det gäller även för ikoner/knappar i datum vyn så skärmläsaren kan läsa upp när användaren hoppar mellan exempelvis månader och dagar så ska det beskrivas för användaren så de vet vilket datum hen står på. Istället för “1, 2 , 3” så säger den Januari, Februari, Mars osv. (Nivå AA) mer info finns även här: https://axesslab.com/accessible-datepickers/
Fokus: Det ska tydligt framgå vart fokus ligger vid tangentbordsnavigering, fokus markeringen ska även ha tillräcklig kontrast. (Nivå AA)
Text på knappar och kontroller överensstämmer med maskinläsbara etiketter
Se till att text som är synlig på knappar och andra gränssnitt kontroller också finns i, och överensstämmer med, den maskinläsbara etikett som representerar kontrollen i exempelvis program för röststyrning. (Nivå A)
Identifiering av fel: Om ett inmatningsfel upptäcks automatiskt så ska det som är fel markeras och felet beskrivas för användaren med text. (Nivå A)
Ledtexter/etiketter eller instruktioner: Det finns Ledtexter/etiketter eller instruktioner när innehåll kräver inmatning från användaren. (Nivå A)
WCAG-kriteriet 4.1.2
Namn, roll, värde: För alla komponenter i ett användargränssnitt (inklusive, men inte begränsat till formulärelement, länkar och komponenter skapade med script), kan namnet och rollen automatiskt tydliggöras. Status, egenskaper och värden som kan anges av användaren kan bli automatiskt tydliggjord, och meddelande om ändringar i dessa komponenter finns åtkomliga för användarprogram, inklusive hjälpmedel. (Nivå A)
Feedback
Hjälp oss att förbättra den här komponenten genom att ge feedback, ställa frågor och lämna andra kommentarer på Inera UX Slacken i kanalen #komponenter_design eller #komponenter_kod alternativt kan du använda vårt formulär.
Publicerad |
|
|---|---|
Senast uppdaterad |
|