Knapper mangler navn

Hva betyr dette?

En knapp (<button>) har ikke tekstinnhold, bare et ikon eller bilde, og mangler en alternativ beskrivelse.

Hvorfor er det viktig?

En bruker som ser på skjermen forstår kanskje at et "X"-ikon betyr "Lukk", men en skjermleser vil bare annonsere "Knapp", uten å si hva den gjør.

Hvordan fikser jeg det?

Bruk aria-label eller en skjult tekst (sr-only) inni knappen.

Alternativ 1: aria-label

<button aria-label="Lukk menyen">
  <svg>...</svg>
</button>

Alternativ 2: Visuelt skjult tekst

<button>
  <span class="sr-only">Lukk menyen</span>
  <svg>...</svg>
</button>