Hoe werkt de DOM?
Wanneer een browser HTML ontvangt, leest hij de code en bouwt daar een structuur van op. Die structuur bestaat uit onderlinge relaties tussen onderdelen, zoals koppen, paragrafen, links, lijsten, formulieren en knoppen. Die samenhang noemen we de DOM-boom.
Een eenvoudig voorbeeld:
<body>
<h1>Welkom</h1>
<p>Dit is een introductie.</p>
</body>In de DOM wordt dit gelezen als een document met een body-element, met daarbinnen een h1 en een p. Die elementen staan niet los van elkaar, maar maken deel uit van dezelfde hiërarchische structuur.
Waarom is de DOM belangrijk?
De DOM is belangrijk omdat hij de basis vormt voor hoe een pagina functioneert. JavaScript gebruikt de DOM om onderdelen van de pagina te wijzigen. Denk aan het tonen van foutmeldingen, het openen van menu’s of het dynamisch aanvullen van content.
Ook voor toegankelijkheid is de DOM essentieel. Schermlezers en andere hulptechnologieën lezen niet “wat er visueel mooi uitziet”, maar interpreteren de onderliggende structuur van de pagina. Als de DOM logisch en semantisch is opgebouwd, wordt de inhoud doorgaans ook beter begrepen door gebruikers van hulpsoftware.
DOM en visuele weergave zijn niet hetzelfde
Een belangrijk aandachtspunt is dat de DOM niet altijd hetzelfde is als wat een gebruiker visueel op het scherm ziet. Met CSS kun je elementen bijvoorbeeld op een andere plek tonen dan waar ze in de broncode staan. Voor ziende gebruikers lijkt de volgorde dan logisch, maar in de DOM kan die volgorde anders zijn.
Dat kan problemen veroorzaken voor toetsenbordgebruikers en schermlezers. Zij volgen meestal de structuur van de DOM en niet uitsluitend de visuele presentatie. Daarom moet de logische lees- en focusvolgorde in de HTML zelf kloppen.
De DOM als boomstructuur
De DOM wordt vaak voorgesteld als een boom. Bovenaan staat het document, daaronder de hoofdonderdelen zoals html, head en body, en daarbinnen weer onderliggende elementen. Een element kan dus een ouder, kind of sibling van een ander element zijn.
Wat betekent dit voor toegankelijkheid?
Voor toegankelijkheid geldt: een goede DOM-structuur ondersteunt goed begrip. Dat betekent onder meer:
- gebruik semantische HTML, zoals echte koppen, lijsten, knoppen en formulieren, in plaats van willekeurige
div-elementen voor alles; - zorg dat de volgorde in de HTML logisch is en overeenkomt met de bedoelde lees- en bedienvolgorde;
- maak interactieve onderdelen correct op, zodat hulptechnologie ze als zodanig herkent.