Accessibility voor front-end developers, HTML editie

A presentation at We are you front-end gilde meeting in March 2021 in by Joris Hulsbosch

Slide 1

Slide 1

Accessibility voor front-end developers, HTML editie Joris Hulsbosch, 24 maart 2021

Slide 2

Slide 2

HTML Begint bij HTML

Slide 3

Slide 3

Name Role Description State Ieder element heeft

Slide 4

Slide 4

Accessibility tree Van HTML wordt door je browser een accessibility tree gemaakt.

Slide 5

Slide 5

fl Voor mensen die niet uit visuele structuur paginaopbouw kunnen a eiden

Slide 6

Slide 6

Semantiek Content krijg betekenis Soms heel concreet, zoals…

Slide 7

Slide 7

<a> Mijn favoriete element

Slide 8

Slide 8

<a href=”aanbod”> Bekijk het aanbod </a> Gratis accessibility, focus, spatie/enter, rechtermuis

Slide 9

Slide 9

Name: “Bekijk het aanbod” Role: “link”

Slide 10

Slide 10

“Waar kan ik naartoe?” — Screen reader gebruiker Met screenreader alle links opvragen

Slide 11

Slide 11

“Klik hier voor meer informatie” Zorg voor goede beschrijving

Slide 12

Slide 12

“Klik hier voor meer informatie” Zorg voor goede beschrijving

Slide 13

Slide 13

“lees meer” “lees meer” “lees meer” Zorg dat ie uniek is Nieuwsartikelen Maak van de titel de link

Slide 14

Slide 14

“lees meer” “lees meer” “lees meer” Zorg dat ie uniek is Nieuwsartikelen Maak van de titel de link

Slide 15

Slide 15

<button>

Slide 16

Slide 16

“Wat kan ik besturen?” — Screen reader gebruiker

Slide 17

Slide 17

Name: “Open menu” Role: “pushbutton” Ook gratis a11y, focussen, activeren met toetsenbord Geen clickhandlers op niet-interactieve elementen

Slide 18

Slide 18

<ul> Ander voorbeeld

Slide 19

Slide 19

Lijst

Slide 20

Slide 20

“Hoeveel dingen staan hier?” — Screen reader gebruiker Wordt aangekondigd Wat te verwachten

Slide 21

Slide 21

Ook zonder bullets, of horizontaal Misschien logisch, wordt vergeten

Slide 22

Slide 22

<meter> <progress> <time> <abbr> Exotische elementen

Slide 23

Slide 23

<h1> SEO?

Slide 24

Slide 24

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

Slide 25

Slide 25

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

Slide 26

Slide 26

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

Slide 27

Slide 27

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

Slide 28

Slide 28

Landmarks

Slide 29

Slide 29

<nav> Misschien meerdere Hierover later meer

Slide 30

Slide 30

“Hoe navigeer ik?” — Screen reader gebruiker Omdat het visueel niet af te leiden is

Slide 31

Slide 31

Relaties

Slide 32

Slide 32

<label for=”first-name”> + <input id=”first-name”> Altijd doen Wat moet er in dit veld? Niet met een placeholder-attribuut Autocomplete

Slide 33

Slide 33

<figure> <img> <figcaption>Some text</figcaption> </figure>

Slide 34

Slide 34

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

Slide 35

Slide 35

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

Slide 36

Slide 36

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

Slide 37

Slide 37

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

Slide 38

Slide 38

ARIA

Slide 39

Slide 39

<nav> HTML ontoereikend Meer uitleg

Slide 40

Slide 40

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

Slide 41

Slide 41

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

Slide 42

Slide 42

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

Slide 43

Slide 43

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

Slide 44

Slide 44

<button aria-expanded=”true” aria-controls=”foldout-id”> + <div id=”foldout-id”>

Slide 45

Slide 45

Testen

Slide 46

Slide 46

Zoomen Ctrl + + Naming en shaming

Slide 47

Slide 47

Slide 48

Slide 48

Tab-toets Voor mensen die geen muis kunnen besturen Motorische beperking

Slide 49

Slide 49

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

Slide 50

Slide 50

Geen skip links

Slide 51

Slide 51

In Firefox Begint bij 3? Goed gedaan mensen

Slide 52

Slide 52

Firefox a11y tools + Chrome Lighthouse Goed in: Labels Contrast

Slide 53

Slide 53

Contrast Slechtzienden, Beamer, zonlicht

Slide 54

Slide 54

Voiceover Voor MacOS gebruikers Moeilijk Doe de tutorial! Kost je een uurtje.

Slide 55

Slide 55

Automatiseren? Kan je automatiseren? Wel: contrast, labels, alt-attributes Alles met divs en spans Hebben geen betekenis

Slide 56

Slide 56

Handmatig testen fi Voorbeelden In 5 minuten gevonden, in 5 minuten xen Audit door stichting drempelvrij gebeurt ook met de hand

Slide 57

Slide 57

Awareness In je team

Slide 58

Slide 58

Voorkomen Wat je wil doen Doe je met…

Slide 59

Slide 59

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

Slide 60

Slide 60

Samenwerken Met je team Geen reden om het niet te doen

Slide 61

Slide 61

Meer weten?

Slide 62

Slide 62

Inclusive Components Heydon Pickering Als boek op kantoor in Den Bosch, e-book

Slide 63

Slide 63

Form Design Patterns Adam Silver Boek en e-book

Slide 64

Slide 64

adrianroselli.com a11yproject.com Slack: #accessibility Er is veel Artikelen over complexe UI Wij, op Slack Stel je vragen

Slide 65

Slide 65

Dank! #accessiblity