Toegankelijk bouwen

Image of slide number 1

Zo! Hopelijk hebben jullie het nog leuk met elkaar vanavond. Het is tijd voor het derde deel van de avond, en we gaan het hebben over toegankelijk bouwen. Ik ben Hidde de Vries.

Image of slide number 2

Dit is mijn website! Ik heb daar onder andere een blog, met posts over bijvoorbeeld HTML, CSS en JavaScript! Kom dat lezen als je dat interessant vindt. Ik ben freelance front-end ontwikkelaar.

Image of slide number 3

Ik ben dit jaar onder andere bezig met front-ends voor Wigo4IT, da's een coöperatie van de vier grootste Nederlandse gemeenten, en voor het ministerie van Binnenlandse Zaken. Het gaat om websites die door iedereen betaald worden, en daar is het meer dan logisch dat hun websites voor iedereen werken.

Image of slide number 4

Ok… toegankelijk bouwen!

Image of slide number 5

We duiken straks de praktijk in, maar eerst wil ik nog even naar wat achtergrond kijken. Front-end code, en daarmee het bouwen van de voorkant van websites, bestaat in feite uit drie webstandaarden.

Image of slide number 6

HTML, CSS en JavaScript. Om te zorgen dat we allemaal in dezelfde film zitten, wil ik kort laten zien waar die standaarden voor zijn.

Image of slide number 7

Met HTML kun je beschrijven wat dingen zijn, met CSS beschrijf je hoe dingen eruit zien en met JavaScript kun je van alles veranderen in de pagina: je kunt dingen weghalen, tonen, data verversen en nog heel veel meer.

Image of slide number 8

Als we het hebben over webstandaarden, hebben we het zeker ook over Tim Berners-Lee, hier afgebeeld. En hij staat bekend als eén van de uitvinders van het internet. Ik wil jullie even meenemen naar 2012. Tijdens de openingsceremonie van de Olympische Spelen in London lieten ze allerlei “Britse” dingen zien, projecten waar Britten aan hadden gewerkt. Berners-Lee was dus ook gevraagd.

Hij liet vier woorden verschijnen.

Image of slide number 9

This is for everyone, dit is voor iedereen. Ik vond dit een heel mooi moment. Dit is voor iedereen, wat een mooie tekst. Je kunt dat op meerdere manieren zien: iedereen mag een website maken, je hoeft geen toestemming van de overheid te vragen of ingewikkelde formulieren in te vullen. Iedereen mag ook het internet op, zonder abonnementsgeld. Maar wat er ook uit spreekt: het werkt voor iedereen. Het is toegankelijk voor iedereen. Dat zie je terug in webstandaarden zoals de 3 talen die ik net noemde, HTML, CSS en JavaScript. Toegankelijkheid zit daarin ingebouwd. Jeroen noemde het al: die eerste iteratie van HTML bevatte al een stuk of 20 elementen waar toegankelijkheid al zat ingebouwd.

Image of slide number 10

“This is for everyone” zit dus eigenlijk gewoon ingebouwd in webstandaarden.

Image of slide number 11

En daarmee dus ook toegankelijkheid. Dit is waarom ik vind dat het web toegankelijk is _by default_.

Image of slide number 12

Hoe werkt dat in de praktijk?

Image of slide number 13

Een belangrijke reden waarom ik zeg dat het web toegankelijk is _by default_ is dat het web voor een groot deel tekst is.

Image of slide number 14

Tekst is fantastisch. Het heeft allerlei voordelen. Je kunt het selecteren en kopiëren, je kunt het vergroten met knopjes in je browser, appeltje-plus en je kunt het in een ander font zetten… als je Safari gebruikt kun je Reader mode gebruiken. Dat kan allemaal niet met plaatjes.

Image of slide number 15

Zie hier een voorbeeld van een artikel op de NOS website.

Image of slide number 16

Als de tekst te klein voor me is (en voor sommige mensen met slecht zicht kan dat zo zijn), kan ik inzoomen met m’n browser. Hier hoeft de maker van de site niks voor te doen, deze feature zit ingebouwd in het web.

