In de accessibility tree heeft een component naast een rol, status en eigenschappen ook een naam. HTML-elementen vullen deze impliciet in. Voorbeelden van namen van componenten zijn:
- de alt-tekst voor een afbeelding,
- de linktekst voor een link,
- de inhoud van het value-attribuut voor een knop,
- het label van invoerveld, enz.
Er zijn twee ARIA-attributen die in de accessibility tree namen van componenten toevoegen of wijzigen: aria-label en aria-labelledby. De eerste krijgt als waarde een gewone tekst; de tweede verwijst naar een id-waarde en kan dus tekst herhalen die elders staat.
Aandachtspunten
- Let op de dubbele "l" in labelledby
- Een aria-label(ledby)-attribuut op een
spanofdivheeft geen effect, want die component bestaat niet in de accessibility tree. - Als de component al een naam had, dan wordt die overschreven door aria-label(ledby). Doe dus niet
<a aria-label="Externe link" href="https://www.anysurfer.be">AnySurfer</a>want de linktekst "AnySurfer" zal verloren gaan en vervangen worden door "externe link". - Hou er rekening mee dat ARIA-labels enkel bekend zijn binnen de accessibility tree.
<a href="/en" aria-label="English version">EN</a>Bovenstaande code is een link naar de Engelse versie van een website: de linktekst "EN" is misschien niet voor iedereen even betekenisvol. Via het aria-label werd die linktekst in de accessibility tree vervangen door "English version". Dit lijkt een goed idee: screenreaders lezen nu "English version" als linktekst, maar op het scherm staat nog steeds EN:
- De screenreadergebruiker weet niet dat hij een andere linktekst te horen krijgt dan wat er op het scherm staat. Dat kan verwarrend zijn voor iemand die meekijkt op het scherm.
- Iemand die dicteersoftware gebruikt zoals dragon naturally speaking zal het spraakcommando "klik EN" geven want dat is wat hij op het scherm ziet. Dit commando zal niet werken, want voor Dragon is de linktekst "English version" geworden. De gebruiker van de dicteersoftware kan dat niet weten.
Reacties
Reageer als eerste