Footer

Footern syns längst ned på webbplatsen och innehåller namnet på varumärket webbplatsen tillhör och vanligtvis länkar till andra delar av eller information om webbplatsen.

Open

1177

Open

Inera (Admin)

Innehållsförteckning

Komponentkällor

Observera att footer-komponenten skiljer sig mellan de olika varumärkenas målgrupper:

• 1177: Invånare, profession och admin

• Inera: Inera.se och admin- och verktygstjänster

1177

1177

 

1177

 

Inera

Inera

 

Inera

 

Designspecifikation

Footerns anatomi

För 1177 ska footer för sidor på 1177.se ha ett gemensamt utseende, samma gäller e-tjänsterna.

• Tjänstens namn och beskrivning av tjänsten

• Kolumn(er) med tjänstespecifika länkar

• Nedre del med mer allmän information

Open

Antal länk-kolumner

En footer kan ha 1-3 kolumner för länkar, beroende på behoven i tjänsten. När antalet kolumner minskar är den som innehåller länkar alltid placerad längst till vänster.

Open

1177 för vårdpersonal

Footern för 1177 för vårdpersonal finns i två varianter. Profession som används för öppna sidor med information, och admin som används för administrativa gränssnitt. 1177 för vårdpersonal använder vitt och blått som huvudfärger, och beige som accentfärg.

Open

1177 för vårdpersonal - Profession

Open

1177 för vårdpersonal - Admin

Tillgänglighet

<Footer>
En webbsida är uppdelad i olika regioner, se till att använda rätt html-element så att tekniska hjälpmedel såsom skärmläsare kan uppfatta vilken region av sidan som användaren navigerar i:  Page Regions  

 
WCAG-kriteriet 2.5.8
Ser till att måltavlan är tillräckligt stor: Se till att klickytan är minst 24 pixlar i både bredd och höjd för klickytan för länkar eller annat. Den behöver även vara centrerad inom måltavlan så att det inte sticker ut till antingen höger eller vänster. (Nivå AA)

WCAG-kriteriet 2.4.3
Gör en logisk tab-ordning: Om man kan navigera stegvis på en webbsida och navigeringsordningen påverkar betydelse eller användning, så ska fokuserbara komponenter få fokus i en ordning som bevarar betydelse och användning. (Nivå A)

WCAG-kriteriet 1.3.2

Presentera innehållet i en meningsfull ordning för alla:  Utforma innehållet på ett sätt som bevarar den avsedda betydelsen för alla användare, alltså även om ordningen skulle förändras.

WCAG-kriteriet 2.4.7 
Markera tydligt vilket fält eller element som är i fokus: Den som navigerar med t.ex. tab-tangenten behöver få veta var fokus ligger. Standardmarkeringen är ofta en tunn linje som är svår att se.Gör markeringen tydlig med tillräckligt hög kontrast 3.0:1.  (Nivå AA)

WCAG-kriteriet 4.1.2
Namn roll värde:  För alla komponenter i ett användargränssnitt (inklusive, men inte begränsat till formulärelement, länkar och komponenter skapade med script), kan namnet och rollen automatiskt tydliggöras. Status, egenskaper och värden som kan anges av användaren kan bli automatiskt tydliggjord, och meddelande om ändringar i dessa komponenter finns åtkomliga för användarprogram, inklusive hjälpmedel. (Nivå A)

WCAG-kriteriet 1.4.11
Använd tillräckliga kontraster i komponenter och grafik: Komponenter, grafiska element och fokusramar  ska ha tillräckligt högt kontrast värde, minst 3.0:1 för icke text-objekt.

WCAG-kriteriet 1.4.3
Använd tillräcklig kontrast mellan text och bakgrund: Text ska ha minst 4.5:1 i kontrastvärde, samt stor text (exempelvis rubriker) ska ha minst 3.0:1 i kontrastvärde. 4.5:1 för liten text gäller även text som är länkar!

WCAG-kriteriet 1.4.4
Se till att text går att förstora utan problem:  Förutom för textbeskrivningar och text i form av bild, så kan text förstoras utan hjälpmedel upp till 200 procent utan att användaren förlorar innehåll eller funktionalitet. (Nivå AA)

WCAG-kriteriet 1.4.12
Se till att det går att öka avstånd mellan tecken, rader, stycken och ord: Gör det möjligt för användaren att påverka avstånden utan att innehåll eller funktionalitet krockar eller gömmer sig bakom annat innehåll.

WCAG-kriteriet 2.4.4
Syftet med en länk (i sammanhanget): Syftet med varje länk framgår av länktexten i sig själv eller av länktexten tillsammans med sitt automatiskt tydliggjorda länksammanhang, utom då syftet med länken skulle vara tvetydigt för användare i allmänhet. (Nivå A)

WCAG-kriteriet 2.5.3
Se till att text på knappar och kontroller överensstämmer med maskinläsbara etiketter: Se till att text som är synlig på knappar och andra gränssnittskontroller också finns i, och överensstämmer med, den maskinläsbara etikett som representerar kontrollen i exempelvis program för röststyrning.

WCAG-kriteriet 2.4.6
Skriv beskrivande rubriker och etiketter: Beskrivande rubriker, ledtexter och etiketter hjälper användarna att förstå en sidas innehåll och syfte. Rubriker och ledtexter behöver inte vara långa. Ofta kan ett enda ord vara tillräckligt för att beskriva innehållet.

WCAG-kriteriet 1.3.1
Ange i kod vad sidans olika delar har för roll: Öka chansen att informationen presenteras korrekt oavsett mottagarens verktyg, genom att använda html-elementen på rätt sätt. (Nivå A)

WCAG-kriteriet 1.3.4 
Se till att allt innehåll presenteras rätt oavsett skärmens riktning (Nivå AA): Se till att det går att ta del av innehållet om användarens enheten enhet  är stående eller liggande. En del användare kan har en liggande surfplattan monterad till sin rullstol och därmed inte kunna anpassa sin enhet.

WCAG-kriteriet 1.4.10
Skapa en flexibel layout som fungerar vid förstoring eller liten skärm: Skapa en layout som fungerar på en 320 pixlar bred skärm utan att information eller funktionalitet går förlorad, utan scrollning i mer än en riktning. (Nivå AA)

WCAG-kriteriet 2.1.1
Tangentbord: All funktionalitet är hanterbar via ett gränssnitt för tangentbord utan att det krävs särskild timing för varje enskild tangenttryckning. (Nivå A)

WCAG-kriteriet 3.2.3
Var konsekvent i navigation, struktur och utformning: Navigeringsmetoder/funktioner som upprepas på flera webbsidor inom en uppsättning av webbsidor presenteras i samma inbördes ordning varje gång de upprepas, om inte användaren initierar en ändring. (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.