Terug naar de inhoudsopgave

Toegankelijke naam en de accessibility tree

Wat je ziet moet je ook kunnen horen. Geef daarom een interactief HTML-element de juiste rol, naam en indien van toepassing een waarde of status

Bijvoorbeeld voor een menu knop:

<button aria-expanded="false">Menu</button>

    
Bijvoorbeeld voor een link:

    


    
<a href="https://www.internetacademy.nl/contact">Contact</a>

    
Demo: We gaan samen met een screenreader door een aantal websites. Wat valt je op bij het voorlezen?


    

    
Accessibility tree


    
Hoe weet je welke informatie en browser doorgeeft aan een screenreader?


    
In Edge: Test accessibility using the Accessibility tab


    
In Chrome: Volledige toegankelijkheidsstructuur in Chrome DevTools


    
In FireFox Accessibility inspector


    
Oefen in groepjes van 2 op een van deze websites, noteer 3 dingen op je opvallen over de toegankelijke namen. Bekijk ook formulieren en links naar sociale media.

    

    
Demo: demo Voice Control in Safari voor belang toegankelijke naam


    
Wat zegt WCAG hierover?


    
WCAG-succescriterium 4.1.2 Naam, rol, waarde:

        Geef interactieve elementen zoals buttons, links en formuliervelden een toegankelijke naam en een bijpassende rol. Geef daarnaast, afhankelijk van de functionaliteit, het element een toestand (state), eigenschappen en een waarde mee.


    
WCAG-succescriterium 2.5.3 Label in Naam:

        De zichtbare naam van een onderdeel moet terugkomen in de toegankelijke naam.
        De zichtbare naam is wat veel gebruikers zien als ze een website gebruiken. Denk hierbij aan labels bij invoervelden, linkteksten of de inhoud van een knop.


    
WCAG-succescriterium 1.3.1 Info en relaties:

        Alle gebruikers moeten over dezelfde informatie kunnen beschikken.

    
Info en relaties?