Aria-labels en relaties

Wat is Aria?

Aria is een set HTML attributen, special ontworpen om een website of webpagina extra informatie mee te geven voor ondersteunende technologie, zoals screenreaders, tablets, ... Wees gerust het zeer er zeer veel. Momenteel zijn er 36 aria-* attribute, elk attribuut heeft zijn eigen specifieke of algemeen gebruik WAI-ARIA, de Accessible Rich Internet Applications Suite, definieert een manier om webinhoud en webapplicaties toegankelijker te maken voor mensen met een handicap. Het helpt vooral bij dynamische inhoud en geavanceerde gebruikersinterfacebesturingselementen die zijn ontwikkeld met HTML, JavaScript en verwante technologieën. Zonder WAI-ARIA is bepaalde functionaliteit die in websites wordt gebruikt niet beschikbaar voor sommige gebruikers met een handicap, met name mensen die afhankelijk zijn van schermlezers en mensen die geen muis kunnen gebruiken. WAI-ARIA pakt deze toegankelijkheidsuitdagingen aan, bijvoorbeeld door manieren te definiëren waarop functionaliteit kan worden geleverd aan ondersteunende technologie. Met WAI-ARIA kunnen ontwikkelaars geavanceerde webapplicaties toegankelijk en bruikbaar maken voor mensen met een handicap.

aria-label

Een aria-label overschrijft een HTML attribuuts naam, en vervangt het met de tekst die jij meegeeft.

<button aria-label="Sluiten"> * </button>

Door het standaard gedrag van HTML, zou onze button de naam "*" krijgen, dit is echter bedoeld als een manipulatie systeem, alleen zullen screenreaders dit ook zo aankondigen. Concreet betekend dit dus dat er een visuele knop zal zijn om iets te sluiten, maar het niet echt praktisch of beschrijvend is voor andersvaliden die gebruik maken van assistentietechnologie. Exact om deze reden voegen we het aria-label="Sluiten" toe op het button element. De naam van button is nu "Sluiten", wat een veel meer beschrijvende en intuitieve naam is. Het kan verleidelijk zijn om aria-label overal te gebruiken om aankondigingen en uitspraken aan te passen voor screenreader gebruikers, maar, zoals met alle ARIA, is het belangrijk om oordeelkundig te zijn. Ten eerste, terwijl aria-label goed wordt ondersteund voor interactieve elementen, wordt het niet goed ondersteund voor statische tekstelementen. Bovendien berusten dergelijke labeloverrides vaak op verkeerde aannames over hoe gebruikers door je pagina navigeren. Ten slotte, als je merkt dat je vaak naar aria-label grijpt, kan dat een teken zijn dat je je semantische opmaak moet heroverwegen of je ontwerp moet aanpassen om meer visuele labels op te nemen die voor iedereen toegankelijk zijn.

aria-labelledby

aria-labelledby overschrijft ook de naam van een element, door het te vervangen door de inhoud van een ander element. aria-labelledby wordt ingesteld op het id van een ander element waarvan de inhoud een bruikbare naam vormt. Je kan dit zien als een soort veralgemeende versie van het for attribuut van het element. Dit is handig als je al een ander element hebt dat dient als een visueel label voor iets. Door de twee elementen op deze manier te koppelen met aria-labelledby, zorgen we ervoor dat we de inhoud maar op één plaats hoeven bij te werken en dat onze toegankelijke naam automatisch wordt bijgewerkt. Iets, iets, herhaal jezelf niet. Een handig gebruik van aria-labelledby is het labelen van secties. Als secties gelabeld zijn, kunnen screenreader-gebruikers er doorheen bladeren zoals in een inhoudsopgave, en ze gebruiken om door te springen naar secties van de pagina die ze belangrijk vinden. Meestal hebben deze secties al een heading-element dat kan dienen als een mooi, handig label!

<section aria-labelledby="introductie">
	<h2 id="introductie">Welkom op onze website</h2>
	<p>Lorem ipsum dolor</p>
</section>

aria-gelabeldby heeft veel van dezelfde beperkingen als aria-label, zoals compatibele elementen en gebruikersverwachtingen. Bovendien zal aria-gelabeldby voorrang hebben op aria-label als beide attributen worden verstrekt.

aria-describedby

aria-describedby stelt de beschrijving van een element in op de inhoud van een ander element. Net als aria-labelledby, heeft aria-describedby een id nodig. Beschrijvingen zijn nuttig voor het geven van langere-vorm, aanvullende informatie over een interface control die waarschijnlijk samen met de rest van het element zou moeten worden getoond, maar die geen zin zou hebben als onderdeel van de naam van het element. We zouden bijvoorbeeld aria-describedby kunnen gebruiken om een ingang te koppelen aan een element dat meer details geeft over het verwachte formaat van de ingang:

Versies

 

• WAI-ARIA 1.0 werd op 20 maart 2014 gepubliceerd als een voltooide W3C-aanbeveling.
• WAI-ARIA 1.1 werd op 14 december 2017 gepubliceerd als een voltooide W3C-aanbeveling.
• WAI-ARIA 1.2 is in ontwikkeling.

TL;DR

aria-label, aria-gelabeldby, en aria-beschrevenby kunnen allemaal gebruikt worden om extra duidelijkheid te geven aan een bepaald element wanneer het wordt blootgesteld aan ondersteunende technologie.

• aria-label vervangt de naam van een element door de inhoud die jij opgeeft.
• aria-labelledby vervangt de naam van een element door de inhoud van een ander knooppunt op de pagina. Je zou dit gebruiken als je toch al een zichtbaar label zou hebben.
• aria-describedby stelt de beschrijving van je element in op de inhoud van een andere node op de pagina. Dit is prima voor niet-kritische, aanvullende informatie.
• aria-description... komt eraan.