Huts

Transcript van presentatie

2. Hi, ik ben Ischa Gast, front-end developer bij Schiphol en werk hier nu iets meer dan 3 jaar.

3. En in die 3 jaar tijd heb ik mijn liefde voor toegankelijkheid weer helemaal terug gevonden.

   Dingen toegankelijk maken voor iedereen is ook gewoon super vet!

4. Dit is de song Happy van Pharrel Williams maar dan in gebarentaal.

5. En naast dat het supervet is, is het ook gewoon nodig.

   Laatst was er een onderzoek van WebAIM waarbij ze de top 1.000.000 homepages hebben getest en gemiddeld waren er 59.6 errors per pagina.

   Daar wordt ik toch wel een beetje verdrietig van 😢.

6. Zijn we vergeten dat Tim Berners-Lee het internet heeft bedacht voor iedereen en dan ook écht iedereen.

7. Problemen met toegankelijkheid vind je niet alleen digitaal.

   Ik sprak een keer iemand die slechtziend is en die vertelde dat hij wel eens met de metro ergens heen moest maar dat er soms een speaker voor het omroepen van de volgende halte stuk is. Dan ben je mooi de pineut. Daardoor komt het wel eens voor dat hij op een hele andere halte is uitgestapt dan dat de bedoeling is.

   Dit doen wij dus ook op het web. Hoe irritant is dat?

8. En dan hoor ik wel eens mensen zeggen “Ah joh dat is een edge case”

   • Die ene procent van de mensen die blind is.
   • Hoeveel mensen gebruiken er nu een keyboard om te browsen

   Maar wanneer je iets een 'edge case' noemt, definieer je eigenlijk alleen de grenzen van waar je om geeft.

9. Maar wie van jullie kan mij vertellen hoeveel mensen er daadwerkelijk een beperking hebben?

10. 100% hebben een beperking. Althans een deel van hun leven…

11. Visuele beperking: Sterke zonneschijn maakt het moeilijk om de dingen op het scherm te zien als je staat te pinnen

12. Motorische beperking: Ben je met je vrienden een stukje aan het rijden dan is het door het bouncen het bedienen van je telefoon een stuk lastiger.

13. Auditieve beperking: Een luide omgeving maakt het lastig om dat YouTube filmpje te volgen. Wat zou het dan toch handig zijn als dat filmpje bijvoorbeeld subtitles heeft

14. Cognitieve beperking: Heb je weer iets te diep in het glaasje gekeken, probeer dan nog maar eens je telefoon te gebruiken. Dat gaat allemaal niet meer zo makkelijk.

15. Cognitieve beperking: Hier proberen ze een taak uit te voeren op een mobiele site zonder de ballon te laten vallen! Op deze manier proberen ze een cognitieve beperking zoals ADHD of Autisme na te bootsen. Zoveel afleiding!

16. Stress: Als je moe of gestressed bent is er een gebrek aan focus

17. En als je ouder wordt dan geldt al het vorige.

    De komende jaren zullen er waarschijnlijk alleen maar meer mensen met een beperking bij komen aangezien de bevolking in rap tempo ouder aan het worden is.

    Tussen 2015 en 2050 zal het aandeel van de wereldbevolking dat ouder is dan 60 jaar bijna verdubbelen van 12% naar 22%.

18. Een groot deel van het probleem is denk ik niet dat mensen het niet toegankelijk willen maken maar vooral de onwetendheid en soms slipt er gewoon wel eens wat doorheen en dat gebeurt niet alleen bij kleine sites maar ook bij grote sites zoals YouTube.

    Vorig jaar gooide YouTube de nieuwe site online en overal werd #FF0000 gebruikt. Laat dat nu net een kleur zijn die niet door de contrast test komt.

19. Kleur contrast is wat dat betreft best een lastig dingetje. Inmiddels zijn mijn ogen zo getraind dat ik redelijk snel kan zien of een kleur wel of niet door de check heen komt maar het blijft lastig.

20. Kleuren die vaak problemen geven zijn bijvoorbeeld groen/oranje/lichtblauw in combinatie met wit. Ik snap dat witte tekst op deze kleuren er vaak net iets lekkerder uit ziet maar het werkt helaas niet.

21. Awwwards notabene een hele bekende design website gebruikt licht groene tekst op een witte achtergrond in zowel knoppen als tekst.

22. Studio Sport heeft een hele nieuwe stijl gekregen laatst en de naam van Fortuna Sittard, witte tekst op gele achtergrond, is zo goed als niet te lezen. De eerste keer dat ik het zag moest ik echt heel goed kijken wat er nu precies stond.

23. Bunq, die ik al een aantal keren een bericht heb gestuurd heeft nog steeds witte tekst op groene achtergrond + witte tekst buttons op oranje achtergrond. Dat terwijl de oranje knoppen hele belangrijke buttons zijn want dat is de knop waarmee je je kan aanmelden bij Bunq.

