Omslag van 'WCAG in de praktijk'

5. HTML DOM, accessibility tree en WAI-ARIA

Om iets te begrijpen van hoe een schermlezer een webpagina analyseert moeten we ons verdiepen in het zogenaamde Document-Object-Model (DOM), de boomstructuur van de HTML. Deze DOM vormt de basis voor de accessibility tree, die screenreaders gebruiken om de betekenis en bedoeling van HTML-elementen te begrijpen. Wanneer HTML tekortschiet, kun je WAI-ARIA gebruiken.

5.1 HTML DOM of DOM tree

De HTML van een webpagina bestaat uit elementen die in een hele duidelijke structuur staan, ook wel een boomstructuur genoemd.

Als de browser een pagina laadt, bouwt de browser een model op van deze pagina op basis van de verschillende HTML-elementen, objecten genoemd. Deze pagina is voor de browser een document. Vandaar de term Document-Object-Model.

Waarschijnlijk nog allemaal erg abstract. Bekijk het daarom maar gelijk met de ‘Inspector’:

  1. Open Firefox of Chrome.
  2. Ga naar de pagina www.theinternetacademy.nl.
  3. Klik met de rechtermuisknop ergens op een leeg stuk aan de zijkant van de pagina en kies in het rechtermuismenu voor Inspecteren.

Je ziet in het linkerdeel de HTML-code van de pagina. Je ziet niet alle code, je ziet vooral de hoofdonderdelen, zoals <html>, <head> en <body>. Waar je nu naar kijkt is de DOM-weergave (of DOM tree) van de HTML-code.

Het zogenaamde root element van dit document is <html>. Daarbinnen zijn 2 hoofdelementen: <head> en <body>.

De head bevat het element <title> en daarnaast andere elementen met meta-informatie en verwijzingen naar CSS en JavaScript.

Elementen kunnen tekst bevatten. Ga maar eens terug naar het scherm waarin je Inspecteren had geopend. En open daar de tag <head>. Zie je wat er allemaal onder staat?

In de body zitten ook weer elementen. Deze elementen zijn bijvoorbeeld <h1>, <h2>, <div> en <p>. Een element kan ook een attribuut hebben: het element <a> heeft bijvoorbeeld als attribuut ‘href’:

<a href="https://www.theinternetacademy.nl">The Internet Academy</a>

Schematisch ziet dat er zo uit:

Elk onderdeel in de DOM noemen we ook een node. Dus elk element is een node, elk attribuut is een node en elke tekst is een node.

In de begintijd had HTML niet een DOM-structuur. Het werd echter steeds belangrijker om de elementen te kunnen aansturen met bijvoorbeeld JavaScipt. Daarom ontwikkelde het W3C deze DOM-structuur.

Met deze DOM kan je via CSS en JavaScript de opmaak en het gedrag wijzigen van deze elementen. Bijvoorbeeld een h1 groot en vet maken. Dat wijzigen kan met CSS op 3 manieren:

  1. Via de attributen, bijvoorbeeld via een style, id of een class
  2. Direct op het element, bijvoorbeeld door een andere opmaak voor de h1 te kiezen
  3. Door de boomstructuur van het document te volgen, bijvoorbeeld: elke h2 na een h1 krijgt minder marge.

5.2 Accessibility tree

Browsers vertalen de HTML-code naar een DOM-weergave, de DOM tree (zie hierboven). De DOM-weergave bevat objecten of nodes: elementen, attributen en teksten.

Browsers maken op basis van deze DOM tree een Accessibility tree. Deze Accessibility tree biedt begrijpelijke informatie voor schermlezers over de meeste HTML-elementen.

HTML is zo gebouwd dat in principe bij elk element duidelijk gemaakt kan worden wat de betekenis is. Het gaat daarbij om de naam, de rol en de waarde. De Accessibility tree biedt deze informatie.

Er zijn verschillende onderdelen in een object in de Accessibility tree. We noemen hier 4 belangrijke:

name
Hoe verwijzen we naar dit ding? Bijvoorbeeld een link met de tekst 'paspoort aanvragen' heeft dit ook als naam: 'paspoort aanvragen'.
role
Welke functie heeft het? Bijvoorbeeld is het een link, een item in een opsomming, een button of een menu?
value
Welke waarde heeft het? Bij een link is dat bijvoorbeeld de link (de url). Of de ingevulde tekst bij een tekstveld in een formulier.
state
Wat is de 'status'? Bijvoorbeeld bij een link: is deze al bezocht. Of een radiobutton: is deze wel of niet aangevinkt? Of bij een accordion: is deze ingeklapt of uitgeklapt?

