Icon button
Icon buttons är runda knappar som kan användas med en bokstav, siffra eller ikon för att indikera något användaren kan göra.
Â
Â
Â
Innehållsförteckning
Komponentkällor
1177
Â
Â
Inera
Â
Â
Tillgänglighet
Tänk på att försöka undvika inaktivt (disabled) state: https://inera.atlassian.net/wiki/spaces/USI/pages/3123347507
WCAG-kriteriet 1.3.1 Ange i kod vad sidans olika delar har för rollÂ
Informationen ska presenteras med korrekta roller sÃ¥ att användaren och hjälpmedel lätt ska förstÃ¥ vad det är. T.ex. en knapp ska vara programmerad som en knapp sÃ¥ användaren samt eventuella hjälpmedel kan lätt hitta den. NivÃ¥ AÂ
Â
WCAG-kriteriet 1.3.4 Se till att allt innehÃ¥ll presenteras rätt oavsett skärmens riktningÂ
Informationen ska kunna visas pÃ¥ ett korrekt sätt oavsett liggande/stÃ¥ende skärm. Komponenter och annat innehÃ¥ll pÃ¥ sidan ska inte förlora läsbarhet, struktur eller att innehÃ¥ll överlappas oavsett skärmriktning. All funktionalitet ska kunna nÃ¥s oavsett skärmriktning i en webbapplikation som inte ska scrollas. NivÃ¥ AAÂ
Â
WCAG-kriteriet 1.4.10 Skapa en flexibel layout som fungerar vid förstoring eller liten skärmÂ
Se till att användaren kan nÃ¥ allt innehÃ¥ll oavsett om den använder förstorad eller liten skärm. InnehÃ¥llet ska bevara logisk struktur och inte överlappa. Programmera sÃ¥ att användaren inte behöver scrolla i tvÃ¥ dimensioner. NivÃ¥ AAÂ
Â
WCAG-kriteriet 1.4.11 Använd tillräckliga kontraster i komponenter och grafikÂ
Se till sÃ¥ att komponenter har tillräckligt hög kontrast mot bakgrund. Kontrastvärdet ska vara minst 3,0. NivÃ¥ AAÂ
Â
WCAG-kriteriet 2.1.1 TangentbordsnavigeringÂ
Se till sÃ¥ att användaren kan nÃ¥ alla interaktiva element pÃ¥ sidan med enbart tangentbordet vid navigering. NivÃ¥ AÂ
Â
WCAG-kriteriet 2.1.2 Se till att användaren inte fastnar vid tangentbordsnavigeringÂ
Se till att användaren inte riskerar att fastna i en komponent. Användaren ska inte kunna navigera till innehÃ¥llet bakom komponenten som är i fokus (exempelvis en dialogruta).  NivÃ¥ AÂ
Â
WCAG-kriteriet 2.4.3 Logisk tab-ordning Â
För användare med hjälpmedel är det viktigt att innehÃ¥llet har en logisk ordning, för de som använder tangentbordsnavigering sÃ¥ förväntas interaktiva element att komma i den ordning som presenteras visuellt. NivÃ¥ AÂ
Â
WCAG-kriteriet 3.2.1 Utför inga oväntade förändringar vid fokuseringÂ
Inga oväntade händelser ska ske när användaren tabbar sig igenom sidan. Exempelvis om användaren enbart tabbar till en knapp sÃ¥ ska inte fokuset trigga att ett nytt fönster öppnas eller att ett formulär skickas in. NivÃ¥ A                         Â
Â
WCAG-kriteriet 3.2.3 Â Var konsekvent i navigation, struktur och utformningÂ
Användaren ska kunna förstå hur webbplatsen fungerar. T.ex menyer, knappar och andra återkommande komponenter ska ha samma utseende, beteende och struktur på hela webbplatsen.
NivÃ¥ AAÂ
Â
WCAG-kriteriet 2.4.7 Tydlig fokusmarkering
Se till att fokusramen som visas när användaren tabbar till eller klickar på ett fält / klickbart element har tillräckligt hög kontrast (minst 3.0 i kontrastvärde) så att användaren tydligt kan se vart hen står.
Nivå AA
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 | Feb 1, 2023 |
Senast uppdaterad | Feb 1, 2023 |
Â