Knapper mangler navn

Hva betyr dette?

WCAG 4.1.2 Navn, rolle, verdi krever at alle interaktive elementer på en nettside - knapper, lenker, skjemafelt - har et tilgjengelig navn som beskriver deres funksjon. Et «tilgjengelig navn» er den teksten som skjermlesere og andre hjelpeteknologier bruker for å fortelle brukeren hva elementet gjør.

For knapper med synlig tekst er dette uproblematisk - teksten i knappen er automatisk det tilgjengelige navnet. Problemet oppstår når knapper bare inneholder et ikon, et SVG-bilde eller et tegn som «X» eller «☰». Da har knappen ingen tekst som skjermleseren kan lese opp.

Dette kravet er nivå A - helt grunnleggende - og det er et av de vanligste tilgjengelighetsproblemene vi finner på norske nettsider. Hamburgermenyer, lukkeknapper, søkeknapper, handlekurv-ikoner og sosiale medie-lenker er typiske syndere.

Hvorfor er det viktig?

Når en bruker med skjermleser navigerer til en knapp uten tilgjengelig navn, hører de bare «knapp» - uten noen indikasjon på hva knappen gjør. I verste fall hører de ingenting, eller de hører noe meningsløst som «knapp, bilde» eller «knapp, times».

Se for deg at du har et kontrollpanel med ti ikonknapper. For seende brukere er det kanskje åpenbart at et tannhjul betyr innstillinger og en søppelbøtte betyr slett. Men for en skjermleserbruker som hører «knapp, knapp, knapp, knapp» ti ganger, er det umulig å vite hvilken knapp som gjør hva.

Dette påvirker ikke bare blinde brukere. Stemmestyringsverktøy bruker også det tilgjengelige navnet. En bruker som sier «trykk lukk» kan bare aktivere knappen hvis den faktisk heter «lukk» i koden.

For virksomheter betyr utilgjengelige knapper at en del av kundegruppen rett og slett ikke kan bruke produktet eller tjenesten. Det er både et lovbrudd og en tapt mulighet.

Hvordan fikser jeg det?

Det finnes flere teknikker, og du kan velge den som passer best for din situasjon. Det viktigste er at knappen ender opp med et forståelig, tilgjengelig navn.

Metode 1: aria-label

Den enkleste og vanligste løsningen er å legge til et aria-label-attributt direkte på knappen. Dette gir knappen et usynlig navn som bare skjermlesere og hjelpeteknologi bruker.

<button aria-label="Åpne hovedmenyen">
  <svg aria-hidden="true">
    <!-- Hamburgermeny-ikon -->
    <path d="M3 6h18M3 12h18M3 18h18"/>
  </svg>
</button>

Legg merke til aria-hidden="true" på SVG-elementet. Dette forteller skjermleseren at ikonet kan ignoreres, siden vi allerede har gitt knappen et navn via aria-label.

Metode 2: Visuelt skjult tekst

En annen populær teknikk er å legge inn reell tekst i knappen, men skjule den visuelt. Teksten er usynlig for seende brukere, men leses opp av skjermlesere.

<button>
  <span class="sr-only">Lukk dialogboksen</span>
  <svg aria-hidden="true">
    <!-- X-ikon -->
    <path d="M6 6l12 12M6 18L18 6"/>
  </svg>
</button>

CSS-klassen sr-only (screen reader only) ser typisk slik ut:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Denne teknikken er spesielt nyttig hvis du bruker et rammeverk som Tailwind CSS, som allerede har en sr-only-klasse innebygd.

Metode 3: aria-labelledby

Hvis det allerede finnes en tekst et annet sted på siden som beskriver knappens funksjon, kan du peke til den med aria-labelledby:

<h2 id="varsler-tittel">Varsler</h2>
<!-- ... varselinnhold ... -->
<button aria-labelledby="varsler-tittel">
  <svg aria-hidden="true"><!-- lukk-ikon --></svg>
</button>

Her vil skjermleseren annonsere knappen som «Varsler, knapp», fordi den henter navnet fra elementet med den angitte ID-en.

Vanlige ikonknapper og gode navn

Her er noen eksempler på typiske ikonknapper og hva de bør hete:

Ting å unngå

• Ikke bruk title-attributtet som eneste tilgjengelig navn. Det fungerer ikke konsekvent i alle skjermlesere.
• Unngå for generiske navn som «knapp» eller «klikk her». Vær spesifikk om hva knappen gjør.
• Ikke beskriv ikonet - beskriv funksjonen. «Rød X-figur» er ubrukelig som knappenavn. «Lukk vinduet» er nyttig.
• Hold navnet kort og tydelig. Ett til tre ord er som regel nok.

Test at det fungerer

Den raskeste måten å teste på er å bruke nettleserens utviklerverktøy (F12). Inspiser knappen og se etter «Accessibility»-fanen - der kan du se det beregnede tilgjengelige navnet. Vises et forståelig navn? Da er du på rett vei.

Du kan også prøve å navigere siden med bare tastaturet (Tab-tasten) og se om du forstår hva hver knapp gjør ut fra det skjermleseren (eller nettleseren) viser.