Header

Retningslinjer for bruk

Bruk header når

• løsningen har Oslo kommune som avsender
• du vil gi brukeren tilgang til navigasjon eller innlogget funksjonalitet
• du vil tydeliggjøre at løsningen tilhører Oslo kommune

Dersom løsningen er et internt verktøy eller en side uten offentlig tilgang, kan en egen header være mer hensiktsmessig. Dette må vurderes grundig og som hovedregel bør du alltid bruke header-komponenten.

Headeren skal være enkel å bruke

Oslo-logoen skal alltid vises til venstre, i sin helhet. Tjenestenavn er valgfritt, men anbefales for tydelighet. Bruk kun nødvendige navigasjonselementer, og sørg for at strukturen er lik på alle sider i tjenesten.

Gjør slik

Bruk tydelig Oslo-logo og eventuelt tjenestenavn til venstre

Unngå

Unngå å ende plassering eller størrelse på logo eller meny

Innhold i header

Logo og avsender skal alltid stå til venstre. Navigasjonselementer som meny, innlogget meny og logg ut-knapp plasseres til høyre. Ikke bruk alle elementer samtidig, velg det som passer brukerens behov.

Behold struktur og utseende

Du kan tilpasse bakgrunnsfargen i headeren, men må sørge for god kontrast og at det fortsatt matcher Oslo kommunes visuelle profil.

Oslo-logoen skal ikke kombineres med andre logoer og må alltid vises i sin helhet. Les mer om riktig bruk av Oslo-logoen

Gjør slik

Forhold deg til Oslo kommunes visuelle profil og prioriter standard og gjenkjennelig headerstyling slik at brukeren lett kan navigere mellom åpne og innloggede sider

Unngå

Unngå å bryte Oslo kommunes visuelle identitet og overlesse headeren med mange elementer

Søk i header

Søkefelt er ikke inkludert i innlogget header for å unngå forvirring med søket på oslo.kommune.no, som er globalt. Hvis du trenger søk i en innlogget løsning, bør det plasseres som en egen komponent, for eksempel rett under header eller i hovedinnholdet.

Universell utforming

Headeren skal være tilgjengelig for alle – uansett hvilke hjelpemidler eller navigasjonsmetoder brukeren benytter. Det betyr at den må fungere med både tastatur, skjermleser og andre assistive teknologier.

Gjør headeren forståelig og navigerbar

• Alle interaktive elementer skal kunne brukes med tastatur alene (for eksempel med “Tab”, “Enter” og “Esc”).
• Bruk beskrivende og tydelige tekster på knapper og lenker, unngå generiske lenketekster som “Klikk her”.
• Sørg for tilstrekkelig kontrast mellom tekst og bakgrunn.

Bruk landemerker og ARIA-roller riktig:

• <header> eller role="banner" for header
• role="navigation" og aria-label på meny hvis det finnes flere navigasjoner på siden
• aria-expanded og aria-controls for å indikere tilstand på nedtrekksmenyer

Tilpasset ulike brukere og kontekster

Forskning fra GOV.UK viser at brukere forventer:

• Konsistent plassering av navigasjon på tvers av sider
• Enkle og intuitive etiketter på menyvalg
• At det er lett å skille mellom innhold og navigasjon
• Mulighet for å forstå hvor man er i løsningen (for eksempel via aktiv tilstand eller breadcrumbs)

Viktig om implementasjon

Hvis du bruker React- eller Elements-versjonen av header, er riktig ARIA-støtte innebygd. Bruker du bare CSS, må du selv sørge for:

• ARIA-attributter for meny og nedtrekk
• Fokus-støtte og tastaturnavigasjon
• At aria-expanded oppdateres riktig når menyen åpnes og lukkes