Omslag van 'WCAG in de praktijk'

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

11.1 HTML DOM

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 op 3 manieren:

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

11.2 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).

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

11.4 Verder lezen

top

Wat vind je van dit hoofdstuk?

Feedback

Contact

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