Toggle
- Rebecka Näsström
- Joakim Bengtson
Toggle switch låter användaren växla mellan två lägen, på eller av. Den används när effekten är direkt och ingen ytterligare bekräftelse görs.
Innehållsförteckning
Komponentkällor
1177
Inera
Designspecifikation
Toggle switch ska endast användas när det inte passar att använda en checkbox. Överväg därför en extra gång innan du använder denna komponent om en checkbox skulle passa ändamålet bättre.
Toggle switch har två lägen: på eller av. En toggle switch kan också vara disabled i både på- och av-läge, men då måste det framgå genom en text varför användaren inte kan byta läge.
Tillgänglighet
Använd tillräckliga kontraster i komponenter och grafik: Kontrasten måste uppnå minst 3.0:1 mellan grafik/komponent mot bakgrund. Förekommer det text så ska texten uppnå 4.5:1.
Använd tillräcklig kontrast mellan text och bakgrund: Kontrast på text mot bakgrund ska ha minst 4.5 i kontrastvärde för liten text och minst 3.0 för stor text.
Använd inte enbart färg för att förmedla information: Se till att man kan urskilja exempelvis statusförändringar på mer sätt än bara via färg. En person som är färgblind eller som använder hjälpmedel kommer inte kunna uppfatta informationen annars. Komplettera med text och eventuellt ikoner för att beskriva förändringen/informationen.
Fokusordning: Om man kan navigera stegvis på en webbsida och navigeringsordningen påverkar betydelse eller användning, så ska fokusbara komponenter få fokus i en ordning som bevarar betydelse och användning. (Nivå A) Se till att fokus/tab-ordningen är logisk.
Tangentbordsnavigering: Se till att det går att hantera all funktionalitet med enbart tangentbord. Många gånger kan man navigera med tangentbord till exempelvis en drop-down menyn men sedan så kan inte undermenyalternativen nås. Se till att hela komponenten är tillgängliga via tangentbord och att de inte kan fastna.
Namn, roll, värde: Det ska tydligt framgå vilken roll en komponent har samt vad namnet på komponenten är, en knapp ska ha rollen “knapp” exempelvis. 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. Exempel på status/värde: När en dropdown öppnas så kommer skärmläsaren informera om att dropdownen har öppnats samt om den är stängd. Skulle ett varningsmeddelande dyka upp på sidan så ska användaren bli informerad om att något har ändrats på den aktuella sidan/ läsa upp varningen.
Rubriker och ledtexter/etiketter beskriver ett ämne eller syfte. Beskrivande rubriker, ledtexter hjälper användarna att förstå en sidas innehåll och syfte. Rubriker är viktiga för att skapa en tydlig hierarki och struktur på sidan. Ledtexter beskriver för användaren vad den förväntas göra när den kommer till interaktiva element. Det används exempelvis över inputfält, grupp av checkboxar, datumväljare, med flera.
Tydlig fokusram: Se till att det tydligt framgår vilket element som är i fokus. Fokusramen ska ha tillräcklig kontrast 3,0:1.
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 | Mar 3, 2023 |
|---|---|
Senast uppdaterad | Sep 30, 2024 |