Image of slide number 17

Ik kan ook de tekst in m'n favoriete lettertype weergeven. Niet helemaal een grapje: sommige mensen met dyslexie gebruiken een speciaal dyslexie-lettertype. Die kunnen dus tegen hun browser zeggen: ik wil elke site in dit lettertype.

Handige dingen die je met handmatige aanpassingen kunt doen voor meer toegankelijkheid.

Image of slide number 18

Je kunt met tekst ook dingen doen die toegankelijkheid _automatisch_ bevorderen.

Image of slide number 19

Sommige mensen die blind zijn gebruiken een braille-regel. Tekst op hun scherm wordt omgezet naar braille. Of mensen laten hun tekst voorlezen door een screenreader. Of misschien wil je iets bestellen in Duitsland of China en gebruik je Google Translate om tekst automatisch om te zetten. Of je wilt een zoekmachine gebruiken die snapt wat er op websites staat.

Image of slide number 20

Een kennis van me uit Engeland, vertelde dat ze altijd iemand moet meenemen als ze naar een supermarkt wil. Ze is namelijk blind en kan zelf de producten niet zien, geen etiketten lezen, niet weten wat er in de aanbieding is. Waar ze dat wel kan, vertelde ze, is op de_website van een supermarkt_: daar is alles tekst en kan ze ineens wel zelfstandig boodschappen doen. Superhandig. Supermarktwebsites, mits goed gebouwd, kunnen worden voorgelezen.

Image of slide number 21

Dit is een schilderij van René Magritte. Hij wilde iets vertellen tussen de relatie tussen afbeeldingen en de werkelijkheid. Het punt van dit werk is dat kunst niet echt is, het is een afbeelding _van_ iets dat echt is.

Image of slide number 22

Je kunt deze geschilderde pijp, met andere woorden, niet roken, “It's just a representation!”

Image of slide number 23

Iets minder bekend, hij heeft er nog eentje gemaakt, voor z’n schoonzus. Wederom: dit is geen appel, het is een _afbeelding_ van een appel. Je kunt ‘m niet eten!

Image of slide number 24

Met dat in het achterhoofd, wat denken jullie dat hier mis mee is? Je ziet hier een tweet van een Volkskrant-columniste, met daarbij een screenshot van een stukje tekst.

Image of slide number 25

Precies, het is geen tekst, het is een afbeelding van tekst. En die is dus niet selecteerbaar, niet automatisch voorleesbaar, niet naar braille om te zetten.

Natuurlijk kunnen machines tegenwoordig vrij goed afbeeldingen naar tekst omzetten, maar hoewel die software bestaat, zit ie niet ingebouwd in de tools waar je gebruikers mee werken.

Image of slide number 26

Dus, tekst is handig, want automatisch breder toegankelijk te maken. Voorlezen, braille, met tekst kan het.

Er is nog een voordeel van het web. Het is niet zomaar tekst…

Image of slide number 27

…het is gestructureerde tekst. Met structuur kunnen we mensen nog beter helpen onze content te consumeren.

Image of slide number 28

Als je kunt zien en je kijkt naar dit artikel, kun je door de vormgeving een structuur zien: er is een grote kop, er zijn meerdere paragrafen en er is een link in één van de paragrafen.

Image of slide number 29

Dit is de platte tekst die achter dit artikel zit. Omdat we HTML hebben, kunnen we onderscheid maken tussen de verschillende dingen in deze tekst.

Image of slide number 30

Het bovenste stuk is een heading, er is een link naar de categorie, er zijn twee paragrafen, en binnen één van die paragrafen is er zelfs ook een link.

Dit is het onderscheid dat we maken met HTML.

Image of slide number 31

Met HTML kun je zeggen wat wat is.

Image of slide number 32

HTML heeft een hoop elementen ingebouwd die helpen een structuur vast te stellen.

Dit lijkt misschien allemaal heel logisch, maar soms gaat het mis. Vaak staat er content op het web waarbij we niet weten wat wat is, dus ik wilde het nog even noemen.

