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.

Open

1177

 

Open

Inera

 

Innehållsförteckning

Komponentkällor

1177

Inera

Tillgänglighet

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.