Fab (floating action button)

Fab (floating action button) är en knapp som används specifikt för funktionaliteten “till toppen av sidan”. Det är en rund knapp som följer med scroll nedåt och som vid klick tar användaren till sidans topp.

 

Open

1177

 

Open

Inera

Innehållsförteckning

Komponentkällor

1177

Inera

Designspecifikation

Placering

FAB dyker upp på skärmen så fort användaren scrollat förbi headern. För både desktop och mobil är det viktigt att se till att knappen inte hamnar inuti footer-komponenten.

• Desktop: På desktop placeras FAB till höger om innehållet, så att den inte täcker några andra komponenter på sidan.

• Mobil: På mobil kommer vi inte riktigt undan att FAB täcker en del av innehållet. FAB placeras i högerkant med samma marginal som övrigt innehåll (20px) längst ner i höger hörn.

Exempel på placering på sidans slut

Tillgänglighet

Specifikt för skärmläsare

Skärmläsaren behöver beskriva att det är en knapp samt läsa upp för användaren när den är i fokus, exempelvis “Till toppen av sidan, knapp“. När användaren har klickat på knappen behöver skärmläsaren läsa upp det för användaren - så användaren vet om att en förändring har skett. Vid nästa tabb ska användaren veta vart hen är på sidan och fokus bör sättas på det första elementet på sidans topp.

Läs mer om button roles:https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role

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.