Header

Headern syns högst upp på webbplatsen och innehåller varumärkets logotyp, färger och huvudnavigation. Utseendet skiljer sig åt beroende på vilket varumärke webbplatsen tillhör och målgruppen den riktar sig till.

Open

1177

Open

Inera Admin

Innehållsförteckning

Komponentkällor

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

• 1177: Invånare och Profession

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

1177

Inera

Designspecifikation

Varianter av header

Headerkomponenten innehåller förutom själva headern och undermenyn flera delar/varianter som gör den anpassningsbar efter vilka behov som finns.

• Type: om headern är för invånare, profession eller admin- och verktygsgränssnitt.

• Megamenu: slår på/av megamenyn.

• User menu: för professionen och admin- och verktygsgränssnitt kan en meny fällas ut för den inloggade personen. Menyn kan innehålla länkar till exempelvis inställningar, samt logga ut-knapp.

Tjänstens namn/logotypen kan i kod sättas till att länka till en startsida.

1177 för vårdpersonal

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

Meny vid mindre skärm

I lägen där skärmen blir mindre än 1024 pixlar (tablet, mobil) fälls menyer ihop och samlas under en hamburgermeny-ikon. Menyerna har flera nivåer som markeras med färg och form för att särskilja dem.

Tillgänglighet

Till sidans huvudinnehåll

Headerkomponenten har även möjlighet att visa blocket “Till sidans huvudinnehåll”. Denna del används för att personer som navigerar med tangentbordet och skärmläsare ska kunna hoppa över menyalternativen och komma direkt till huvudinnehållet på webbplatsen. “Till sidans huvudinnehåll” finns för alla headervarianter, både 1177 och Inera, för invånare och admin.

Blocket visas som en vit bård högst upp i headern med länken “Till sidans huvudinnehåll”.

WCAG-kriteriet 2.4.1 Bypass blocks
Ser till att användare kan hoppa förbi återkommande innehåll: Se till att personer som använder skärmläsare eller navigerar med tangentbord, ska kunna hoppa över återkommande innehåll som exempelvis menyer i sidhuvudet. Detta för att slippa höra eller tabba förbi samma sak varje gång de kommer till en ny sida på samma webbplats.

WCAG-kriterier för header

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. Alla inertaktiva element ska kunna få fokus.  (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! OBS: Text i en logga räknas inte in i detta kriterium.

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östst

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)

Ikoner, bilder och grafiska element
Om ikoner/bilder/grafiska element används så tänk över om det är informationsgivande bilder som som bör ha en alt-text eller om det exempelvis är ikoner som förtydligar en länk, gör då så att användaren även kan klicka på det grafiska elementet också för att nå länken och därmed skapa större klickyta. Läs om flera exempel på w3c: (Detta länkar till ett äldre WCAG-kriterie 2.0, men är fortfarande relevant för Headern) https://www.w3.org/WAI/tutorials/images/functional/

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.