Image of slide number 33

Ik ga jullie een aantal tips geven. En we beginnen met TIP ÉÉN! Let op de structuur van je document. Ik noemde het net al: maak duidelijk wat wat is.

Image of slide number 34

Zorg dat de structuur logisch is.

Image of slide number 35

Een manier om dat te controleren is door gewoon CSS eens uit te zetten. Je haalt daarmee de ontworpen lay-out weg, maar als het goed is blijft er dan nog wel een structuur over.

Image of slide number 36

Een andere manier om een goede structuur te bevorderen… sla geen heading levels over. Dus na een h2 komt een h3, altijd. Je kunt niet ineens naar een h4 of h5 gaan, al is dat soms verleidelijk omdat je een kopje wilt dat er zo uit ziet als een h4 of h5.

Ik weet niet of iemand hier wel eens de automatische inhoudsopgave in Word heeft gebruikt? Dat is geniaal. Je kunt Word laten kijken naar je tussenkopjes en daar dan automatisch een inhoudsopgave van laten maken, met paginanummers. En als je iets aanpassen, passen die paginanummers zich ook aan. Handig.

Image of slide number 37

Wat Word dan eigenlijk doet is een outline van het document maken. Dat kan alleen maar als je kopjes op orde zijn. Het Engelse bureau Nomensa schreef een interessante blogpost over hoe headings voor een goede outline zorgen. “Think of headings as an outline of your webpage”.

Image of slide number 38

Een voorbeeld van waar outlines dan handig zijn: als je content _anders_ gebruikt wordt.

Image of slide number 39

Met screenreaders bijvoorbeeld, kun je een lijstje opvragen van alle headings op een pagina, om ‘m zo te navigeren. Misschien bekijk je een recept en wil je gelijk naar de Ingrediënten-sectie. Je wilt niet eerst de hele pagina laten voorlezen.

Dit is bv VoiceOver, zoals gebruikt op gov.uk. Je ziet voor de headers hun niveau staan. Dit gaat mis als je headers zou overslaan.

Image of slide number 40
Image of slide number 41

Het is belangrijk verder te kijken dan div en span. Deze tags zijn soms goed om te gebruiken, daar kom ik later op terug, maar vaak zijn er betere tags voorhanden. Gebruik de juiste elementen!

Image of slide number 42

Neem bijvoorbeeld een button. Kun je maken met een div, en vervolgens met CSS stylen en met JS gedrag toevoegen.

Image of slide number 43

Een span kan ook.

Maar er zijn elementen die veel geschikter zijn om dit soort elementen op te maken.

Image of slide number 44

Wie weet wat het verschil is tussen een en een

Image of slide number 45
Image of slide number 46
Image of slide number 47

Als je href leeg is, dan is het waarschijnlijk geen link, maar een button.

Image of slide number 48

Het handigste is om voor buttons het button element te gebruiken.

Image of slide number 49

Je krijgt dan ook van alles gratis:

tabben

werkt met toetsenbord

wordt goed voorgelezen

krijgt de juiste cursor

Image of slide number 50

Wie weet wat het verschil tussen deze twee is?

Image of slide number 51

Een caption is de titel van een tabel, een legend is een titel van een groep formuliervelden.

Gek eigenlijk dat dit andere elementen zijn, terwijl ze dezelfde rol hebben. Maar dat is nu eenmaal de standaard.

Image of slide number 52

In dit geval is de caption bv “Financiële resultaten 2017”.

Image of slide number 53

En hier is de legend “Persoonlijke gegevens”

Image of slide number 54

Weet iemand waar de i voor is? Dit is een lastige, want de betekenis hiervan is door de jaren ietsje veranderd.

Image of slide number 55

De i is een afwisseling in tone of voice, of geschikt voor technische termen. Dit element is niet voor icons. Bootstrap doet dat wel, en ik begrijp niet waarom, de enige reden die ik kan bedenken is dat het woord icon met een 'i' begint. Dat is niet goed genoeg.

