Accessible Rich Internet Applications (ARIA) en toegankelijkheid

Een van de belangrijkste doelstellingen van webontwikkeling is het creëren van een aantrekkelijke gebruikerservaring. U doet dit vaak door interactieve functies en verbluffende visuele elementen op uw website op te nemen. Deze aspecten zijn echter niet noodzakelijk toegankelijk voor elke potentiële bezoeker, vooral niet voor degenen die afhankelijk zijn van schermlezers.

Gelukkig is er een systeem waarmee al uw gebruikers de resultaten van uw harde werk kunnen ervaren. Het opnemen van Accessible Rich Internet Applications (ARIA) in de HTML van uw site kost slechts een beetje extra moeite, en het kan veel opleveren. Dit bericht laat u kennismaken met ARIA en het gebruik ervan.

Waarom een toegankelijke naam belangrijk is voor de toegankelijkheid

Niet alle elementen hebben een toegankelijke naam nodig, maar de meeste wel. 95% van de tijd is de toegankelijke naam triviaal gewoon de tekstwaarde van het component, maar voor die 5% (icoonknoppen, ingangen, afbeeldingen, enz.) is het goed om te weten hoe je die goed instelt.

Nogmaals: De toegankelijke naam van een element bepaalt hoe het element wordt aangekondigd aan een slechtziende gebruiker. Het niet goed instellen van de toegankelijke naam voor zelfs semi-complexe onderdelen zal deze gebruikers in het beste geval verwarren – en in het slechtste geval volledig hinderen bij het gebruik van uw applicatie.

ARIA: wat het is en waarom u het zou willen gebruiken

Kort gezegd is ARIA een manier om attributen van HTML te specificeren, zodat schermlezers ze nauwkeurig kunnen herkennen en vervolgens aan bezoekers kunnen doorgeven. Het is een belangrijk aspect van toegankelijke webontwikkeling, en helpt om nauwkeurigere ervaringen te creëren voor gebruikers van schermlezers.

Het opnemen van ARIA in uw HTML beïnvloedt namelijk de manier waarop browsers uw webpagina’s aanpassen voor schermlezers. Deze gewijzigde inhoud wordt gepresenteerd in een toegankelijkheidsboom, en ARIA neemt de taak op zich om uw HTML-elementen daarin te vertalen.

Laten we bijvoorbeeld zeggen dat je een pagina hebt met een selectievakje en dat je ARIA hebt gebruikt in je HTML. ARIA laat de schermlezer weten dat er een selectievakje op de pagina is, en geeft aan of het is aangevinkt of niet. Native HTML kan dit niet alleen.
Bedenk hoe vaak u het web gebruikt, niet alleen voor uw werk maar ook in uw dagelijks leven. Stel je nu voor dat een groot deel van het web voor jou onbruikbaar zou zijn. U zou toegang hebben tot minder middelen voor onderwijs, werk, gezondheidszorg, informatie, communicatie en zelfs amusement.

Het gebruik van best practices voor toegankelijke webontwikkeling is een manier om uw steentje bij te dragen om van het internet een plaats van gelijke kansen voor iedereen te maken, ongeacht leeftijd of vermogen. Dit wordt door de Verenigde Naties beschouwd als een fundamenteel mensenrecht, en is een doel dat de moeite waard is om na te streven.

Maar als dat nog niet genoeg is om u ertoe aan te zetten ARIA te gaan gebruiken, wilt u misschien ook weten dat toegankelijke ontwikkeling ook nuttig is vanuit zakelijk oogpunt. Het overlapt met best practices voor zoekmachineoptimalisatie en vergroot het bereik van uw website. Bovendien is het in sommige gevallen wettelijk verplicht. Met andere woorden, er zijn veel redenen om een paar eenvoudige stappen te nemen om uw site toegankelijker te maken.

Hoe ARIA te gebruiken in de HTML van je WordPress site (3 belangrijke praktijken)

We raden je zeker aan om je verder te verdiepen in ARIA en webtoegankelijkheid buiten het bestek van deze post. U kunt vooral overwegen om de huidige toegankelijkheid van uw site te testen.

Toch zijn er eigenlijk maar drie dingen die je moet weten om ARIA te gaan gebruiken in de HTML van je WordPress site. Het leren van de onderstaande praktijken zou je een solide basis moeten geven.

1. ARIA gebruiken met semantische HTML

Voordat we bespreken hoe je ARIA kunt toepassen op je HTML, is het belangrijk om te weten wanneer het gepast is om het te gebruiken. Hoewel native HTML alleen geen toegankelijke webinhoud oplevert, zijn er enkele semantische elementen die ARIA overbodig maken of die in strijd zijn met ARIA als ze niet correct worden gebruikt.

Semantische elementen – zoals <header>, <figure> en <nav> – beschrijven het doel van hun HTML. Het opnemen van ARIA in deze elementen zou overbodig zijn, omdat semantische HTML al de rol van het element impliceert (over ARIA-rollen straks meer).

Bovendien gelden er bepaalde regels voor het gebruik van ARIA, om te voorkomen dat ontwikkelaars het gebruiken op een manier die in strijd is met semantische HTML. Het World Wide Web Consortium (W3C) heeft een handige tabel die uitsplitst welke semantische HTML-elementen impliciete ARIA-rollen hebben:
Tabel waarin regels van ARIA voor HTML worden uitgelegd

De eerste kolom specificeert een HTML-element, terwijl de tweede kolom de impliciete rol vermeldt. Als het element een impliciete rol heeft, hoef je er geen bijkomende ARIA rol voor op te nemen. In de derde kolom staan de rollen die elk HTML element kan hebben, volgens de best practices.

