A presentation at We are you front-end gilde meeting by Joris Hulsbosch
Accessibility voor front-end developers, HTML editie Joris Hulsbosch, 24 maart 2021
HTML Begint bij HTML
Name Role Description State Ieder element heeft
Accessibility tree Van HTML wordt door je browser een accessibility tree gemaakt.
fl Voor mensen die niet uit visuele structuur paginaopbouw kunnen a eiden
Semantiek Content krijg betekenis Soms heel concreet, zoals…
<a href=”aanbod”> Bekijk het aanbod </a> Gratis accessibility, focus, spatie/enter, rechtermuis
Name: “Bekijk het aanbod” Role: “link”
“Waar kan ik naartoe?” — Screen reader gebruiker Met screenreader alle links opvragen
“Klik hier voor meer informatie” Zorg voor goede beschrijving
“Klik hier voor meer informatie” Zorg voor goede beschrijving
“lees meer” “lees meer” “lees meer” Zorg dat ie uniek is Nieuwsartikelen Maak van de titel de link
“lees meer” “lees meer” “lees meer” Zorg dat ie uniek is Nieuwsartikelen Maak van de titel de link
“Wat kan ik besturen?” — Screen reader gebruiker
Name: “Open menu” Role: “pushbutton” Ook gratis a11y, focussen, activeren met toetsenbord Geen clickhandlers op niet-interactieve elementen
Lijst
“Hoeveel dingen staan hier?” — Screen reader gebruiker Wordt aangekondigd Wat te verwachten
Ook zonder bullets, of horizontaal Misschien logisch, wordt vergeten
<meter> <progress> <time> <abbr> Exotische elementen
“Wat staat er op de pagina?” — Screen reader gebruiker
Hiërachie Wat jij doet Niet woord voor woord scannen van een pagina
Landmarks
“Hoe navigeer ik?” — Screen reader gebruiker Omdat het visueel niet af te leiden is
Relaties
<label for=”first-name”> + <input id=”first-name”> Altijd doen Wat moet er in dit veld? Niet met een placeholder-attribuut Autocomplete
Accessible Rich Internet Applications Geen webpagina’s meer, maar…
ARIA
<a aria-label=”groen”>blauw</a> Moeten we alles labelen? Nee, je overschrijft de name
<a aria-label=”groen”>blauw</a> Niet doen dus
<button aria-expanded=”true” aria-controls=”foldout-id”> + <div id=”foldout-id”>
Testen
Zoomen Ctrl + + Naming en shaming
Tab-toets Voor mensen die geen muis kunnen besturen Motorische beperking
Ook hier kun je niet zien welke site het is Uitklappers niet met toetsenbord te bereiken Iemand die geen muis kan besturen kan mogelijk niet inloggen
Geen skip links
In Firefox Begint bij 3? Goed gedaan mensen
Firefox a11y tools + Chrome Lighthouse Goed in: Labels Contrast
Contrast Slechtzienden, Beamer, zonlicht
Voiceover Voor MacOS gebruikers Moeilijk Doe de tutorial! Kost je een uurtje.
Automatiseren? Kan je automatiseren? Wel: contrast, labels, alt-attributes Alles met divs en spans Hebben geen betekenis
Handmatig testen fi Voorbeelden In 5 minuten gevonden, in 5 minuten xen Audit door stichting drempelvrij gebeurt ook met de hand
Awareness In je team
Voorkomen Wat je wil doen Doe je met…
Visual design UX design Back-end Klant Niet als losse individuen te werk Eigen belangen behartigen Gaat om de gebruiker, om alle gebruikers Kwestie van
Samenwerken Met je team Geen reden om het niet te doen
Meer weten?
Inclusive Components Heydon Pickering Als boek op kantoor in Den Bosch, e-book
Form Design Patterns Adam Silver Boek en e-book
adrianroselli.com a11yproject.com Slack: #accessibility Er is veel Artikelen over complexe UI Wij, op Slack Stel je vragen
Dank! #accessiblity
for free. You
can too.