Ga naar ischagast.nl

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.

📎 Download I Care slides (PDF, 26.6 MB)

Transcript van presentatie

  1. Beyoncé zingt I Care. Gif.
    01: I Care
  2. Ischa Gast illustratie.
    02: Ischa Gast // Front-end developer Schiphol Group.

    Ik ben Ischa Gast, Front-end developer bij Schiphol Group en heb een grote passie voor toegankelijkheid.

  3. Stap voor stap de trap op.
    03: Stap voor stap.

    Schiphol
    
Stap voor stap naar een toegankelijke site

    Hoe hebben wij dat gedaan?

  4. Nieuw!
    04: Nieuw!

    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).

  5. Screenshot Schiphol website van toen hij werd gelanceerd op 12 december 2016.
    05: Screenshot Schiphol website.

    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.

  6. Sorry in gebarentaal door Sign with Robert. Gif.
    06: Sorry.

    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.

  7. Huh? Gif.
    07: Huh?

    Huh? Wat is er daarna dan allemaal veranderd?

  8. Gekke Gast.
    08: Gekke Gast.

    Eigenlijk alles wat je nodig hebt is 1 Gekke Gast.

    Eind 2016 heeft deze Gast zijn…

  9. Donald Duck met een kloppend hart vol liefde. Gif.
    09: 100% hebben een beperking. Althans een deel van hun leven…

    …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!

  10. Contrastprobleem marktplaats.
    10: Marktplaats.

    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.

  11. Contrastprobleem YouTube.
    11: YouTube.

    Zelfs bij bedrijven als YouTube kan dat zelfs beter en zoals jullie net zagen ook bij onze eigen Schiphol website.

  12. Atletiekbaan met tekst Persoonlijke doelen.
    12: Persoonlijke doelen.

    Omdat ik mij meer wilde richten op toegankelijkheid heb ik voor mijzelf wat persoonlijke doelen opgesteld.

  13. Foto genomen op Schiphol met tekst Meest toegankelijke airport website maken van de wereld.
    13: Meest toegankelijke airport website maken van de wereld.

    Ik wil namelijk de meest toegankelijke airport website maken van de wereld en…

  14. Zwart paarse lucht met tekst Het geven van
een niet saaie presentatie over toegankelijkheid.
    14: Het geven van
een niet saaie presentatie over toegankelijkheid.

    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.

  15. Daniel Cormier is klaar voor zijn gevecht. Gif.
    15: Let’s Go!

    Dus ik dacht “Let’s go”. Dit is mijn passie, hier moet ik voor gaan.

    Dit wordt MIJN jaar wat betreft toegankelijkheid.

  16. Certificaat Web Accessibility Specialist Deque.
    16: Deque

    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.

  17. Axe core test pagina Schiphol.nl. Gif.
    17: aXe Core.

    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.

  18. HTML code die laat zien dat Usabilla een alt tag mist.
    18: Usabilla.

    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.

  19. Voorbeelden zwart en witte tekst op lichtblauw, lichtgroen en oranje.
    19: Afbeeldingen moeten alternatieve tekst hebben.

    Ik heb goede hoop dat het binnenkort opgelost is en dat ik niet meer een scherm vol heb met “Afbeeldingen moeten alternatieve tekst hebben”.

  20. Fragment uit film Forrest Gump. Run Forrest Run! Gif.
    20: Snel oplossen.

    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.

  21. Screenshot Schiphol.nl met Skip links in beeld.
    21: Skip Links.

    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.

  22. Stukje HTML code lees meer knop.
    22: Lees meer knoppen.

    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.

  23. Voorbeeld focus style Schiphol website.
    23: Focus styles.

    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.

  24. Colour Contrast Analyser.
    24: Kleur contrast.

    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.

  25. Obama die de microfoon laat vallen. Gif.
    25: Definition Of Done.

    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.

  26. Posters van GOV.uk.
    26: Juichende mexicaanse voetbaltrainer.

    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.

  27. Ik geef een praatje over toegankelijkheid.
    27: Praatje.

    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.

  28. Tom Hessels laat zien hoe iemand met een visuele beperking door de site heen gaat.
    28: Plaatje.

    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…

  29. Vrouw zwaait met shirt die Doe het roept. Gif.
    29: Doe het!

    …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.

  30. Man in auto doet twee duimen in de lucht. Gif.
    30: Thanks!

    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?

  31. Verwarde John Travolta uit de film Pulp Fiction. Gif.
    31: Gebruikerstest.

    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!

  32. Neil Patrick Harris schudt blaadjes recht.
    32: Budget.

    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.

  33. Website accessibility.nl
    33: Accessibility.nl

    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.

  34. Skelet uit de film Coco bij wie zijn kaak naar beneden valt.
    34: Woooow!

    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.

  35. Work harder.
    35: Verbeterpunten uit de gebruikerstest.

    Uit de gebruikerstest kwam ook een aantal verbeterpunten zoals…

  36. Fragment uit anti pestreclame van Burger King. YouTube.
    36: Video transcriptie.

    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.

  37. Voorbeeld document outline Schiphol website pagina bagageregels.
    37: Koppen structuur.

    Op sommige plaatsen klopte de structuur van de titels niet helemaal.

  38. Hamer. Gif.
    38: Aria-expanded.

    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.

  39. Schiphol hoofdgebouw.
    39: Op locatie.

    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.

  40. Ik heb het nog nooit zo goed gezien als ik ergens voor het eerst op locatie kom.
    40: Quote Brian Bors.

    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.

  41. Karl Gorves tijdens Beyond Tellerrand
    41: Karl Groves laat de Schiphol website zien tijdens presentatie.

    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.

  42. You can do it!
    42: You can do it!

    Ik hoop dat veel meer bedrijven dit voorbeeld zullen volgen want…

  43. YouTuber Molly Burke.
    43: Molly Burke.

    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.

  44. Gebruik correcte HTML.
    44: Gebruik correcte HTML.

    En met hele simpele dingen kom je eigenlijk al best een heel eind.

    Daarom nog even een korte samenvatting.

    Gebruik standaard HTML.

  45. 45: Goede koppen structuur.

    Goede koppen structuur.

  46. 46: Juiste contrast ratio.

    Juiste contrast ratio.

  47. 47: Verwijder geen focus styles.

    Verwijder geen focus styles.

  48. Patrick (Spongebob squarepants) met allemaal hartjes.
    48: Liefde.

    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.

  49. Beyoncé geeft een handkus.
    49: Thank you!

    En zo proberen wij stap voor stap een toegankelijke website voor Schiphol te maken.

    Thank you!

  50. Beyoncé geeft een handkus.
    50: Overzicht persoonlijke linkjes.