Wat is het doel van de Accessibility Tree?

Profiel foto van Arjan Schouten, de schrijver van de blog.
Author Arjan Schouten

Laatste wijziging:

Wat is het doel van de Accessibility Tree and waarom is het belangrijk om deze Accessibility tree te inspecteren?

Wat is de Accessibility Tree?

Browsers hebben een in-memory representatie van een website in de DOM (Document Object Model). De DOM kan worden bijgewerkt om de webpagina dynamisch te veranderen via JavaScript.

 

De DOM is een hiërarchische boomstructuur van een webpagina. Deze DOM-tree stelt JavaScript in staat om de inhoud van de pagina te manipuleren, en elke wijziging die in de DOM wordt aangebracht wordt op het scherm weergegeven.

 

Het voornaamste doel van de DOM is het faciliteren van het renderingsproces en bevat daarom veel informatie die niet voor een websitebezoeker te doorgronden is. Screenreaders en andere ondersteunende technologieën hebben een beknopte representatie van de pagina nodig zonder deze details voor visuele weergave. De DOM is dus geen goede structuur voor screenreaders.

 

The Accessibility Tree is een boomstructuur om screenreaders en andere ondersteunende technologieën te toegang te geven tot alleen belangrijke informatie. Het is beknopter in vergelijking met de DOM en bevat niet de details voor visuele weergave.

 

De accessibility tree bestaat uit nodes die met elkaar verbonden zijn. De nodes in de Accessibility Tree hebben de volgende gemeenschappelijke eigenschappen:

 

name:

Voor een screenreader is het belangrijk om het element te kunnen aankondigen met een beknopte maar beschrijvende naam.

 

description:

Optioneel een langere beschrijving om de manier waarop een gebruiker met een element moet interageren, te beschrijven.

 

role:

De rol van het element legt het doel van het element uit.

 

state:

Sommige elementen hebben state. Bijvoorbeeld: een checkbox kan checked of unchecked zijn.

Website Accessibility Audit

Test de toegankelijkheid van uw website.

Hoe de Accessibility Tree te inspecteren?

Het is belangrijk om de Accessibility Tree te inspecteren. Mensen met visuele beperkingen, mensen die liever luisteren dan een webpagina lezen, en anderen ervaren de inhoud van de Accessibility Tree.

 

Als hierin labels en beschrijvingen missen moeten die worden toegevoegd aan het element. Bijvoorbeeld, een afbeelding die geen tekst in de Accessibility Tree heeft moet voorzien worden van alternatieve tekst.

 

Om de Accessibility Tree te inspecteren:

  1. Open Developer tools in de browser;
  2. Open de Accessibility tab.
De Accessibility Tree in Firefox met een heading geselecteerd in de tree

Wat te controleren in de Accessibility Tree?

Labels en alternatieve tekst

Hebben elementen een duidelijk label? Zijn er alternatieve teksten voor media-elementen?

 

Duidelijke structuur

Is de volgorde waarin elementen verschijnen zoals je zou verwachten? Is de volgorde waarin elementen in de Toegankelijkheidsboom verschijnen hetzelfde als de visuele structuur van de pagina?

 

Roles:

Valideer dat elementen passende rollen hebben. Bijvoorbeeld: een klikbaar element dat eruitziet als een knop moet de rol button hebben.

 

State:

Hebben elementen de juiste status? Elementen met een status zijn bijvoorbeeld checkbox (checked) en uitbreidbare secties (expanded).

Conclusie

Het is belangrijk om het doel van de Accessibility tree te begrijpen. Door de Accessibility tree te bekijken, kunnen webontwikkelaars en testers potentiële toegankelijkheidsproblemen identificeren en noodzakelijke verbeteringen aanbrengen om een meer inclusieve gebruikerservaring te bieden.

Website Accessibility Audit

Controleer of uw website drempelvrij is.

Deel dit artikel

Heeft dit artikel u geholpen?

Bekijk alle diensten van ExcellentWebCheck

Het doel van ExcellentWebCheck is om de online gebruikerservaring van alle bezoekers van websites te verbeteren. De tools van ExcellentWebCheck helpen bij het detecteren en verbeteren van usability-problemen op uw website.