24. Ook het GVB gebruikt witte tekst op oranje een achtergrond en witte tekst op een blauwe achtergrond door de hele site. Qua contrast is dat niet voldoende helaas.

25. Het mooie aan dit Starbucks voorbeeld is dat ze dus niet alleen digitaal deze witte tekst op een gele achtergrond hebben maar ze hebben ook real life borden ervan. Nu loop ik iedere dag langs de Starbucks hier op Schiphol en de eerste keer toen ik dat bord zag moest ik echt even 10 keer kijken wat er nu op het bord stond. Het is gewoon letterlijk NIET te lezen.

26. Er zijn gelukkig ook sites waarbij het wel goed gaat zoals gov.uk.

    Dat is misschien wel mijn meest favo site ever ❤️

    Het is misschien niet een site waar veel designers helemaal wild van worden ondanks dat het een belangrijke design prijs heeft gewonnen in 2013.

    Maar ga die site vooral bekijken en ook alle info die ze online hebben gezet over het proces, de code voorbeelden en zoveel meer. Het is écht een 💍 wat dat betreft.

27. Maar naast contrast, welke dingen doe ik nog meer om sites zo toegankelijk mogelijk te maken?

28. Met hele simpele dingen kom je eigenlijk al best een heel eind.

    Bij standaard HTML krijg je de toegankelijkheid er helemaal GRATIS en voor niets bij.

29. Gebruik een goede koppen structuur. Iemand die gebruik maakt van een screenreader gebruikt de koppen namelijk vaak als navigatie.

30. Ik gebruik daarvoor altijd webdeloper toolbar om dat te bekijken.

    Klik op tandwiel developer toolbar > Information > Document Outline

    Dan zie je een pagina zoals hier en dat moet er dan logisch uit zien, net als een boek. Als je missende headings tegen komt dan is er nog iets te verbeteren.

31. Voor developers is het bijvoorbeeld heel makkelijk om focus styles toe te voegen wanneer je ook de hover toevoegd.

32. Het probleem van de [Lees meer] knoppen kan je eigenlijk heel simpel oplossen door een hidden tekst toe te voegen die alleen zichtbaar is voor screenreaders. Maar nog beter is om helemaal geen lees meer links te hebben, dat is voor iedereen beter.


33. Ook bijvoorbeeld een actieve menuknop, daar kan je ook gewoon een span die je visueel verbergt erin zetten met bijvoorbeeld "Huidige pagina".

    Een screenreader gebruiker die hoort dan gewoon "De huidige pagina is bladibladibla".

34. Zelf gebruik ik heel wat handige tools om bepaalde dingen qua toegankelijkheid te checken. Hier zal ik een paar van mijn favoriete tools met jullie delen.

35. Dit is denk ik wel mijn meest favoriete tool en die gebruik ik bijna iedere dag wel een keertje. Snel het contrast checken van twee kleuren is gewoon super makkelijk.

36. Een andere tool die ook heel handig is om contrast te checken is accessible-colors.com. Heel handig bij deze tool is dat wanneer het contrast niet goed genoeg is je ook gelijk een kleur suggestie krijgt van een combinatie die wel voldoet.

37. Met Funkify kan je allemaal beperkingen simuleren. Zo heb je bijvoorbeeld Hyperactieve Henny waarbij je echt overladen wordt met allemaal afleiding.

    Of je kan Oma Ellen kiezen en dan kan je zien hoe een website eruit ziet voor een ouder persoon.

38. Wil je snel zien of een pagina klopt qua toegankelijkheid dan kan je daarvoor aXe heel makkelijk gebruiken.

39. a11y cast van Rob Dodson zijn allemaal hele korte filmpjes van 7 minuten ongeveer over toegankelijkheid.

    Heb je even niets te doen dan is dit zeker een aanrader.

40. Als we met z’n allen nu gewoon naar Stevie Wonder luisteren.

    Toegankelijkheid verbetert namelijk het leven van mensen en het is mooi om iets goeds te doen voor een ander. Toegankelijke websites maken het mogelijk voor een blind persoon om zelfstandig boodschappen te doen, het nieuws te lezen en veilig te bankieren.

41. Voor Sven is het nu zelfs mogelijk om gewoon een potje te gamen. En Sven gamed niet alleen, Sven is een baas!

42. Do it! Do it! Maak het web toegankelijker en niet alleen mensen met een beperking zullen hier voordeel uit halen maar IEDEREEN!

43. Wees gewoon een beetje lief voor elkaar en sluit geen mensen uit. Denk maar eens terug aan de laatste keer dat je zelf werd buiten gesloten.

44. Dank jullie wel!