Tilby flere veier til innholdet (WCAG 2.4.5)

Har du noen gang prøvd å finne igjen en artikkel du leste for noen dager siden? Du husker omtrent hva den handlet om, men ikke nøyaktig hvor på nettstedet den lå. Kanskje du begynte å klikke deg gjennom menyen, men ga opp og brukte søkefeltet i stedet. Det at du hadde to måter å finne frem på - meny og søk - er nettopp det WCAG 2.4.5 handler om.

Hva sier kravet?

WCAG 2.4.5 «Flere måter» er et nivå AA-krav som sier at det skal finnes mer enn én måte å finne frem til en nettside innenfor et nettsted. Det eneste unntaket er sider som er del av en prosess eller et steg i en sekvens - for eksempel en betalingsside som bare er tilgjengelig via handlekurven.

Kravet handler ikke om at du trenger ti forskjellige navigasjonsmetoder. Det holder med to. Poenget er at ulike brukere finner frem på ulike måter, og at én enkelt metode aldri fungerer like godt for alle.

Eksempler på navigasjonsmekanismer som oppfyller kravet:

• Navigasjonsmeny (hovedmeny, undermenyer)
• Søkefunksjon
• Nettstedskart (sitemap)
• Innholdsfortegnelse
• Brødsmulesti (breadcrumbs)
• Lenker mellom relaterte sider
• A-Å-register

Hvorfor er dette viktig?

Mennesker navigerer ulikt, avhengig av hvem de er, hva de leter etter og hvilke hjelpemidler de bruker. Det som er intuitivt for én person, kan være forvirrende for en annen:

• Brukere som kjenner nettstedet godt vil ofte bruke søk eller gå direkte til en kjent kategori
• Førstegangsbesøkende foretrekker gjerne å utforske menyen og klikke seg nedover i strukturen
• Skjermleserbrukere kan synes det er enklere å bruke et nettstedskart enn å navigere gjennom komplekse menyer med mange nivåer
• Brukere med kognitive vanskeligheter kan ha nytte av en visuell oversikt i form av et nettstedskart, i stedet for å måtte huske menystrukturen
• Brukere som kommer fra et søkeresultat i Google havner midt på nettstedet og trenger brødsmulesti eller meny for å orientere seg

Et nettsted som bare tilbyr én navigasjonsvei - for eksempel bare en meny - fungerer dårlig for alle som ikke finner det de leter etter i den menyen. Kanskje menyen bruker termer de ikke forstår, eller innholdet er kategorisert på en måte som ikke matcher deres mentale modell.

Slik oppfyller du kravet

Kombinasjon 1: Meny + søk

Den vanligste og enkleste kombinasjonen er en navigasjonsmeny sammen med en søkefunksjon. De fleste nettsider har allerede begge deler, men sørg for at begge er godt implementert:

<header>
  <nav aria-label="Hovedmeny">
    <ul>
      <li><a href="/produkter">Produkter</a></li>
      <li><a href="/tjenester">Tjenester</a></li>
      <li><a href="/om-oss">Om oss</a></li>
      <li><a href="mailto:kontakt@uukontroll.no">Kontakt</a></li>
    </ul>
  </nav>

  <form role="search" action="/sok" method="get">
    <label for="sok-felt">Søk på nettstedet</label>
    <input type="search" id="sok-felt" name="q" placeholder="Hva leter du etter?">
    <button type="submit">Søk</button>
  </form>
</header>

Sørg for at søkefunksjonen er lett å finne. Plassér den i toppdelen av siden, gjerne synlig uten å måtte klikke på et ikon først.

Kombinasjon 2: Meny + nettstedskart

Et nettstedskart gir brukeren en komplett oversikt over nettstedets struktur på én side. Det er spesielt nyttig for store nettsteder med mye innhold:

<!-- Lenke til nettsstedskart i bunntekst -->
<footer>
  <nav aria-label="Bunntekst">
    <a href="/nettstedskart">Nettstedskart</a>
    <a href="/personvern">Personvern</a>
    <a href="mailto:kontakt@uukontroll.no">Kontakt oss</a>
  </nav>
</footer>

Nettstedskartet bør oppdateres automatisk når nytt innhold publiseres. Et utdatert nettstedskart er verre enn ingen ting fordi det gir brukeren feil forventninger.

Kombinasjon 3: Brødsmulesti + meny

Brødsmulesti viser brukeren hvor de er i nettstedets hierarki, og lar dem navigere opp i strukturen:

<nav aria-label="Brødsmulesti">
  <ol>
    <li><a href="/">Hjem</a></li>
    <li><a href="/produkter">Produkter</a></li>
    <li><a href="/produkter/programvare">Programvare</a></li>
    <li aria-current="page">UU-kontroll Pro</li>
  </ol>
</nav>

Bruk et <ol>-element (ordnet liste) for brødsmulesti, fordi rekkefølgen er meningsfull. Bruk aria-current="page" på det siste elementet for å indikere at det er gjeldende side. Unngå å gjøre det siste elementet til en lenke - det er siden brukeren allerede er på.

Innholdsfortegnelse for lange sider

For sider med mye innhold (som denne artikkelen) kan en innholdsfortegnelse øverst hjelpe brukeren med å finne rett seksjon:

<nav aria-label="Innholdsfortegnelse">
  <h2>Innhold på denne siden</h2>
  <ul>
    <li><a href="#hva-sier-kravet">Hva sier kravet?</a></li>
    <li><a href="#hvorfor-viktig">Hvorfor er dette viktig?</a></li>
    <li><a href="#slik-oppfyller-du">Slik oppfyller du kravet</a></li>
    <li><a href="#vanlige-feil">Vanlige feil</a></li>
  </ul>
</nav>

Vanlige feil

• Bare én navigasjonsmetode. Noen nettsteder har kun en meny og ingen søkefunksjon, nettstedskart eller annen alternativ vei.
• Søkefelt som er skjult bak et ikon og vanskelig å finne, spesielt for brukere som ikke kjenner konvensjonen med lupe-ikon.
• Nettstedskart som er utdatert eller ufullstendig og dermed ikke gir en pålitelig alternativ navigasjonsvei.
• Brødsmulesti som mangler på undersider, slik at brukeren ikke ser hvor de er i strukturen.
• Søkefunksjon som gir dårlige resultater - en søkefunksjon som ikke finner relevant innhold er like ubrukelig som ingen søkefunksjon.
• Komplekse menyer med mange nivåer uten alternative navigasjonsmetoder - jo mer kompleks menyen er, desto viktigere er alternativene.

Start med det enkleste: har nettstedet ditt både en meny og en søkefunksjon? Hvis ja, har du allerede oppfylt grunnkravet. Vurder deretter om brødsmulesti, nettstedskart eller innholdsfortegnelse ville hjulpet brukerne dine ytterligere.