Datepicker låter användaren välja datum, antingen genom att välja i en kalender eller genom fritext.
Innehållsförteckning
Komponentkällor
1177
Inera
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 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.
När ett datum har valts så ska skärmläsaren informera om det valda datumet för användaren. Mer info finns här: https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html
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.
Fokus: Det ska tydligt framgå vart fokus ligger vid tangentbordsnavigering, fokus markeringen ska även ha tillräcklig kontrast. (Nivå AA)
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)
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)
Tangentbordsnavigering: All funktionalitet ska kunna nås och hanteras med enbart tangentbordsnavigering. (Nivå A)
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/
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)
Ledtexter/etiketter eller instruktioner: Det finns Ledtexter/etiketter eller instruktioner när innehåll kräver inmatning från användaren. (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 |
|