Sidjämförelse

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.

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. Megamenyn har i desktop en yta till höger där man kan lyfta innehåll och länka till information på sajten som man vill sätta fokus på just nu. Ytan rymmer då rubrik, kort text och länk.

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

Utloggat läge för admin/profession

För admin- och professionsheaders finns också en variant som visar utloggat läge där namnet har bytts ut mot texten “Logga in”.

Tillgänglighet

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öststyrning.

Riktlinje 105
Skapa rubriker med h-element: Märk upp rubriker med h1, h2 och så vidare. Undvik att särskilja en rubrik från brödtext enbart genom formgivning. Det gör det nämligen svårare för personer med vissa hjälpmedel att navigera på sidan, och svårare för sökmotorer att avgöra vad sidan handlar om.

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