I Care
Schiphol: stap voor stap naar een toegankelijke site
De website van Schiphol heeft duizenden pagina’s. En toch is het gelukt om toegankelijkheid stap voor stap goed te verankeren. Ischa Gast begeleidt het project en vertelt in deze presentatie hoe hij en zijn collega’s dat voor elkaar krijgen.
Transcript van presentatie
-
Ik ben Ischa Gast, Front-end developer bij Schiphol Group en heb een grote passie voor toegankelijkheid.
-
Schiphol
Stap voor stap naar een toegankelijke siteHoe hebben wij dat gedaan?
-
Eind 2015 ben ik begonnen bij Schiphol en eigenlijk alles was nieuw.
- Nieuwe afdeling
- Nieuwe teams
- Nieuw ontwerp
- Nieuwe werkwijze namelijk Agile
Maar er moest wel een hele nieuwe site staan binnen een jaar (eind 2016).
-
En die stond er maar zoals jullie misschien kunnen zien was deze site zeker niet helemaal toegankelijk.
Er zit 1 heel duidelijk toegankelijkheid probleem op deze pagina en dat is het contrast van de witte tekst en de gele achtergrond.
Laat contrast nu net zo’n ding zijn wat er vaak doorheen glipt en zo ook bij ons.
-
Sorry, toegankelijkheid was toen nog geen échte prioriteit zoals dat het nu is.
We hebben een jaar lang keihard gewerkt om een redelijk goede website live te krijgen die zo toegankelijk mogelijk was met de kennis die toen in huis was.
-
Huh? Wat is er daarna dan allemaal veranderd?
-
Eigenlijk alles wat je nodig hebt is 1 Gekke Gast.
Eind 2016 heeft deze Gast zijn…
-
…liefde voor toegankelijkheid weer terug gevonden.
Ik heb toegankelijkheid eigenlijk altijd leuk gevonden maar het probleem was toch dat heel vaak toegankelijkheid toch een beetje een ondergeschoven kindje was en hetgeen wat het eerste werd geschrapt in projecten.
Bij Schiphol is dat echter anders, ik had het gevoel dat als ik iets interessant vond om te doen of ontdekken dat ik dat dan ook naar mij toe kon trekken. Die vrijheid is er en dat is superfijn!
-
Ben toen ook weer begonnen met het tweeten van toegankelijkheid tips. Vaak gaan deze tweets over contrast problemen en contrast is gewoon best een groot probleem en iets wat vaak beter kan.
-
Zelfs bij bedrijven als YouTube kan dat zelfs beter en zoals jullie net zagen ook bij onze eigen Schiphol website.
-
Omdat ik mij meer wilde richten op toegankelijkheid heb ik voor mijzelf wat persoonlijke doelen opgesteld.
-
Ik wil namelijk de meest toegankelijke airport website maken van de wereld en…
-
Het geven van een niet saaie presentatie over toegankelijkheid is mijn andere belangrijke doel.
Er zijn namelijk zo vaak praatjes over toegankelijkheid die ik persoonlijk heel saai vind en dat moet toch beter kunnen.
-
Dus ik dacht “Let’s go”. Dit is mijn passie, hier moet ik voor gaan.
Dit wordt MIJN jaar wat betreft toegankelijkheid.
-
Wat ik als eerste ben gaan doen is mijn kennis wat betreft toegankelijkheid vergroten door een cursus te doen bij Deque.
In het verleden heb ik al eens een cursus bouwen volgens de richtlijnen van accessibility.nl gedaan dus nu was het tijd om eens wat anders te proberen.
-
Ondertussen begon ik ook met het testen van de 80% meest bezochte pagina’s met aXe Core en dit allemaal met de hand pagina voor pagina.
Dat was eigenlijk niet te doen en toen heeft Wesley van der Korput een tool voor mij gemaakt zodat ik dit allemaal niet meer met de hand hoefde te doen maar gewoon in 1 keer de hele site kon testen.
Dat scheelde een hoop werk en nu draai ik deze test ongeveer 1 keer per maand.
-
Het jammere was alleen dat in mijn rapport iedere keer het missende alt attribute terug kwam van Usabilla waardoor mijn rapport vooral bestond uit problemen die van een externe resource komen.
Gelukkig heb ik uit betrouwbare bron vernomen dat er op dit moment iets aan gedaan wordt.
-
Ik heb goede hoop dat het binnenkort opgelost is en dat ik niet meer een scherm vol heb met “Afbeeldingen moeten alternatieve tekst hebben”.
-
Vond ik problemen en kon ik deze heel makkelijk oplossen dan deed ik dat even snel tussendoor. Waren het echter iets grotere dingen dan gaf ik deze gewoon door aan mijn Product Owner.
Na een paar maanden waren alle bevindingen die aXe core kon vinden nagenoeg allemaal opgelost maar dat maakt je website niet gelijk helemaal toegankelijk maar je bent wel op de goede weg.
-
Skip links had ik er bijvoorbeeld in gezet en dat is niet echt een heel zichtbaar iets. Todat opeens een tester naar mij toe kwam met de vraag “Weet jij wat dit is?”
Dat wist ik heel goed want die had ik er namelijk ingezet en dat zijn eigenlijk de leukste dingen. Als iemand er opeens achter komt hoe handig iets kan zijn.
-
Om de lees meer knoppen voor iedereen leesbaar te maken hebben wij op sommige plekken een hidden tekst toegevoegd zodat voor mensen met een screenreader de link ook beschrijvend is.
-
Voor developers is het heel makkelijk om een focus style toe te voegen door waar je de hover toevoegd ook gelijk de focus stijl te definieren.
-
Kleurcontrast aangepast waar het nodig was.
Soms niet helemaal tot tevredenheid van designers maar vonden ze het niet mooi dan werd er gewoon samen gekeken naar een goed alternatief waar iedereen blij van werd.
-
En toegankelijkheid heeft een plekje gekregen op de Definition Of Done.
Een story is pas echt af als alle punten die op de Definition Of Done afgevinkt zijn en daar hoort toegankelijkheid nu ook bij.
-
Naast het snel oplossen van problemen begon ik mijn hele afdeling vol te plakken met dit soort posters, gewoon om meer bewustzijn te creëren.
Als je er langs loopt of je ziet mij ze ophangen en dan ga je toch even kijken wat er op staat. Dat is nu precies de bedoeling.
Na een paar maanden vallen die posters alleen ook niet meer zo op en dan moet je weer iets nieuws bedenken.
-
Het werd daarom tijd voor mijn andere doel namelijk het geven van een niet saai presentatie over toegankelijkheid. Dat is volgens mij goed gelukt.
Begon met allemaal met een Front-end meetup van Fronteers waar ook al onze eigen front-enders aanwezig waren.
Zo die heb ik nu in ieder geval besmet met toegankelijkheid.
Daarna heb ik mijn praatje nog eens gehouden voor onze UX’ers/designers en allemaal testers bij Schiphol.
Dat gaat lekker!
Heel de afdeling weet nu in ieder geval iets over toegankelijkheid en weet mij inmiddels te vinden voor eventuele vragen.
-
Met een leuk praatje ben je er alleen nog niet.
Als je kinderen leert voetballen dan begin je ook met een praatje, dan doe je het voor en dan gaan ze het zelf doen.
Dat schijnt het beste te werken en dat heb ik hier ook geprobeerd.
Ik doe het praatje, Tom Hessels laat zien hoe iemand met een visuele beperking door een site navigeert en…
-
…Daarna hoop je dat ze het ook gaan toepassen en dat dan ook daadwerkelijk onze site beter toegankelijk wordt.
Achteraf kan ik zeggen dat dit zeker heeft gewerkt om meer bewustzijn te creeëren.
-
Ik wil trouwens nog een shoutout doen naar Brian Bors van accessibility.nl & Tom Hessels.
Ze hebben mij echt onwijs geholpen om het hele plaatje compleet te maken waardoor mensen hun ogen écht werden geopend.
Super bedankt hiervoor!
Alles wat ik zelf kan doen heb ik nu ongeveer wel gehad denk ik, maar wat nu?
-
Een gebruikerstest, dat zou ik nog heel erg graag willen doen, maar bij wie moet je dan zijn?
Dat is niet iets wat je zelf zeg maar kan regelen allemaal. Ik dus vragen bij mijn Product owner hoe wij dat eventueel konden regelen en die verwees mij door naar Reinier Ladan.
We hadden gewoon een Product Owner toegankelijkheid, dat wist ik helemaal niet. Bij Reinier nog maar eens aangegeven dat ik graag een gebruikerstest zou willen doen en wat blijkt nu, daar was hij al mee bezig. Supervet!
-
Reinier regelt dat allemaal gelukkig met de juiste mensen binnen Schiphol. Is er budget voor ja of nee etc… daar hoef ik zelf allemaal niet achteraan.
Gelukkig is er vooraf al goed rekening gehouden met dit soort belangrijke testen.
-
Een paar maanden later was deze gebruikerstest bij accessibility.nl.
Een groep mensen met een visuele beperking ging onze site en app ging testen op verschillende devices zoals mobiel, tablet & screenreader.
-
Nu heb ik best al een aantal keer iemand met een visuele beperking door een website zien gaan maar iedere keer is het wéér een eye opener.
Het mooie aan deze gebruikerstest was dan ook dat meerdere mensen van onze afdeling bij deze test aanwezig konden zijn.
Als je dan eenmaal gezien hebt hoe het écht werkt voor iemand met een beperking dan pas ga je écht een beetje beseffen dat je een website gewoon moet maken zodat iedereen hem kan gebruiken.
Dat was nu ook weer het geval.
-
Uit de gebruikerstest kwam ook een aantal verbeterpunten zoals…
-
Bij het plaatsen van YouTube video’s is het vooral belangrijk dat de informatie in de video ook op een andere manier beschikbaar is door bijvoorbeeld het aanbieden van transcripties en ondertiteling.
-
Op sommige plaatsen klopte de structuur van de titels niet helemaal.
-
Het uitklappen van de navigatie en enkele andere componenten was niet helemaal correct qua HTML.
In de tussentijd hebben wij een hoop van deze bevindingen opgelost en proberen wij steeds meer dingen te verbeteren.
-
Een aantal maanden na de gebruikerstest kwam Brian van accessibility.nl iedere week een dag langs bij Schiphol bij de verschillende teams die aan de website en app werkten.
Dit is echt super waardevol!
Ze zeggen dat vreemde ogen dwingen en dat is ook echt zo. Ik kan dingen zeggen maar als een expert van buitenaf dingen komt vertellen dan worden dingen gewoon sneller aangenomen.
Daar heb ik nu nog profijt van en daarnaast is het gewoon super om te zien hoe iedereen écht de informatie van Brian wilt hebben.
Als ik daarom 1 ding onwijs kan aanraden is het wel het op locatie laten komen van een expert van accessibility.nl.
-
Dat wij al aardig op weg waren werd ook wel duidelijk toen Brian vertelde dat hij het nog nooit zo goed gezien als hij ergens voor het eerst op locatie kwam.
-
Afgelopen week werd dat ook nog eens duidelijk toen op een groot congres in Düsseldorf Duitsland Karl Groves van Tenon onze website zien als een goed voorbeeld van toegankelijkheid.
Dat ons harde werken nu ook internationaal gezien wordt is natuurlijk alleen maar supermooi en een ongelooflijk mooi compliment voor alle goede mensen die hebben gewerkt aan de nieuwe site van Schiphol.
-
Ik hoop dat veel meer bedrijven dit voorbeeld zullen volgen want…
-
Zoals Molly Burke, een YouTube met een visuale berperking laatst zei
Ik denk niet dat ik gerepareerd moet worden. Ik denk dat de rest van de wereld moet worden gerepareerd omdat de realiteit is dat blindheid nooit als een handicap zou worden beschouwd als de wereld voor mij toegankelijk werd gemaakt.
-
En met hele simpele dingen kom je eigenlijk al best een heel eind.
Daarom nog even een korte samenvatting.
Gebruik standaard HTML.
-
Goede koppen structuur.
-
Juiste contrast ratio.
-
Verwijder geen focus styles.
-
Iets wat ook onwijs kan helpen is om iemand aan te nemen of in te huren met liefde voor toegankelijkheid om het niveau naar het volgende niveau te brengen.
Ik zit op een Fronteers slack en er zijn best wat goede mensen te vinden maar die zijn misschien niet altijd even zichtbaar.
-
En zo proberen wij stap voor stap een toegankelijke website voor Schiphol te maken.
Thank you!
-
- Twitter:
- @ischagast
- Website:
- ischagast.nl
- Presentatie:
- https://ischagast.nl/presentatie/i-care