Image of slide number 56

Gebruik een i bijvoorbeeld als je afwisselt in taal.

Image of slide number 57

Of voor terminologie in contracten, zoals in dit geval bij “hierna te noemen, de opdrachtnemer”.

Image of slide number 58

Dus, de goede HTML elementen gebruiken is de absolute basis van goede toegankelijkheid.

Ik schrijf zelf veel HTML, maar ook ik weet niet uit m’n hoofd waar alles voor is. Gelukkig is er documentatie! Check de spec: developers.whatwg.org. Je kunt daar zoeken op elementen, en krijgt naast wat technische informatie ook voorbeelden en uitleg over gebruik.

Deze spec is beter leesbaar dan reguliere specs, omdat die vaak informatie hebben speciaal voor browsermakers, en daardoor een stuk technischer zijn.

Image of slide number 59

Ik zei eerder dat je verder moet kijken dan divs en spans. Dat hoeft niet altijd. Soms heeft een ding in je pagina geen betekenis, gebruik dan _wel_ een div of een span. Die zijn specifiek bedoeld voor dingen die verder geen betekenis hebben. Mag dan zeker!

Image of slide number 60
Image of slide number 61

Om nog meer automatisch met tekst te doen, is het belangrijk dat je je taal specificeert. Dat doe je meestal op het buitenste element: de HTML tag.

Bijvoorbeeld handig voor Google Translate om te weten wat de brontaal is. Of voor voorleesapparatuur.

Image of slide number 62

Het kan ook zijn dat er binnen je document delen in een andere taal zijn, Chinees bijvoorbeeld.

Image of slide number 63

En als we nog even teruggaan naar Alex en Martina: het gebruik van een andere taal kun je ook mooi met zo'n lang attribuut aangeven!

Image of slide number 64

In moderne applicaties wordt nog al eens content verborgen, bijvoorbeeld om de interface duidelijker te maken. Als je goed oplet, is dat erg goed toegankelijk te doen.

Image of slide number 65

Ik maak altijd graag het onderscheid tussen visueel verbergen en echt verbergen.

Image of slide number 66

Als je visueel verbergt is iets onzichtbaar op het scherm, maar is het nog wel aanwezig en kan het bijvoorbeeld worden voorgelezen.

Image of slide number 67

Een voorbeeld: een modal met een sluitknop rechtsbovenin. Iemand die de knop niet kan zien, heeft voordeel van iets van een tekstje, bv “Sluiten”.

Image of slide number 68

Je kunt iets ook helemaal verbergen. Dan kan niemand het zien, èn het wordt niet voorgelezen.

Dit is vaak tijdelijk.

Image of slide number 69

Dit helptekstje bijvoorbeeld: dat is helemaal verborgen als het niet opengeklapt is.

Image of slide number 70

In CSS is dit het onderscheid: visueel verbergen doe je met bijvoorbeeld position:absolute, helemaal verbergen met display:none.

Wat veel mensen niet weten is dat er ook een hidden attribuut is: dat zet effectief je element op display:none, ik gebruik deze graag om met JavaScript zichtbaarheid te togglen.

Image of slide number 71

Je kunt met deze technieken toevoegen wat Johan Huijkman van Q42 ‘Hidden UX’ noemt: je voegt kleine, onzichtbare hints toe aan je interface. Extra context. Misschien overbodig voor mensen die de interface kunnen zien, maar essentieel voor mensen met een visuele beperking.

Image of slide number 72

Als je meer wilt weten over hoe screenreaders worden gebruikt, WebAIM heeft er informatie over. Ook in het algemeen een hele fijne bron.

Image of slide number 73

Tekst zorgt voor veel toegankelijkheid, maar er is natuurlijk ook genoeg webcontent die niet uit tekst bestaat.

Image of slide number 74

Peter noemde ze ook al: alt attributen! Als images niet decoratief zijn, voorzie ze van alt-attributen.

Image of slide number 75