2. Rollen toevoegen aan HTML Tags

Eens je zeker bent dat het HTML element waaraan je werkt het gebruik van ARIA noodzakelijk maakt, kan je overgaan tot het gebruik van ‘rollen’ en ‘attributen’. Je hebt misschien al een idee van wat ARIA rollen doen uit de vorige paragraaf. Ze specificeren het type element dat in de tag zit, en geven het doel van het element aan.

Als je bijvoorbeeld een waarschuwing wilt maken om gebruikers te informeren dat ze een update moeten installeren, gebruik je de ‘alert’ rol als volgt:

<div role="alert">
<p>Installeer nu update!</p>
</div>

Zoals we eerder hebben uitgelegd, hoef je geen rol toe te kennen als het element semantisch is en de rol impliceert, en je moet geen nieuwe rol toekennen aan een element dat in strijd is met de geïmpliceerde rol. U moet er echter ook rekening mee houden dat u slechts één rol kunt toekennen aan elk element.

Zie het zo: een rol bepaalt wat een element is. Een element kan niet twee dingen tegelijk zijn, dus kies je de rol die het beste beschrijft. Maar als het nodig is, kun je ervoor kiezen een element te nesten in een element met een andere rol.
Als u bijvoorbeeld de bovenstaande waarschuwing aan uw kopregel wilt toevoegen, zou het er ongeveer zo uit kunnen zien:

<header><div role="alert">
<p>Please install the latest update!</p>
</div></header>

In plaats van te stellen dat een enkel element zowel een kop als een waarschuwing is, maakt dit duidelijk dat de kop een waarschuwing bevat.

3. Attributen opnemen om toestanden en eigenschappen aan te geven

Attributen zijn het tweede element waaruit ARIA bestaat. Ze verschillen van rollen omdat ze schermlezers iets belangrijks vertellen over een bepaald element, in plaats van te definiëren wat dat element is. Er zijn twee soorten ARIA attributen:

• States delen informatie over kenmerken die waarschijnlijk veranderen wanneer een gebruiker ermee interageert. Dit kunnen bijvoorbeeld selectievakjes of keuzerondjes zijn.
• Eigenschappen wijzen op kenmerken die waarschijnlijk niet veranderen tijdens het gebruik. Een element dat een ander element labelt, of het hiërarchische niveau waarop een element zich bevindt, zijn beide eigenschappen.

Beide zijn gemakkelijk te herkennen, omdat ze altijd beginnen met aria- gevolgd door de specifieke toestand of eigenschap die wordt gebruikt. Bijvoorbeeld, de toestand die gebruikt wordt om een schermlezer te informeren dat een selectievakje standaard gevuld is, is aria-gecontroleerd, zoals in dit voorbeeld:
https://www.sitepoint.com/how-to-use-aria-effectively-with-html5/

<span role="checkbox"
aria-checked="true"
tabindex="0"
id="simulatedcheckbox">
</span>

Evenzo is de eigenschap die wordt gebruikt om aan te geven dat een element een ander element labelt aria-labelledby. Je kunt dit attribuut bijvoorbeeld toepassen op een afbeelding om aan te geven welk bijschrift erbij hoort:

<figure aria-labelledby="mijnafbeelding-cursuswp_1" role="group">
<img src="mijnafbeelding-cursuswp.jpg" alt="Mijn alt tekst">
<figcaption id="mijnafbeelding">We saw the opera <cite>Barber of Seville</cite> here!</figcaption>
</figure>

We raden aan W3C’s lijst van toegestane rollen, toestanden en eigenschappen te raadplegen, om meer voorbeelden te zien van attributen die je kunt gebruiken. U kunt uw site ook door de W3C-validator halen om er zeker van te zijn dat alles correct is ingesteld.

Voorbeeld button maken met aria-describedby

Gewone html button

<button>Plaats in prullenbak</button>
<p>
  Items in prullenbak worden na 30 dagen verwijderd.
</p>

Html button met aria-describedby functie

<button aria-describedby="trash-omschrijving">Plaats in prullenbak</button>
<p id="trash-omschrijving">
  Items in prullenbak worden na 30 dagen verwijderd.
</p>

Aria label

Het aria-label is bedoeld voor gebruik op interactieve elementen, of elementen die interactief zijn gemaakt via andere ARIA-declaraties, wanneer er geen geschikte tekst zichtbaar is in het DOM waarnaar kan worden verwezen als label.

ARIA/Attributes/aria-label

<!-- Een knop met zowel een direct label als een ander element als label
waarbij de laatste voorrang heeft
Merk op dat dit zelfs werkt met een verborgen (of aria-verborgd) labelelement -->
<span id="span-label" hidden>
  Publish post
</span>
<button aria-label="Make public" aria-labelledby="span-label">
  Klik hier
</button>

Conclusie ARIA

Als het om webontwikkeling gaat, is het creëren van toegankelijke inhoud misschien niet het eerste waar u aan denkt. Maar door de best practices voor webtoegankelijkheid te volgen en ARIA HTML in uw site op te nemen, kunt u een rol spelen bij het toegankelijk maken van het web voor iedereen.

3 voordelen ARIA

• ARIA gebruiken met semantische HTML.
• Rollen toevoegen aan HTML tags.
• Attributen toevoegen om toestanden en eigenschappen aan te geven.

Links en informatie over ARIA en toegankelijkheid

https://www.washington.edu/accessibility/websites/aria/

Heeft u vragen over het gebruik van ARIA op uw WordPress site? Laat het ons weten.