Semantisk html-element <header> som kan inneholde en eller flere av følgende elementer:
- Parent (konsolidert) logo/link og evnt overlay navigasjon
- Nettsteds egen logo (link til forside): svg/png/text
- Navigasjonssti (ikke synlig på alle nettsteder)
- Søkefelt (og knapp for å skjule vise dette)
- (Språkmeny inkl. knapp for å åpne/lukke denne)
- hovedmeny i opp til to nivåer inkl knapp for å vise/skjule meny på små skjermer.
Problemer/ forbedringspotensialer mm.
- Hopp til hovedinnhold lenke må forbedres
- h1 brukes på tekstbaserte logoer i header og kommer i konflikt med sidens øvrige overskrift: Fjerne bruk av h1 på logotekst..
- Sammenstilling av konsolidert logo/lenke og egen logo/lenke kan skape to "lenker" øverst til venstre noe som kan være uheldig.
- Søkefelt ligger i en "fieldset" uten label. Kan like gjerne være en <div>
- Søkefeltskjema mangler label. Kan legge inn aria-label
- Manglende visuell fokus på interaktive elementer når de er aktive/i fokus
- F.eks ved tastatur-navigasjon
- Nettlesere legger på noe fokus selv men ikke alltid godt nok
- På menyelementer kan dette variere litt fra design til design
- Bruk av sematisk <section> tag for inndeling av header. Bedre med <div>?
- Er det en logisk rekkefølge på elementene i header?
- Riktig å plassere språkmeny og brødsmulesti i header (det varierer litt hvor disse fremstår visuelt)
Hovedmeny
- Riktig/nyttig bruk av wai-aria roller/states i meny?
- Menypunkter kan få kontrast-utfordringer i enkelte design der den ligger over f.eks en hovedbanner
- Litt lite visuell markering av menyelementer (mangler valgt state)
- TIlgjengelighetstest med axe klarer ikke å avdekke forgrunn/bakgrunn på menyelementer pga strukturen i headeren. Må derfor gjøre manuelle vudering.
- Kunder kan ha fargemessige problemer med meny (eller øvrige deler av header) som må løses i kontekst av kundens eget design eller innhold.