FAB (floating action button / back to top)

FAB (floating action button) eller back to top-button är en variant av en icon button. Knappen är rund med uppåtpil som vid klick tar användaren högst upp i innehållet på den aktuella sidan.

 

Open

1177

 

 

Open

Inera

 

Innehållsförteckning

Komponentkällor

 1177

Inera

Designspecifikation

Varianter för 1177

FAB för 1177 har två olika varianter, en för invånare (röd) och en för vårdpersonal (blå).

Beteende och 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.

Beteende

• Komponenten dyker upp automatiskt när man scrollar på sidan. Det finns inga speciella villkor kopplade till den, utan den visas på alla sidor när den behövs.

• Vid klick av komponenten så sveper den upp snabbt i en scrollanimation och hoppar inte bara upp till kanten. Detta för att ge användaren visuell feedback på vad som hänt.

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 och att pilen aldrig ska täcka något innehåll/länk/funktion.

I desktop har vi möjlighet att lägga komponenten vid sidan av griden, vilket gör att den även följer med över sidfoten. I mobil stannar knappen ovanför sidfoten, då den annars skulle täcka länkarna som finns där. Det är alltså skillnad mellan beteende för desktop och mobil.

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

Tillgänglighet

Generellt

Tänk på att ”Back to top”-knappar inte ska vara dolda för en användare med skärmläsare, den måste vara nåbar med tangentbordsnavigering då alla interaktiva element ska gå att navigera till med tangentbord.

Länktexten ska vara beskrivande och det ska gå att förstå vart den leder enbart baserat på länktexten eller i kombination med dess programmatiska sammanhang.

Knappen får inte vara positionerad på ett sådant sätt så att den döljer viktiga element på sidan.

Ifall den används i samband med en touch-skärm (mobil/surfplatta) så ska den vara tillräckligt stor för att användaren lätt ska kunna trycka på den med sitt finger.

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:ARIA: button role - Accessibility | MDN

Relevanta WCAG-kriterier

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.