Jämförda versioner

Nyckel

  • Dessa rader lades till.
  • Denna rad togs bort.
  • Formateringen ändrades.

Knappar tillåter användare att göra val genom att trycka på en knappMed knappar kan användare utföra en åtgärd eller navigera till en annan sida.

 

 

 

Innehållsförteckning


Innehållsförteckning

Komponentkällor


1177

 

 

Inera

 

 

Tillgänglighet


WCAG-kriteriet 2.4.7

  • Fokusram ska vara tydlig med tillräcklig kontrast 3,0:1.

WCAG-kriteriet 1.4.11

  • Kontrast på icke-textobjekt ska uppnå minst 3.0 i kontrastvärde.

WCAG-kriteriet 1.4.3

  • 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.

WCAG-kriteriet 2.5.3

  • Knappen ska ha ett namn som stämmer överens med uppmärkningen i koden.

WCAG-kriteriet 3.2.3

  • Knapparna ska ha en konsekvent placering på hela webbplatsen/formulären så användaren lätt hittar dom.

  • Man ska exempelvis inte heller byta ordningen på ‘skicka’ och ‘avbryt’ knappar.

WCAG-kriteriet 2.4.3

  • Tabbordningen ska vara logisk, det ska exempelvis inte skifta får vänster till höger och sedan till höger till vänster. Primärt har vi använt vänster till höger.

WCAG-kriteriet 2.5.8

  • Knappar ligger inte för tätt inpå varandra så det blir svårt att klicka på rätt klickyta.

WCAG-kriteriet 2.5.2

  • Det ska gå att ångra eller avbryta processen av att klicka på en interaktiv komponent.  Funktionalitet bör inte aktiveras i och med att användaren klickar ner eller vidrör skärmen, i stället bör händelsen aktiveras när användaren släpper upp musknappen eller tar bort fingret från skärmen.

  • Om någon funktionalitet måste ske redan när användaren klickar ner, så ska det finnas möjlighet att ångra händelsen om inte hela vitsen med funktionaliteten går förlorad.

  • För användare som inte kan se knapparna är det viktigt att man inte döljer information. Med användning av aria-disabled kan man indikera att knappar är inaktiverade så att användare med skärmläsare får till sig den informationen.

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