Tilbage til Navne, billeder og feedback

Webtilgængelighed

Accessible names og label in name

Giv kontroller forståelige navne, og bevar forbindelsen til den tekst, brugeren kan se og sige.

Se undervisningsslides

Relevante links

TL;DR

  1. Et accessible name identificerer kontrollen; rollen fortæller, hvilken slags kontrol det er.
  2. Foretræk synlig tekst, og kontrollér det beregnede navn, når du supplerer med ARIA.
  3. Gentagne knapper kan få produktspecifikke navne uden at miste deres synlige label.

Hvad hedder kontrollen?

Tre knapper med teksten “Læg i kurv” er lette at forstå, når du ser dem ved siden af produkterne. I en skærmlæsers knapliste kan produktkonteksten mangle. Navnet bør derfor fortælle både handling og relevant produkt.

Hvor kommer navnet fra?

For en almindelig knap kommer navnet normalt fra indholdet. En aria-label kan erstatte det, mens aria-labelledby med gyldige referencer har højere prioritet. Det er ikke tre tekster, der automatisk lægges sammen.

<button type="button" aria-label="Køb nu">Læg i kurv</button>

Her bliver navnet “Køb nu”, ikke “Læg i kurv”. Det kan være teknisk navngivet og samtidig skabe en ny barriere.

Forudsig navnet før inspektion, og find navnekilden bagefter. aria-describedby giver en supplerende beskrivelse — ikke selve navnet.

Bevar den synlige label

Stemmestyringsbrugere kan sige det, der står på knappen. Derfor skal den synlige label indgå i navnet, gerne først og som en sammenhængende frase. Det er formålet med WCAG’s Label in Name.

<button type="button">
  Læg i kurv<span class="visually-hidden">, Nova Runner</span>
</button>

Navnet bliver “Læg i kurv, Nova Runner”. Undgå at indsætte produktnavnet midt i den synlige frase, fx mellem “Læg” og “i kurv”. Klassen skjuler kun tilføjelsen visuelt; se Skjult for hvem? for CSS’en.

Genbrug eksisterende tekst

aria-labelledby kan kombinere knappens tekst med produktoverskriften:

<h3 id="nova-title">Nova Runner</h3>
<button
  id="nova-add"
  type="button"
  aria-labelledby="nova-add nova-title">
  Læg i kurv
</button>

Selvreferencen genbruger knappens egen tekst; den næste reference tilføjer produktet. Rækkefølgen følger id-listen. Hver komponentinstans skal have unikke id’er og referere til sit eget produkt.

Se mere