Header

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