Accessibility voor front-end developers, HTML editie

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> Mijn favoriete element

<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

“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

<ul> Ander voorbeeld

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

<h1> SEO?

<h1> <h2> <h3> Hoofdonderwerp, subonderwerpen

“Wat staat er op de pagina?” — Screen reader gebruiker

Hiërachie Wat jij doet Niet woord voor woord scannen van een pagina

<header> <main> <footer> Gebieden van een pagina Waarbij header en footer vaste onderdelen van iedere pagina Main veranderend

Landmarks

<nav> Misschien meerdere Hierover later meer

“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

<details> <summary> Meer? </summary> <p> Dat dus. </p> </details> Accordeon met uitleg hoe te besturen Gratis interactie, zonder JS Dit moet jij nog stylen

<dl> <dt>Accessibility</dt> <dd>Web Accessibility (A11Y) refers to […]</dd> </dl> fi Description list, term, de nition Moeilijke woorden Metadata

<table> Tabulaire data Vergelijken van bijv productinformatie Screenreader vertelt relaties + summary Geen layouts mee maken

Accessible Rich Internet Applications Geen webpagina’s meer, maar…

ARIA

<nav> HTML ontoereikend Meer uitleg

<nav aria-label=”doelgroepen”> Een stapje verder Meteen een sidenote

<nav aria-labelledby=”target-audience”> + <div id=”target-audience”>doelgroepen</div> Vertalen

<a aria-label=”groen”>blauw</a> Moeten we alles labelen? Nee, je overschrijft de name

<a aria-label=”groen”>blauw</a> Niet doen dus

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