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.

Omslag van ''

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.internetacademy.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>.

Zowel de head als de body bevatten elementen.

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>

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 JavaScript. 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: een h2 die direct volgt op een een h1 krijgt minder marge.

De DOM tree is vervolgens weer de basis voor de lay-out van de pagina, de user interface. En voor de Accessibility tree.

Nog even samengevat: browsers vertalen de HTML-code naar een DOM-weergave, de DOM tree. De DOM-weergave bevat objecten of nodes: elementen, attributen, teksten en afbeeldingen.

5.2 Accessibility tree

Browsers maken op basis van deze DOM tree een Accessibility tree. Deze Accessibility tree kan weer gelezen worden door een schermlezer of andere ondersteunende technologie (assistive technology), zodat de webpagina bruikbaar wordt voor de gebruiker.

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'.

Tip: Je kunt de tabbladen ook van rechts naar links schuiven, zodat de Accessibility-tab direct rechts van de Inspector-tab komt.

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.

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.internetacademy.nl dan zie je deze secties ook, bijvoorbeeld:

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

Screenreadergebruikers kunnen deze secties gebruiken als zogenaamde landmarks. De gebruiker van de screenreader kan zo direct springen naar de hoofdinhoud (main) of naar het menu (nav). In de praktijk wordt het nog weinig gebruikt en navigeren mensen met schermleessoftware vaker via de koppenlijst.

5.4 WAI-ARIA

In de meeste gevallen biedt HTML5 met de DOM en de Accessibility Tree voldoende informatie voor screenreaders. De gebruiker van de schermlezer krijgt bijvoorbeeld alle informatie over de naam, de rol en de waarde van een element.

Soms echter kan dat niet in HTML. Daarvoor biedt WAI-ARIA, of kortweg ARIA uitkomst.

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

Opmerking: ARIA bestaat al lang, sinds 2008. De term 'Rich Internet Applications is een term uit die tijd en eigenlijk nogal verouderd. Tegenwoordig zouden we dat widgets of componenten noemen.

Met ARIA-attributen voeg je informatie toe aan de Accessibility Tree. Je kunt 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">

Samengevat: met ARIA-attributen wijzig je de semantiek van elementen in de Accessibility Tree, omdat die ontbreekt of niet goed is bij het gebruik van enkel HTML.

5.5 Verder lezen

Naar boven