Hopp til hovedinnhold
UUKontroll logo UUKontroll

Bruk like navn for like funksjoner (WCAG 3.2.4)

Elementer med samme funksjon skal se like ut og ha samme navn på tvers av alle sider.

wcag niva-aa design koding

På forsiden heter det «Søk». På produktsiden heter det «Finn». I bunnmenyen står det «Let etter innhold». Alle tre gjør det samme - de lar deg søke på nettstedet - men de bruker ulike navn. For de fleste er dette bare litt irriterende, men for brukere med kognitive utfordringer eller de som bruker hjelpeteknologi, kan det skape reell forvirring.

Hva sier kravet?

WCAG 3.2.4 Konsekvent identifikasjon krever at komponenter med samme funksjonalitet identifiseres konsekvent på tvers av alle sider i et nettsted. Kravet er på nivå AA.

«Identifiseres konsekvent» betyr at elementene skal ha samme navn, samme ikon og samme visuelle utseende når de har samme funksjon. En søkeknapp bør alltid hete «Søk» og alltid bruke det samme forstørrelsesglassikonet, uansett hvor på nettstedet den befinner seg.

Kravet henger tett sammen med WCAG 3.2.3 (Konsekvent navigering), men der 3.2.3 handler om plassering og rekkefølge, handler 3.2.4 om navn og utseende. Sammen sørger de to kravene for at brukere kan gjenkjenne og bruke funksjonalitet på tvers av hele nettstedet uten å måtte lære seg nye mønstre på hver side.

Kravet betyr ikke at alle knapper på nettstedet må se like ut. Det betyr at knapper med samme funksjon - for eksempel alle «Legg i handlekurv»-knapper - skal ha konsekvent utseende og navn.

Hvorfor er dette viktig?

Brukere gjenkjenner mønstre

Når du har lært at det blå forstørrelsesglasset øverst til høyre er søkefunksjonen, leter du automatisk etter det samme mønsteret på neste side. Hvis det plutselig er byttet ut med en kikkert, eller søkeknappen har fått teksten «Utforsk» i stedet for «Søk», må du stoppe opp og tenke. For de fleste er dette en liten ulempe, men for noen er det en barriere.

Kognitive utfordringer

Brukere med kognitive funksjonsnedsettelser, lærevansker eller hukommelsesproblemer er ekstra avhengige av konsistens. De har kanskje brukt tid på å lære seg at det grønne ikonet betyr «godkjenn» og det røde betyr «avbryt». Hvis fargene eller ikonene plutselig bytter betydning på en annen side, kan det skape stor usikkerhet.

Skjermleserbrukere søker etter navn

Mange skjermleserbrukere bruker funksjonalitet for å hoppe direkte til elementer med bestemte navn - for eksempel å søke etter «Søk»-knappen. Hvis knappen heter «Søk» på noen sider og «Finn» på andre, vil søket bare fungere halvparten av tiden.

Stemmestyrte grensesnitt

Brukere som navigerer med stemme sier for eksempel «Klikk Søk» for å aktivere søkeknappen. Hvis knappen har et annet navn på denne siden, fungerer ikke stemmekommandoen. Brukeren må finne ut hva knappen heter akkurat her, og prøve igjen.

Slik oppfyller du kravet

Bruk konsekvent navngivning

Bestem deg for ett navn for hver funksjon, og bruk det overalt:

<!-- Konsekvent: Samme tekst for søkefunksjonen -->
<!-- På forsiden -->
<button type="submit">Søk</button>

<!-- På produktsiden -->
<button type="submit">Søk</button>

<!-- I mobilmenyen -->
<button type="submit">Søk</button>

Lag gjerne en liste over standardnavn for vanlige funksjoner: «Søk», «Logg inn», «Handlekurv», «Meny», «Lukk», «Tilbake», «Neste», «Send inn», «Legg i handlekurv». Del denne listen med hele teamet.

Bruk konsekvent ikonbruk

Ikoner skal ha konsekvent betydning gjennom hele nettstedet:

<!-- Konsekvent: Samme ikon + tekst for handlekurv -->
<a href="/handlekurv" aria-label="Handlekurv">
  <svg aria-hidden="true">
    <!-- Handlevogn-ikon -->
  </svg>
  <span>Handlekurv</span>
  <span class="antall">3</span>
</a>

Ikke bruk et handlevogn-ikon for handlekurven på noen sider og et bærepose-ikon på andre. Velg ett ikon og hold deg til det.

Bruk designsystem eller komponentbibliotek

Den mest effektive måten å sikre konsistens på er å bruke et designsystem eller komponentbibliotek. Når alle sider bruker den samme knapp-komponenten, det samme søkefeltet og den samme ikonpakken, oppstår det langt færre inkonsistenser:

<!-- Gjenbrukbar komponent med konsekvent oppførsel -->
<button class="btn btn-primary" type="submit">
  <svg class="icon icon-search" aria-hidden="true">
    <use href="/icons.svg#search"></use>
  </svg>
  Søk
</button>

Sørg for konsekvent aria-labels

Hvis du bruker aria-label for å gi tilgjengelige navn til elementer, pass på at de er like for elementer med lik funksjon:

<!-- Konsekvent: Samme aria-label på alle sider -->
<button aria-label="Åpne meny" class="hamburger">
  <span class="hamburger-ikon"></span>
</button>

<!-- Inkonsekvent: Ulike aria-labels for samme funksjon -->
<!-- Side 1: aria-label="Åpne meny" -->
<!-- Side 2: aria-label="Vis navigasjon" -->
<!-- Side 3: aria-label="Hamburger-meny" -->

Dokumenter mønstrene

Lag en oversikt over nettstedets gjenbrukbare mønstre. Dokumenter hvilke navn, ikoner og stiler som hører til hver funksjon. Dette er spesielt viktig når flere utviklere eller designere jobber på samme nettsted.

Vanlige feil

  • Ulikt navn på søkefunksjonen - «Søk» på forsiden, «Finn» på undersidene, «Search» i mobilmenyen. Velg ett navn og bruk det konsekvent.
  • Ulike ikoner for samme funksjon - handlevogn versus bærepose for handlekurven, hamburger versus tre prikker for menyen.
  • Inkonsekvent «Lukk»-knapp - noen modaler har et kryss, andre har teksten «Lukk», og noen har «Avbryt». Velg én tilnærming (gjerne kryss-ikon med aria-label="Lukk") og bruk den overalt.
  • Alt-tekster som varierer - det samme ikonet har forskjellig alt-tekst på ulike sider, for eksempel «Hjem-ikon» på noen sider og «Gå til forsiden» på andre.
  • Stilforskjeller - primærknappen er blå på noen sider og grønn på andre, eller har avrundede hjørner ett sted og skarpe hjørner et annet. Brukere forbinder utseende med funksjon.

Konsekvent identifikasjon handler om tillit og gjenkjennelse. Når brukerne vet at et element ser likt ut og oppfører seg likt overalt på nettstedet ditt, kan de bruke tiden sin på å nå målet sitt - ikke på å finne ut hva knappene betyr.