Om dit goed te begrijpen is het handig om de Accessibility tree eens te bekijken:

  1. Ga naar Artikelen.
  2. Open de Inspector.
  3. In Firefox: ga naar het tabblad Toegankelijkheid.
  4. In Chrome: ga naar Elementen ▸ Toegankelijkheid.
  5. Ga naar het blokje met de tekst 'HTML-modus in een cms: onmisbaar voor de webredacteur'.
Accessibility tree in Firefox
Accessibility tree in Chrome

Als je dan kijkt bij een link, dan krijg je in de Accessibility tree de eigenschappen te zien.

In het geval van de link is dit bijvoorbeeld:

  • name: HTML-modus in een cms: onmisbaar voor de webredacteur
  • role: link
  • value: https://www.theinternetacademy.nl/artikelen/html-modus-in-een-cms-onmisbaar-voor-de-webredacteur

Zo weet de schermlezergebruiker wat het onderwerp is, dat het een link is en waar deze naartoe gaat (value).

Deze eigenschappen zijn standaard goed beschikbaar voor alle gewone HTML-elementen. Bij elementen die aangepast zijn kan het zijn dat de eigenschappen aangevuld moeten worden via ARIA. Meer daarover in het hoofdstuk Robuust.

5.3 HTML secties en landmarks

Bij de inspectie van de pagina zagen we dat de HTML-code in hoofdonderdelen is ingedeeld. HTML5, de nieuwste versie van HTML, gebruikt hiervoor secties of sectioning elements. Enkele voorbeelden hiervan:

  • <main>: hierin staat de hoofdcontent (primaire content) van een pagina.
  • <nav>: gebruik je voor het menu en het broodkruimelpad
  • <header>: bevat het logo en eventuele pay-off van je organisatie

Als je nogmaals met de inspector kijkt naar de pagina www.theinternetacademy.nl dan zie je deze secties ook, bijvoorbeeld:

<header id="head">
<nav id="menu">
<main id="home-main">

Screenreaders gebruiken deze secties als zogenaamde landmarks. De gebruiker van de screenreader kan zo direct springen naar de hoofdinhoud (main) of naar het menu (nav).

5.4 WAI-ARIA

In principe biedt HTML5 met de DOM en de afgeleide accessibility tree veel mogelijkheden om screenreaders duidelijke informatie te geven over alle elementen. Soms echter kan dat niet in HTML. Daarvoor biedt WAI-ARIA uitkomst.

WAI-ARIA staat voor Web Accessibility Initiative Accessible Rich Internet Applications specification, een specificatie ontwikkeld door het W3C. Daarmee kun je aan de HTML-code specifieke kenmerken meegeven, zodat screenreaders de informatie goed kunnen interpreteren.

Met WAI-ARIA kun je bijvoorbeeld een rol toevoegen. Stel je hebt een zoekfunctie op de site (voorbeeld van MDN Web Docs). In de HTML-code staat deze in een <form>. <header> <h1>...</h1> <nav> <ul>...</ul> <form> <!-- zoekfunctie --> </form> </nav> </header>

Als de screenreader navigeer met de landmarks, dan ontdekt deze niet de zoekfunctie, aangezien <form> geen landmark is. Voegen we aan het element <form> het WAI-ARIA 'role="search"' aan toe, dan komt deze wel terug in het menu met landmarks en vindt de screenreadergebruiker deze wel.

<form role="search"> <!-- zoekfunctie --> </form>

En anders dan met WAI-ARIA is dit niet goed op te lossen.

Nog een voorbeeld. De code van het veld om de zoekfunctie in uit te voeren ziet er zo uit:

<input type="search" name="q" placeholder="Zoeken">

Het kan voor de screenreadergebruiker onduidelijk zijn wat deze zoekfunctie precies doet. Ook dat kun je oplossen met WAI-ARIA door er een aria-label aan toe te voegen: <input type="search" name="q" placeholder="Zoeken" aria-label="Zoek in de hele website">

WAI-ARIA kent heel veel mogelijkheden. Het voert te ver om daar op deze plek te diep op in te gaan.

5.5 Verder lezen

top

Wat vind je van dit hoofdstuk?

Feedback

Contact

Vul dit in als je wil dat we contact met je opnemen.