Header

Retningslinjer for bruk

Bruk global header når

• løsningen er en del av et åpne nettsider
• innholdet er publisert og tilgjengelig uten innlogging
• brukeren forventer global navigasjon og globalt søk
• løsningen er del av eller tett integrert med oslo.kommune.no

Global header brukes når løsningen først og fremst skal fungere som et nettsted, ikke som en avgrenset tjeneste.

Bruk service header når

• løsningen er et internt verktøy eller en innlogget tjeneste
• brukeren skal kunne se hvem hen er innlogget som
• løsningen har lokal navigasjon eller avgrenset funksjonalitet
• tjenesten ikke er en del av oslo.kommune.no

Unngå å blande global og service header

• ikke kombiner global navigasjon med lokal tjenestenavigasjon
• ikke bruk globalt søk i innloggede tjenester

Headeren skal være enkel å forstå

Headeren skal hjelpe brukeren å orientere seg raskt og forstå strukturen i løsningen.

Enkel betyr ikke få elementer, men at hvert element har en tydelig rolle og er plassert der brukeren forventer å finne det.

Header består av tre seksjoner:

• logo og avsender
• navigasjonslenker og handlinger
• brukermeny eller logg ut

Logo og avsender står alltid til venstre. Navigasjon og innloggingselementer står til høyre. Du skal aldri endre plassering eller størrelse på logoen.

Du står fritt til å velge hvilke elementer du vil bruke, men unngå å bruke alle. For mye innhold gjør navigasjonen uklar. Test navigasjonen på målgruppen før du lander strukturen.

Avsender og utlogging

Logger du inn så må du ha mulighet for å logge ut, dette gjelder i både global og custom header. Når brukeren har logget inn må du enten ha brukermenyen tilgjengelig, eller logg ut-knapp.

• Hvis brukeren ikke er innlogget, skal logoen som regel lenke til oslo.kommune.no
• Noen interne systemer kan peke direkte til en intern startside i stedet for kommunens hovednettsted, men vi anbefaler at du brukertester
• Hvis brukeren er innlogget, kan logoen være statisk, og i stedet vises en avsenderlenke (for eksempel “Bymiljøetaten” eller navnet på løsningen) som leder til startsiden

Bruk riktig søkefelt

Valg av søkefelt signaliserer hva brukeren søker i. Globalt søk og lokalt søk skal derfor aldri oppleves som samme funksjon.

Global header bruker Search input i Global styling. Service header skal bruke Search input med Local styling. Dette skiller tydelig mellom søk i en innlogget tjeneste eller løsning og søket på oslo.kommune.no.

Universell utforming

Headeren skal fungere med tastatur

Alle interaktive elementer skal kunne brukes med tastatur alene. Sørg for at “Tab”, “Enter” og “Esc” fungerer som forventet i navigasjon og brukermeny.

Bruk riktige landemerker og ARIA-roller

• bruk <header> eller role="banner"
• bruk role="navigation" og aria-label hvis det finnes flere navigasjoner på siden
• bruk aria-expanded og aria-controls på nedtrekksmenyen

Gjør innholdet forståelig for skjermlesere

Bruk beskrivende tekster på alle knapper og lenker. Unngå generiske formuleringer som “klikk her”. Brukeren skal kunne forstå struktur og formål uten visuell kontekst.

Test på små skjermer og høy zoom

Headeren skal fungere uansett navigasjonsmetode, skjermstørrelse eller zoom-nivå.