Ikke stol kun på form, farge eller plassering (WCAG 1.3.3)

«Klikk på den grønne knappen til høyre.» Denne setningen virker kanskje ufarlig, men den stenger ute alle som ikke kan se farger, og alle som bruker en skjermleser og ikke har noe begrep om «til høyre» på skjermen. WCAG 1.3.3 handler om å gi instruksjoner som fungerer for alle - uavhengig av hvilke sanser brukeren har tilgjengelig.

Hva sier kravet?

WCAG 1.3.3 Sensoriske egenskaper krever at instruksjoner for å forstå og betjene innhold ikke utelukkende baserer seg på sensoriske egenskaper som form, farge, størrelse, visuell plassering, orientering eller lyd.

Kravet er nivå A og er et grunnleggende prinsipp i tilgjengelig design. Det betyr ikke at du ikke kan bruke farge eller form i instruksjonene dine - bare at du ikke kan bruke dem som eneste måte å formidle informasjonen på. Du må alltid supplere med noe som fungerer uten å se eller høre.

For eksempel er det helt greit å skrive «Klikk på den grønne Bestill-knappen til høyre» - fordi du supplerer farge og plassering med et tekstlig navn («Bestill»). Men «Klikk på den grønne knappen til høyre» alene er ikke tilstrekkelig.

Hvorfor er dette viktig?

Fargeblinde mister informasjon

Omtrent 8 prosent av alle menn og 0,5 prosent av alle kvinner har en form for fargeblindhet. Når du skriver «feil er markert i rødt», ser mange av disse brukerne ingen forskjell. De vet ikke hvilke felt som har feil.

Skjermlesere har ikke visuell kontekst

En skjermleser leser innhold lineært og har ingen oppfatning av «til venstre», «den runde knappen» eller «det store feltet øverst». Instruksjoner som baserer seg på visuell plassering eller form, er meningsløse for disse brukerne.

Kognitive utfordringer

Instruksjoner som forutsetter at brukeren kan tolke flere sensoriske egenskaper samtidig, kan være vanskelige for personer med kognitive utfordringer. Klare, tekstlige instruksjoner er enklere å forstå for alle.

Responsivt design endrer layout

Det som er «til høyre» på desktop, kan være «nederst» på mobil. Instruksjoner basert på plassering kan bli direkte feil når layouten endrer seg.

Slik oppfyller du kravet

Bruk alltid tekstlige referanser

Når du gir instruksjoner, referer til elementer med navn eller tekst - ikke bare utseende:

<!-- Dårlig: Baserer seg kun på farge og plassering -->
<p>Klikk på den røde knappen til høyre for å avbryte.</p>

<!-- Bra: Inkluderer tekstlig referanse -->
<p>Klikk på «Avbryt»-knappen for å avbryte bestillingen.</p>

<!-- Også bra: Kombinerer flere egenskaper -->
<p>Klikk på den røde «Avbryt»-knappen for å avbryte bestillingen.</p>

Feilmeldinger i skjemaer

Et svært vanlig brudd på dette kravet er skjemaer som bare markerer feil med farge. Feilfelter blir røde, men det finnes ingen tekstmelding som forklarer hva som er galt.

<!-- Dårlig: Kun farge indikerer feil -->
<div class="skjema-felt">
  <label for="epost">E-postadresse</label>
  <input type="email" id="epost" style="border-color: red;">
</div>

<!-- Bra: Farge + tekst + ikon -->
<div class="skjema-felt feil">
  <label for="epost">E-postadresse</label>
  <input type="email" id="epost" aria-describedby="epost-feil"
         aria-invalid="true">
  <span id="epost-feil" class="feilmelding">
    ⚠ Vennligst skriv inn en gyldig e-postadresse
  </span>
</div>

Ikoner og former

Hvis du bruker ikoner for å formidle informasjon, sørg for at de har en tilhørende tekst:

<!-- Dårlig: Kun ikon, ingen tekst -->
<button>
  <svg aria-hidden="true"><!-- søk-ikon --></svg>
</button>

<!-- Bra: Ikon med tilgjengelig tekst -->
<button>
  <svg aria-hidden="true"><!-- søk-ikon --></svg>
  <span>Søk</span>
</button>

<!-- Alternativt: Visuelt skjult tekst -->
<button>
  <svg aria-hidden="true"><!-- søk-ikon --></svg>
  <span class="visually-hidden">Søk</span>
</button>

Instruksjoner i innholdet

Gjennomgå alt innhold der du gir brukeren instruksjoner. Vanlige problemområder:

• Hjelpetekster: «Se boksen til venstre» bør bli «Se avsnittet med tittelen Viktig informasjon»
• Steg-for-steg-guider: «Klikk på det store ikonet» bør bli «Klikk på Innstillinger-ikonet»
• Feilsider: «Bruk lenken ovenfor» bør bli «Bruk lenken Gå til forsiden ovenfor» eller bare «Gå til forsiden»

Bruk redundante indikatorer i design

Når du designer brukergrensesnittet, tenk alltid på å bruke minst to måter å formidle informasjon på:

• Farge + tekst
• Ikon + tekst
• Form + farge + tekst
• Plassering + tydelig overskrift

Denne tilnærmingen kalles «redundant koding» og er en grunnleggende designpraksis for tilgjengelighet.

Vanlige feil

• «Klikk på den grønne knappen» uten å nevne knappens navn eller funksjon.
• Skjemafeil markert kun med rød ramme uten tilhørende feilmelding i tekst.
• Instruksjoner som sier «se feltet til høyre» - som endrer plassering på mobil.
• Diagrammer der farger er den eneste måten å skille dataserier på - bruk også mønster, symboler eller direkte merking.
• Lyd som eneste varsling - for eksempel en «pling» når noe går galt, uten visuell eller tekstlig tilbakemelding.
• Ikoner uten tekst eller aria-label - en hamburger-meny uten noe annet enn tre streker er uforståelig for skjermlesere.

Nøkkelen er å tenke: «Ville denne instruksjonen fungere hvis brukeren ikke kunne se skjermen?» Hvis svaret er nei, trenger du et tekstlig alternativ i tillegg.