Zorg voor transcripts, zodat mensen die je podcast of video-review niet kunnen horen, de tekst kunnen lezen. Ook handig voor mensen die willen zoeken of je het in je podcast over bijvoorbeeld pepernoten hebt gehad.

Bij video’s kun je ook ondertiteling toevoegen, dat zijn eigenlijk getimede transcripts. Zo is ie ook bruikbaar voor mensen die in de trein zonder koptelefoon zitten en niet de hele coupe willen vermoeien met het vlog dat ze gaan kijken.

Dit is een voorbeeld op de Fronteers-site: video's van ons congres hebben daar zowel een transcript als ondertiteling. En ze zijn aan elkaar gelinkt, je kunt op delen van het transcript klikken om naar het goede stuk van de video te springen.

Image of slide number 76
Image of slide number 77

Focus is handig als je zonder muis, met bv een toetsenbord, door een pagina moet en wil weten wat je op dat moment hebt geselecteerd. Het is het element met de blauwe gloed eromheen.

Die blauwe schaduw zorgt dat je weet waar je bent.

Image of slide number 78

Je kunt altijd het huidige element met focus checken, door te kijken wat er in `document.activeElement` zit.

Image of slide number 79

Soms is het nodig om je focus te verplaatsen met JavaScript,

Image of slide number 80

Dat kan met JavaScript, gebruik hiervoor de focus-methode.

Image of slide number 81

Let op, dit werkt alleen op zogenaamde “interactieve elementen”, zoals links, buttons en formuliervelden. Je kunt het ook op andere elementen voor elkaar krijgen met tabindex, maar gebruik dat met mate.

Image of slide number 82

In sommige gevallen is het belangrijk te zorgen dat de focus binnen één element blijft.

Image of slide number 83

Als je bijvoorbeeld iets hebt dat over je hele pagina komt te liggen, een “modal”, zorg dan dat de focus niet buiten die modal kan komen. Dat zou namelijk betekenen dat je naar dingen kunt springen in de achtergrond; dingen die dus op dit moment niet zichtbaar zijn.

Omwille van de tijd ga ik hier niet in op het hoe, maar als je dit wilt weten, tweet me, dan stuur ik een link.

Image of slide number 84

Iets anders waar je bij focus op moet letten: als je iets uit je pagina haalt dat focus had, of iets bevatte dat focus had, dan is het vaak het beste de focus te verplaatsen naar iets anders. Doe je dit niet, dan gaat je focus automatisch terug naar het begin van je element. En dat is een beetje als een klantenservice die je terug naar het eerste menu zet.

Image of slide number 85

In dit uitklapelement bijvoorbeeld: “Persoonlijke gegevens” staat open, en het veld met focus staat er binnen. Als je dit element inklapt, is er geen element met focus meer, en zou de gebruiker worden teruggestuurd naar de start van het document. Zorg dus dat je je focus verplaatst naar iets nuttigs.

Image of slide number 86

Mocht je meer willen weten over dit soort patronen, ik heb nog twee links voor jullie.

“Inclusive Components” is een blog waarop in elke post een component wordt gebouwd, met aandacht voor details die de toegankelijkheid bevorderen.

Image of slide number 87

Het W3C heeft ook een handige resource, de WAI ARIA Authoring Practices. Veel componentspecifieke informatie, en beschrijving van hoe je focus zich zou moeten verplaatsen, wat voor sneltoetsen gebruikelijk zijn, etc

Image of slide number 88

Dat waren mijn zes tips! We hebben gekeken naar hoe je je site toegankelijker kunt bouwen met dingen die in HTML, CSS en JavaScript zitten ingebouwd.

Image of slide number 89

Nog even een korte recap. Dit zijn de zes tips: heb een goede structuur, let op welke elementen je kiest, declareer je taal, let op bij verbergen van content, voeg alternatieve tekst toe en manage je focus.

Image of slide number 90

En dit is wat ik jullie heb willen meegeven: het web is voor iedereen. Gebruik webstandaarden goed.

Met dat, geef ik graag het woord nog even aan Jeroen.

Image of slide number 91

Made with Keynote Extractor.