Hoe UX en digitale toegankelijkheid de beste gebruikers ervaring creëren

Hallo allemaal, wekom bij de webinar Toegankelijk UX design. Het is 12 uur en tot 1 uur ga ik jullie meenemen in de wondere wereld van toegankelijk UX design. That's it. En we gaan gewoon lekker starten! Ik heb een mannetje of twintig nu erin zitten, maar er zullen er misschien nog wat meer bijkomen. We gaan het zien. Voor nu ga ik jullie gewoon lekker even een uurtje bijkletsen over toegankelijk UX design. En dat doe ik vandaag door gewoon een stukje uit onze officiële toegankelijke UX design training met jullie te delen. We gaan het over vanalles hebben, maar daarover zometeen nog iets meer. Allereerst is het misschien fijn als ik mij voorstel. Ik zie een hoop mensen die joined zijn die ik al ken, maar ook een hoop die ik niet ken, dus ik doe het toch maar even. Mijn naam is Joris. Ik ben de Learning en Development coördinator voor Cardan. Ik doe dus eigenlijk alles wat gaat over het overdragen van kennis op het gebied van digitale toegankelijkheid. Dat doe ik nu een jaartje of twee, zoiets. Ik ben 29 jaar, ik woon in Nijmegen en ik spendeer mijn tijd dus door het hele land door te reizen en andere mensen te helpen en teams te begeleiden met het digitaal toegankelijker maken van hun services. Afgelopen paar dagen hebben we al een paar leuke dingen besproken. We hebben het over digitaal toegankelijke content gehad. Gister heb ik een aantal van jullie meegenomen in de wondere wereld van het WCAG specialisme. Ik zie ook een paar ex / at the moment, volgende WCAG specialisten voorbijkomen in de deelnemerslijst, alleen maar hartstikke leuk, maar we gaan het gewoon vooral vandaag even hebben over UX design. Vandaag dus UX design. Nou, ik zou er de hele dag over kunnen praten. Dat ga ik niet doen. Ik moet het binnen een uurtje houden, dus ik ga dat zeker gewoon doen. Allereerst beginnen we vandaag even met een stukje inleiding. Daar ben ik dus nu mee bezig. Voor de mensen thuis. Vervolgens gaan we bezig met een stukje: de verhouding tussen de WCAG en UX design. Vervolgens gaan we bezig met persona's en gaan we dus echt kijken wat maakt iemand nou anders? Wat maakt de UX ervaring nou anders voor mensen met bepaalde functiebeperkingen? We gaan ons heel erg proberen in te leven in een drietal persona's van mensen. Iemand die voornamelijk het toetsenbord gebruikt. Iemand die voornamelijk met de zichtbare ervaring moeite heeft. Dus dan hebben we het bijvoorbeeld over kleurenblindheid. Vervolgens gaan we het hebben over de hoor en voelbare ervaring. Dat is voor mensen natuurlijk die het zicht missen. Die zullen het op een hoor en voelbare manier moeten doen. Vervolgens eindig ik even met een stukje borging van digitale toegankelijkheid, een vraag momentje en krijgen jullie allemaal een cadeautje van mij mee aan het einde. Dat gezegd hebbende, ik heb natuurlijk een flinke lijst onderwerpen. Nou, ik kan hier makkelijk 1 uur over doorkletsen, dat is geen enkel probleem. Het lijkt me ook hartstikke leuk als jullie thuis vragen stellen aan mij. Als je vragen hebt zie je in je meeting schermpje iets van Q&A staan. Dat betekent natuurlijk vraag en antwoord. Daar kun je vragen stellen. Let op je ziet de vraag van andere mensen niet, maar dat is oké, want ik zie ze wel. Dus ik lees dan de hele vraag voor en zal er ook gelijk antwoord op geven. Dus stel al je vragen tussendoor, dan denk ik dat we nog een nuttigere sessie kunnen hebben en dan krijg je ook echt je eigen vragen beantwoord. Aan het einde sluit ik ook nog even af met een vraag momentje. Dan kan je ze alsnog stellen, bijvoorbeeld vragen waar geen specifieke slide voor is geweest of geen haakje. Die kun je dan gewoon lekker stellen. Maar over het algemeen denk ik dat je die gewoon lekker tussendoor kan stellen. Maar weet dus dat dat kan en weet dus dat je de vraag van andere mensen niet kan zien, maar dat ik ze wel zie en ze helemaal voorlees. Verder krijgen we vaak de vraag: krijgen wij de presentatie hiervan te zien, dat niet. Wij sturen in principe de powerpoint niet op naar jullie. Wat we wel doen, is jullie onze checklist digitaal toegankelijk UX design opsturen. Dus dan heb je gewoon in principe alle informatie die we vandaag grotendeels besproken hebben. En we maken ook een digitaal toegankelijke versie van deze webinar, die je op elk moment natuurlijk later terug kan kijken. Let op dat het dus wel even duurt voordat je die van ons ontvangt. Ik praat nogal veel, dus je kan je voorstellen dat er veel ondertiteld moet worden, maar weet dus dat je in principe altijd gewoon naslagwerk ontvangt omtrent deze webinar, dus je kan hem altijd even terugkijken en misschien dan op dubbele snelheid of zo, zodat je even kan focussen op de aspecten die je zelf interessant vindt. Goed dat even voor de inleiding, gaan we gewoon direct in de materie duiken Moet hij het wel doen... Hallo? Oké, top. Nou, we hebben het natuurlijk vandaag over de Web Content Accessibility Guidelines in dit geval. Dus ik ga verder en noem het vaak gewoon de WCAG. Nou die WCAG die bestaat uit een soort heuristiek. Zo kan je het zien. Heuristiek is natuurlijk zaken die met gebruikers worden opgesteld en dit document bestaat dus eigenlijk. Nou ja, het is gemaakt voor en door mensen met functiebeperkingen om hen te helpen met een gelijkwaardige ervaring creëren. En als we het dan hebben over de achterliggende filosofie van dit document is het eigenlijk best wel een UX-ig document. Dit is namelijk helemaal opgesteld in combinatie met gebruikersonderzoek en de doelstelling is dus niet een gelijke ervaring of een identieke ervaring, maar een gelijkwaardige ervaring. Wat je dus wil creëren is niet gewoon zeggen nou hey, iedereen moet het maar op één manier kunnen doen. De bedoeling is dus dat iedereen op zijn eigen manier dezelfde of een gelijkwaardige ervaring kan hebben hier binnen. Wat je nou merkt is dat mensen met verschillende soorten functiebeperkingen vaak een soort offer moeten doen Als je hier helemaal geen rekening mee houdt, bijvoorbeeld in je UX design. Een van de offers die iemand bijvoorbeeld moet maken is dat ze bij wijze van spreken misschien meer tijd moeten investeren omdat het een langer duurt voordat ze dezelfde taak hebben uitgevoerd. Dat is natuurlijk erg vervelend als het een groot deel van de mensen 5 minuten kost, maar het kost jou telkens een half uur. Dat voelt natuurlijk gewoon niet fijn. Dus dat gaan we vandaag zeker proberen te voorkomen. Een ander offer dat soms gebracht wordt door mensen is dat ze bijvoorbeeld meer cognitieve inspanning moeten leveren. En wat krijg je dan als dat iemand bijvoorbeeld helemaal moe is na het invullen van een formulier. Dan vraag je ze een bepaalde handeling te doen die soms, misschien zelfs verplicht is. Zeker als je hier zit met een overheidspet op. En dan zijn er misschien dingen die burgers verplicht moeten doen. En het is natuurlijk vervelend als het voor een groot deel van de burgers geen probleem is, maar voor een kwart van de mensen potentieel heel veel moeite kost. Dan hoor je weliswaar dat mensen bijvoorbeeld na het invullen van een belangrijke aanvraag bij wijze van spreken een halve dag vrij moeten nemen. Dat is natuurlijk heel vervelend. Want nou ja, je kan je misschien voorstellen dat als je dit soort dingen verplicht moet doen en je bent daarna een dag uitgeschakeld, dat dat gewoon erg vervelend is. En dat laatste is natuurlijk het vragen van hulp. Dat is voor sommige mensen helemaal niet fijn, sommige mensen vinden het niet zo moeilijk en je went er vanzelf aan denk ik, als je een functiebeperking hebt. Zo ik ook met bijvoorbeeld mijn kleurenblindheid. En een van de dingen die daar vervelend van is, is dat de dingen waarvan je denkt, ik zou dit eigenlijk best wel makkelijk kunnen, dan toch een hulpvraag met zich meebrengen. Ook dat kost natuurlijk extra tijd, maar het voelt ook gewoon niet fijn om voor kleine dingen hulp te moeten vragen. Dus voor die drie dingen: dus het inleveren van tijd, cognitieve inspanning en het vragen van hulp. Gaan we vandaag proberen met z'n allen toe te werken naar een situatie waarin dat dus niet meer nodig is. En dat zie ik dan in mijn geval even als een gelijkwaardige ervaring. Gaan we het vandaag extra hebben over de ervaring, dat is de X van je van UX. Nou, er zijn verschillende versies. 2.1 en 2.2, de meeste mensen en het grootste deel van de auditors in Nederland die zullen testen op 2.2. Dit gewoon omdat er hoop is toegevoegd en niet zoveel is weggehaald. En vervolgens heb je daar verschillende niveaus en dat is dan A, dubbel A en triple A. Je kunt die niveaus een beetje zien als dekkingsgraad. Waar triple A 99 of 98% van de mensen met een functiebeperking helpt, dubbel 95% en A tussen de 80 en 90%. Dat zijn een beetje natte vingers natuurlijk, gokjes. Maar zie het dus niet als moeilijkheidsgraad, verkoopt ook niet zo, ook niet aan je collega's. Zie het dus als dekkingsgraad. Dus hoe hoger je gaat in de labels, hoe meer mensen een gelijkwaardige ervaring hebben. Onder de Nederlandse wetgeving op het moment is het belangrijk om te voldoen aan de WCAG 2.2 dubbel A en daar horen dus in totaal 50 voor 2.1 en 55 succescriteria voor 2.2 bij. Geldt trouwens ook voor PDF's en apps en ik zal hier en daar ook heel af en toe even een uitstapje maken naar het design voor app. Waarom? Omdat ik denk dat er een aantal zaken zijn die heel makkelijk op te lossen zijn voor hen die thuis aan apps werken en waarom niet. Het liefst zou ik vandaag komen, met een lijstje met welk succescriteria moet je aan denken? Dus laten we zeggen, dan heb je 15 succescriteria waar jij specifiek aan moet voldoen als UX designer. Alleen dat gaat helaas niet. Er zit zoveel overlap tussen bepaalde succescriteria en sommige van de zaken zijn een combinatie tussen bijvoorbeeld developers en UX designers. Krijg vanuit thuis dat het lijkt alsof ik onder water praat. Ik ga heel snel kijken naar mijn settings, want ik wil wel even goed verstaanbaar zijn. Zo goed, als ik hier kijk dan lijkt alles goed te staan en ook goed door te komen. Zijn er meer mensen die audio issues ervaren? Verstond goed.. Laat het even weten of er meer mensen zijn die problemen hebben. Ik krijg voor nu in ieder geval van allemaal mensen te horen dat het goed klinkt. Dus Eline, ik denk dat het misschien ergens bij jou ligt dan. Sorry to say that. Oké, verder met waar we waren, dus geen specifieke succescriteria vandaag. Ik ga ze wel heel af en toe even noemen, maar kan je dus niet helaas een lijstje geven met deze vijftien succescriteria moet jij aan voldoen. Nou, wat dus het allerbelangrijkste is, is dat je gaat staan voor elke gebruiker en dus ook die met functiebeperkingen. Velen van de mensen thuis zullen inmiddels weten dat dat tot een kwart van de mensen in Nederland is. Dat betekent dus dat je eventueel, als je hier helemaal niets mee doet, 25% van je klanten ook negeert. Dat is natuurlijk niet helemaal de bedoeling lijkt me, maar ik denk dat als je bij een gemiddelde management aan komt en je zegt we missen maar 25% van onze van onze doelgroep, dat daar niet met heel veel aandacht naar gekeken wordt. En dat is feitelijk een beetje wat je doet als je er dus helemaal geen rekening mee houdt. Nou, neem daar dus verantwoordelijk voor... verantwoordelijkheid voor. Maar, en ik denk ook dat de UX’ers een unieke rol hebben in de zin van dat zij vaak vroeg in een ontwikkelingsproces al betrokken zijn. Ik geloof echt dat als je bij het design al bepaalde maatregelen neemt om ervoor te zorgen dat het niet meer fout kan gaan, wat verder in de pijplijn, dat dat een ontzettend gewin is voor het bedrijf waarvoor je werkt, voor de digitale toegankelijkheid van de producten. Dus ook daar ga ik vandaag zeker wat tips in geven. Uiteindelijk is dus het ontwerpproces. Daar kun je de basis leggen voor hoe het product er uiteindelijk uit gaat zien. Dat kun je bijvoorbeeld doen door ontzettend veel instructies mee te geven aan je designs, zodat een developer, een content maker en wie dan ook daar achteraan komt bij het uitvoeren van die instructies in principe tot een digitaal toegankelijk product zal komen. Dat is natuurlijk een beetje een utopische strekking om te zeggen nou, dan gaat dat sowieso goed. Maar ik denk wel dat daar een belangrijke rol ligt voor designers, omdat die er vaak het vroegst bij zijn. Verdergaand let op dat gebruikerstesten nooit vervangen zullen kunnen worden door die WCAG. Het is natuurlijk een huristisch opgesteld document, maar dat betekent niet dat je opeens kan zeggen nou, we gaan stoppen met gebruikerstest, want die WCAG dicteert het ons allemaal. Wat belangrijk is, is dat je altijd blijft testen op gebruiksvriendelijkheid. En wat je dan wel zou kunnen doen is bijvoorbeeld gebruikerstesten gaan uitvoeren met mensen met een functiebeperking. Dus werk je bij jou binnen bijvoorbeeld al met persona's, hoef je niet te zeggen van nou, die heeft deze specifieke functiebeperkingen, zo'n persona, dat hoef je niet te zeggen, maar je kan wel gewoon een bestaand persona pakken. Laten we zeggen Joris Nijskens, 29 jaar oud. Die moet bepaalde zaken doen op ons platform en hij gebruikt het toetsenbord, alleen maar het toetsenbord. Nou, dat zal er toe leiden dat als je dat op die manier oppakt, dat je natuurlijk garandeert dat er ook getest wordt met een toetsenbord, zowel met gebruikers als bij het ontwikkelen van producten. Veel van de problemen die ik bijvoorbeeld zie als ik heel specifiek heb over toetsenbord bediening, die ontstaan eigenlijk gewoon ook omdat er bijvoorbeeld niet goed getest is of niet goed vastgelegd is dat bepaalde handelingen met het toetsenbord ook moeten kunnen. Ook hier denk ik dat UX designers een mooi voorbeeld. Ik heb een aantal een aantal video's in deze slides staan, maar ik kwam er net achter dat ik die niet met geluid kan delen. Maar wat ik wel kan doen is ze even aan het einde sturen. Dus ik zorg er wel even voor dat aan het einde dat ik even een paar van de belangrijke video's met jullie deel. Sowieso is het grootste grootste deel van de YouTube links die je zult zien zijn video's op onze YouTube pagina. Dus als je zoekt op Cardan op YouTube dan vind je daar sowieso een hoop van deze video's Ook gelijk. Let dus op dat je dus gebruikerstesten blijft organiseren. Als je dat nog niet doet is dat sowieso een advies van mijn kant. En als je dat dan gaat doen, zorg er dan voor dat je ook mensen met functiebeperkingen uitnodigt. En ja, weet je, er zijn genoeg mensen met functiebeperkingen die hartstikke graag zouden willen helpen. Maar zorg dan ook dat als je zo'n testdag hebt en je nodigt mensen uit dat je bijvoorbeeld zorgt dat er een lift is. Dat je dus de mensen ook even een gelijkwaardige ervaring geeft in het pand waar je ze uitnodigt. Die toegankelijkheid strekt zich natuurlijk niet alleen maar uit over het digitale spectrum, maar is ook net zo goed belangrijk in de fysieke wereld. Als je mij af en toe naar links of naar rechts ziet kijken, dan kijk ik gewoon of er vragen zijn. Ik heb er nog geen ontvangen. Nou, zorg dus ook dat je wat weet over de verschillende manieren van bediening. Bijvoorbeeld voorlees software. Zorg dat je dat zelf een klein beetje snapt. Zorg dat je daar dan de benodigde zaken voor geïnstalleerd hebt en vraag dus ook aan die testers wat gebruik jij en hoe kan ik ervoor zorgen dat jij de beste test uit kan voeren die nodig is? Ja, vraag dus ook gewoon van tevoren wat iemand nodig heeft en probeer een breed scala aan mensen uit te nodigen. Natuurlijk niet alleen maar met functiebeperkingen, maar zorg er dus gewoon voor dat je gewoon een goed beeld krijgt van wat mensen nou precies nodig hebben voordat je ze uitnodigt. Dit als je al gebruikerstesten doet. Nou, er zijn natuurlijk een groot scala aan apparatuur en zaken waarop mensen hun digitale content bedienen. Ik denk dat het heel belangrijk is voor designers om goed op de hoogte te zijn van wat er nou een beetje allemaal is. Waarom? Omdat je dan ook rekening kan houden met bepaalde interacties die misschien niet met een soort assistieve technologie kunnen, maar wel gewoon met wat meer conventionele bediening zoals muis en toetsenbord. Ik denk dus zeker dat het goed is om je ook hier op dit onderwerp een klein beetje in te lezen of natuurlijk een keer bij ons langs te komen en dan kan ik je daar nog veel meer over vertellen. Maar het is goed om te weten dat er dus een wijd scala is aan zaken die... aan assistieve technologie die mensen gebruiken om hun apparaat te bedienen. Denk aan dingen als voorlees software. Ik denk dat dat een van de belangrijkste tools is voor UX designers, ook om te kunnen controleren aan het einde of de designs correct zijn uitgevoerd. Denk aan spraakbediening, toetsenbord bediening, het inzoomen van pagina's, et cetera, et cetera. Dus bijvoorbeeld als je het hebt over zoom, als je weet dat er heel veel mensen zijn die tot 400% inzoomen, is het dus misschien fijn om je design te ontwerpen met een klein scherm in je achterhoofd, zodat dat als het op een heel klein scherm altijd past, mooi qua formatting eruitziet. Dan kun je ook een beetje garanderen dat als je het scherm dan alleen maar groter maakt, dat je dan alleen maar meer ruimte ontvangt. En wat dingen die ik bijvoorbeeld vaak zie is dat er een design is gemaakt, eigenlijk met als bedoeling op een hoge resolutie scherm, een groot scherm zoals steeds meer mensen gebruiken. Zeker in een professionele setting natuurlijk, zeker in een design setting. Apparaten met hoge resoluties, met grote en met veel ruimte op het scherm. Superfijn natuurlijk, maar ik zou je willen uitdagen om te gaan designen voor een klein scherm en dan op te schalen in plaats van in te schalen op het moment dat je een zoom verwacht. En dat zorgt ervoor dat dingen als tekst die van het scherm af vallen, video's die niet meer bedienbaar zijn, et cetera. Menu's die verdwijnen. Dat dat niet meer zo snel zal gebeuren omdat je natuurlijk rekening hebt gehouden met de allerkleinste variant en alleen maar meer ruimte krijgt in plaats van alleen maar minder ruimte als je het andersom doet. Leuke uitdaging sowieso. Ik heb hier een vraagje vanuit huis: heb je voorbeelden van veelgebruikte voorlees software? Jazeker, de meeste mensen die hier veel gebruik van maken die die zullen gebruik maken van Apple producten. Die voorlees software, die is gewoon native, die heet VoiceOver en die is native voor Apple. Die werkt ontzettend goed. Die werkt dan goed op je mobiele telefoon. Als je dan een iPhone hebt en eventueel je computer. Voor Windows gebruiken wij zelf vaak NVDA en dat is een afkorting. Ik zal me anders wel straks even in de chat gooien. NVDA is een gratis schermlezer die je gewoon kan vinden en kan downloaden voor Windows. Die is iets ingewikkelder om te gebruiken, dus ik zou ook zeker een tutorial doen. Die vind je zeker op YouTube om dat een beetje fijn in te stellen zodat je er goed mee kan testen. Er is ook nog een ander programma, dat is betaald. Dat gebruiken mensen die de software dagelijks gebruiken. Die heet Jaws, als in de film met de haai er in. Die is schijnbaar iets makkelijker te gebruiken, maar kost dus wel geld. Dus de vraag is als je die in je testing suit wil opnemen of je dat daar dan voor neer wil leggen. En hier wordt nog een vraag gesteld. Hey, digitale content met braille, daar kan ik me niks bij voorstellen? Goede en leuke vraag. Er bestaan brailleleesregel. Dat zijn een soort toetsenborden met daarin puntjes die eigenlijk mechanisch omhoog en naar beneden kunnen komen. Wat je dan kan doen is regel voor regel een webpagina af lezen met braille, waarin je dus als je op een tekstuele regel gaat staan, de brailleleesregel de juiste puntjes en de juiste sequentie omhoog doet. Zodat je dus eigenlijk kan voelen wat er op de website te lezen is met braille. Wordt steeds minder gebruikt, ook met de komst van voorlees software. Maar braille, je zal toch zien dat veel mensen dan toch nog een braille leesregel in hun tas hebben zitten. En dat maakt dus ook dat bijvoorbeeld dingen als een alternatieve tekst fijn zijn, zodat iemand kan... ook met die brailleleesregel kan waarnemen dat daar dus een afbeelding is en met een bepaalde alternatieve tekst. Als je een keer wil weten wat is dat nou? Zoek een keer op het woord brailleleesregel en je krijgt hem gelijk. Het is een soort vierkant toetsenbordje met puntjes die omhoog en omlaag kunnen komen op basis van de tekst die dus op het scherm te zien is. Heb je tips om te achterhalen wat onze klanten eventueel voor functiebeperkingen hebben naast een enquete sturen. Ik denk dat je er gewoon vanuit kan gaan dat.... De bedoeling van de WCAG is dus dat dat soort dingen niet meer nodig zijn. Als je compliciet bent met andere WCAG 2.2 dubbel A, op dit moment dan wordt er gezegd jij bent voldoende toegankelijk voor mensen met een willekeurige functiebeperking. Er zijn natuurlijk altijd niche functiebeperkingen die wat moeilijker te bedienen zijn et cetera. Maar je zou dus in principe niet meer uit hoeven te halen specifiek wat jouw klanten voor functiebeperking hebben. Je kan er dus vanuit gaan dat als je die WCAG volgt, dat je dus.. of iemand nou blind of doof of misschien een motorische functiebeperking heeft, dat je die allemaal op de juiste manier een gelijkwaardige ervaring kan bieden. Ik denk dus ook dat het beter is om gewoon te kijken naar bijvoorbeeld landelijke statistieken van functiebeperking als je bijvoorbeeld prioriteit wil geven aan een gebruikerstest. Maar als het gaat om het digitaal toegankelijk maken van je designs en producten. Als je je aan de WCAG houdt, dan zit je sowieso snor. Daar is namelijk ook gewoon rekening gehouden met alle soorten functiebeperkingen die er eventueel zijn. En ja, voor velen van ons, we moeten er toch aan voldoen, dus dan kan je nu maar net zo goed gewoon doen en hoef je dus ook niet mensen een enquete te sturen. Ik weet ook trouwens niet of dat wel AVG proof is, dat je mensen gaat vragen goh, heb je een functiebeperking? Kan een designer responsive op basis van het zoompercentage? Ja, dat kan zeker. Dus dat is ook wat er volgens mij veel gedaan wordt. Is dat er gewoon gekeken wordt naar wat geeft die browser zoom nou aan? En daar, op basis daarvan maak je verschillende designs, bijvoorbeeld voor kleinere schermen. Wat je dus ook ziet vaak dat als wij onze tests doen, wij testen dan op een vrij lage resolutie, om en nabij 1080p op 400% zoom en voor het scherm waar ik nu naar zit te kijken. Dan zitten we dan echt op een kwart van dit van dit scherm zo'n beetje. Plus dan ook nog 400% zoom. Dus wat je dan overhoudt is, bij wijze van spreken de resolutie van een oude iPhone. Dat kan. Je kan ook gewoon zeggen als we gaan inzoomen veranderen we het design, maar dan moet je dus heel bewust mee omgaan. En een makkelijkere tip kan dus misschien zijn om te beginnen met dat kleine scherm en dan alleen maar uit te breiden. Dus dan begin je eigenlijk met dat zoom percentage van 400% zorgen dat alles gelikt is en dan geef je daarna alleen maar meer ruimte. Maar het kan natuurlijk allebei. En ik denk ook dat responsive design op basis van zoom percentage van honderd naar naar 200 naar 400 bij wijze van spreken dat dat een beetje de conventie is. Bedankt voor al die vragen. Hartstikke leuk! We gaan gewoon even lekker verder met de volgende. Nou, we hebben natuurlijk wel een beetje gehad van, als je bij de overheid werkt dan moet het één. Dus het afgelopen jaar, voor de mensen die dat nog niet wisten, lijkt me van niet. Is de European Accessibility Act ingegaan. Wetgeving van de Europese Unie. En daarin wordt dus gezegd er zijn heel veel services waar je eigenlijk niet meer omheen kan. Denk aan bijvoorbeeld geld pinnen of überhaupt je financiële zaken regelen, een internet abonnement hebben, publiek transport gebruiken, et cetera, et cetera. En daarin, in die sectoren moeten dus allemaal rekening gehouden worden, ook met die digitale toegankelijkheid. Het opvolgen van de WCAG 2.2 is ook daar een mooie kans om aan die European Accessibility Act te gaan voldoen. Wil je nou meer weten over hoe de European Accessibility Act precies in elkaar steekt? We hebben toevallig een week of twee geleden geloof ik een stuk of zeven webinars daarover opgenomen. Die vind je ook op onze website en YouTube, dus daarover nog veel meer over de European Accessibility Act, als dat iets is waar je geïnteresseerd bent. Het geldt dus voor een breed scala aan sectoren en diensten, zoals je hier op deze site kan zien. E-commerce bijvoorbeeld, valt daar ook onder, dus grote webshops zullen hier ook zeker aan moeten voldoen. Nou, dat zijn dus een beetje twee aspecten, of de twee kampen waar we dus nu mee werken, is dat we dus werken met de overheid en met bedrijven die dus aan de European Accessibility Act moeten gaan voldoen. En wij designers of jullie designers kunnen daar heel veel aan bijdragen door vroeg te schakelen en hier dus al zoveel mogelijk over te leren. Zo snel mogelijk, dat is een beetje het punt hier. Nou, we beginnen eerst even met iemand die alleen het toetsenbord gebruikt. We hebben hier een persoon, die is ook hier afgebeeld. Normaal laat ik daar dan ook even een video bij zien, maar daar hebben we dus nu niet helemaal lekker de tijd voor. Maar dit is Todd, Todd is verlamd en gebruikt alleen een joystick die hij met zijn mond en lippen bedient om het web te navigeren. Je kan het zo zien dat iemand een soort interface om zijn hoofd heen gemonteerd heeft in een rolstoel, een elektrische rolstoel waar je natuurlijk dan ook mee kan rijden en vaak iets van een digitaal of vaak iets van een touch based device. En in zijn geval geloof ik een iPhone. Die is op een bepaalde manier gemonteerd op die rolstoel en die wordt dan bediend bijvoorbeeld met een joystick en een aantal knoppen die hij dus met zijn kin, tong en mond kan bedienen. En dan zul je misschien denken ja, moet ik daar nou rekening mee gaan houden? Hoe ga ik nou in godsnaam ervoor zorgen dat zo'n joystick, dat die goed werkt met mijn website? Nou, het mooie hieraan is dat zo'n joystick vaak gewoon direct gemapt is aan een toetsenbord simulatie als het ware. Dus je kan garanderen dat als zaken met het toetsenbord werken dat ze ook met zijn assistieve technologie zullen werken. Dat scheelt dat je dan dus niet per se nu een joystick naast je moet hebben als je een keer wil testen hoe die ervaring is. Maar je kan dat dus gewoon in principe met het toetsenbord doen en dat doe je met een aantal toetsaanslagen. Met de tab toets ga je van interactief element naar interactief element. Daarmee kan je dus navigeren en rondneuzen op een website et cetera. Wil je terug? Doe je shift plus tab. Vaak heb je dan nog enter en de spatiebalk om te activeren en de pijltjestoetsen voor soms verfijndere navigatie. Die mag je ook zeker gebruiken, bijvoorbeeld in het selecteren van combobox of filteropties et cetera, et cetera. En weet dus, dat is een beetje mijn punt van deze persona. Besef je goed dat heel veel ervaringen met een muis kun je gewoon overal overheen gaan, dus je hoeft niet op elk individueel element te klikken voordat je naar het volgende element kan. Imagine als dat aan de hand zou zijn. Let dus goed op dat iemand met het toetsenbord dat dus wel doet. Dus heb je nou heel veel elementen op jouw webpagina waar iemand dus eerst langs moet voordat zij in de gewenste content komen waarvan jij denkt nou, daar willen ze eigenlijk naar toe. Let dus goed op dat je dat zo veel mogelijk probeert te verminderen. Er zijn een aantal hele makkelijke manieren voor. Om dat nou even wat meer te structureren hebben hier een aantal succescriteria op het scherm staan. Denk dus aan bijvoorbeeld dat alle content te bedienen is met het toetsenbord. Test daar dus ook echt op of zorg dat dat getest wordt. Zorg ervoor dat het toetsenbord focus logisch is. En dan hebben we het natuurlijk van links naar rechts, van boven naar beneden hier in de westerse wereld. Verder hebben we nog een aantal contrast vereisten, namelijk dat die bijvoorbeeld een contrast heeft van 3,0 staat tot één ten opzichte van de achtergrond altijd zichtbaar is, dus er moet altijd een gedeelte van de focus rand zichtbaar zijn. Dat is zeg maar het vierkant of gekleurde gedeelte dat aangeeft hier ben jij nu met het toetsenbord en er is geen toetsenbord val aanwezig. Nou, dat klinkt spannender dan het is, maar daarmee bedoelen we gewoon als jij in een element kan met de toetsenbord bediening, dan moet je er ook weer uit kunnen. Is dat niet zo, dan zit je vast en dan zou je dus de pagina moeten herladen. Dikke kans dat iemand dan vanaf dat moment heel geïrriteerd is. In het gebruik van je digitale product, zien we niet zo vaak meer, maar let dus vooral op 2.1.1, dus dat gaat gewoon over de bediening van het toetsenbord en zaken als de focus rand. Moet je ook een focus area maken om een tekst of alleen interactieve elementen. In principe iemand zoals bijvoorbeeld Todd hier, die dus wel goed zicht heeft maar wel het toetsenbord gebruikt. Daarvoor hoef je dus niet die bijvoorbeeld platte paragrafen selecteerbaar te maken en hoeft daar dus ook geen focus rand omheen. Dat zal ook standaard in je browser niet zomaar gebeuren, pas als jij een schermlezer gaat gebruiken, dan worden die paragrafen natuurlijk belangrijk. Maar dan maakt natuurlijk de focus van die teksten niet meer zo veel uit, Omdat mensen die natuurlijk een schermlezer gebruiken over het algemeen natuurlijk blind of slechtziend zullen zijn. Dus dat hoeft niet. Zorg er gewoon voor dat die focus rand altijd zichtbaar is voor interactieve elementen. En als extra tip van Flip hier nu eventjes van mij wat je ook zou kunnen doen is de focus rand helemaal niet custom maken. Gewoon dus de de standaard focus rand van de browser gebruiken. Als je dat namelijk doet dan hoef je daarna niet meer te voldoen aan de contrast vereisten en dergelijke aangezien de browser contrast of de browser dan in principe de kleur ook van de focus bepaalt. En dan zien wij dat dus als een verschil tussen de auteur en de user agent. En in dit geval is de user agent dan de browser en de browser maakt dan de kleuren aan. En dan kun jij dus als UX designer of als bedrijf gewoon geen impact op uitoefenen. Dat is een manier om nooit afgekeurd te worden op contrast vereist omtrent focus. Als je dus de browser standaard focus rand gebruikt. En hier wordt gezegd grappig, dit scherm is niet met tab te gebruiken... dat kan goed. Dit is inderdaad, ik weet dat... wij gebruiken zoals je gezien hebt Zoho. Het kan inderdaad goed zijn dat hier en daar de functionaliteit binnen het Q&A scherm niet digitaal toegankelijk zijn. Mijn excuses daarvoor. Daar kan ik voor nu even niks aan doen. Maar ik ga je in ieder geval vertellen hoe het wel zou moeten vandaag. Gaan we verder. Wat we gaan doen. Is gewoon een klein beetje focussen op de praktische dingen waar je dus rekening mee kan houden in je designs. En ik heb als voorbeeld even een oude versie van Skyscanner.nl gedaan. Wat ik heb gedaan is ook gewoon om even als voorbeeld te gebruiken hebben we gekeken naar wanneer kan ik naar Marrakesh vliegen en je ziet dat ik dit voorbeeld al lang geleden gemaakt heb. En inmiddels zijn een paar van de tips die ik vandaag kan geven ook geïmplementeerd op Skyscanner. Nou, dat vind ik altijd leuk, want dat betekent dus dat. Ik ga nu bepaalde voorbeelden geven. Er ontbreekt hier en daar wat, maar ik daag je zeker uit om straks even op Skyscanner.nl te gaan kijken en te gaan kijken welke van mijn tips nou precies ingevoerd zijn. Maar allereerst gaan we dus even die tips opstellen. Daar gaan we lekker mee bezig nu. Wat hebben we dus hier? Eerst begin je met een soort zoekopdracht en vervolgens ga je naar het overzichtsscherm wat je nu aan de rechterkant van je scherm ziet. Wat je ziet is dat daar best wel heel erg veel opties zijn. Zo heb je bijvoorbeeld... Bovenaan kun je kiezen tussen vliegtickets, hotels en autoverhuur. Links heb je een hele balk met filters, aan de rechterkant natuurlijk hier en daar nog eventjes wat reclame en natuurlijk heb je verschillende interactieve elementen per kaartje van de vluchten. Bijvoorbeeld zo'n ‘i’ icoon, de selecteren knop, et cetera, et cetera. Nou, hoe zal die toetsenbord journey dan waarschijnlijk lopen? Je begint eigenlijk altijd bij het logo. Dat is een beetje de conventie. Dat je dus vanuit dus de browser balk eigenlijk direct naar het logo springt. Daar kun je dus ook in je design vanuit gaan. En als je bijvoorbeeld dus notities of instructies wil schrijven om te garanderen dat developers bijvoorbeeld de juiste sequentie van toetsenbord focus plekken implementeren, kun je er vanuit gaan dat die dus begint bij het logo. Nou, stel je voor dat ik dus nu naar een van de links, bijvoorbeeld een van de, laten we even zeggen en dat zou natuurlijk logisch zijn dat ik naar de goedkoopste vlucht hier in het scherm wil en dat is die van € 281 Stel je voor dat ik daar nu naar toe zou willen. Dan gaan we dus nu navigeren met de tabtoets en dan spring je dus van interactief element naar interactief element. Nou als je dan een inschatting gaat maken van hoe zal die journey nou een beetje zijn, zul je zien dat we bij het logo beginnen. Zeer waarschijnlijk dan naar ‘help’, de taalwissel, inloggen, dan de vliegtickets, hotel, autoverhuur, dan nog wat filters. Dan gaan we misschien eerst nog door de door de volledige filter balk heen en dan vervolgens komen we bij de content aan en moeten we nog een aantal keer tabben voordat we daar dus aankomen. Nou daar heb ik dus bij dit voorbeeld even uitgerekend en alleen al om door de bovenste balk heen te gaan ben je zestien keer bezig, zestien keer tab aan het aanslaan om dan vervolgens door de filter balk heen te komen. Wat de eerstvolgende is waar je in komt is 22 keer tabben en hier ben ik nog vrij... vrij vrijgevig geweest in wat nou precies telt als een tab aanslag. Oftewel ik moet meer dan 38 keer op een knop drukken om bij de zoekresultaten te komen. En dat wordt ongeveer vijftig keer als ik echt daadwerkelijk naar een vlucht ga gaan navigeren en je kan je voorstellen dat voor mij, als ik dus nu met mijn muis ga. Ik heb goed zicht en goed gebruik van mijn armen, dus ik kan heel makkelijk met mijn muis naar die knop. Dat kost mij één seconde. Nou stel je voor dat je dus bijna vijftig keer tussen de veertig en vijftig keer moet klikken om überhaupt bij de knop te komen waar je naartoe wil navigeren om er vervolgens achter te komen dat je toch je filters niet lekker hebt staan. Dan ga je weer veertig keer terug klikken om een filter aan te passen. Misschien ververst de pagina wel. Kom jij weer op het logo terecht, mag je weer vijftig keer klikken. Tegen de tijd dat jij zo'n vlucht hebt heb je misschien honderden keren op tab gedrukt. Dat is natuurlijk niet helemaal fijn. Nou, mijn vraag aan jullie is dan eigenlijk gelijk enig idee hoe..? Wat is nou eigenlijk een makkelijke oplossing om deze toetsenbord ervaring te verbeteren? Ben benieuwd of de mensen thuis daar een suggestie voor hebben. Skip link. Heel mooi! Ja dank je wel Belinda en Laura. Allebei het correcte antwoord. Een mooie oplossing hier is een skip link. Die mag je bijvoorbeeld direct na het logo plaatsen. Die mag ook onzichtbaar zijn en pas zichtbaar worden als je die focus ontvangt. En je kunt dan gewoon met één link direct naar de zoekresultaten. Dat bespaart in dit geval laten we zeggen veertig kliks, dus dat is mooi. Trouwens, is deze ook verplicht onder de WCAG. Je moet blokken, die herhalen op dezelfde pagina. Dus in dit geval zou dat de menubalk zijn bovenin. Die moet je kunnen overslaan, dat is een verplichting. Maar het is hier ook gewoon de meest duidelijke UX optimalisatie die ik kan vinden zo’n beetje. Verder kun je bijvoorbeeld binnen de filteropties kun je zeggen, we werken daar met de pijltjestoetsen, dus daar doe je de verfijnde besturing en dan met de tab toets spring je direct door naar de content. Zoiets zou ook kunnen. Let goed op dat je dat goed test, want er zijn een aantal manieren die hier niet helemaal aan zullen voldoen. Maar mooi gezegd. Dank je wel Belinda en Laura voor het correcte antwoord. Denk dus aan dit soort zaken om de tijd die iemand spendeert om een handeling te voltooien op je website makkelijker te kunnen doen. Hier is nog een ander klein voorbeeldje. Blijf ik niet te lang op hangen, maar hier zie je dus een veelvoorkomend probleem binnen dingen als e-mail applicaties. Je kan hier swipen om te verwijderen. Iemand zoals Todd, die dus zo'n joystick gebruikt, die zal die swipe beweging niet kunnen doen. Een van de oplossingen daarvoor is dus denk altijd aan een single touch oplossing. In dit geval kun je dus lang vasthouden om te gaan selecteren en dan op het vuilnisbakje drukken om alsnog weg te gooien. Dus zorg er altijd voor dat je dingen met een enkele muisaanwijzer of een enkele aanwijzer in één keer kan doen. Dat geldt dus voornamelijk voor touch devices. Kleine extra tip van mij. Dan de zichtbare ervaring. Ik heb focus nu even op kleur, ik vond dat zelf misschien relevanter omdat ik zelf kleurenblind ben. Ik ben zelf rood groen kleurenblind dus er zijn ook een aantal problemen hier die voor mij lastig zijn. Ik ga denk gezien de tijd, één of twee voorbeeldjes erbij pakken. Let goed op dat de contrasten van de kleuren altijd goed zijn. Onder 1.4.3 is dat een contrast van 4,5 staat tot 1 voor kleine tekst en voor grote tekst 3,0 staat tot 1. En voor alle interactieve componenten 3,0 staat het 1 onder 1.4.11. Let ook goed dat als je dus alle kleur zou weghalen in een pagina, dat er dan niet informatie verdwijnt. Dat doe ik vandaag even dankzij de zwart wit test. Dus wat ik heb gedaan is: ik heb een paar designs gemaakt die niet voldoen. Die heb ik vervolgens zwart wit gemaakt om aan te tonen van: dan zie je opeens wat de tekortkomingen zijn aan het design en dan ga ik even een korte oplossing aanbieden. Let op 1 op de 12 mannen is kleurenblind. Ik ben dus nog niet eens een hele vreemde vreemde eend in de bijt. Let op dat dat echt een hoog percentage is. En voor de mensen die daar geïnteresseerd in zijn, dat is 1 op de 250 onder vrouwen. Niemand ziet helemaal in zwart wit. Er zijn dus een klein percentage aan mensen die dus helemaal geen kleur ziet. Achromatopsie noem je dat. Het gros van de mensen is dus rood groen of geel blauw kleurenblind. Laten we even een voorbeeld nemen van een formulier. Dit is namelijk een typisch voorbeeld van een afkeuring onder 1.4.1. Deze foutmelding is trouwens ook niet goed, maar daar komen... dat is niet helemaal in de scope van vandaag. Nou, wat nou als ik een zwart wit test ga doen? Dan zie je dus dat. En dit is een ervaring die meer lijkt op hoe ik dit zal waarnemen is dat als je dus de kleur helemaal uit de de afbeelding sloopt, dan zie je dus dat er informatie begint te ontbreken, namelijk je ziet dat het feit dat hier een rode streep staat, dat dat eigenlijk gewoon begint te lijken op de normale tekst op de pagina. Dat resultaat dat iemand dus misschien niet zal zien dat hier een fout gemaakt is. Je zal dus misschien iets meer cognitieve inspanning moeten toepassen om te zien, goh, ik heb per ongeluk een komma in plaats van een punt getypt bijvoorbeeld. Dan moet je dus zelf echt goed gaan kijken van heb ik nou iets fout gedaan of niet? Mag er in ieder geval niet doorheen. Natuurlijk extra vervelend dat je kleurenblind bent en bijvoorbeeld een motorische functiebeperking hebt. Dat je dus meerdere keren opnieuw je wachtwoord zal moeten invoeren. Nou, wat gaat er dus mis? Je ziet dus dat de foute velden alleen herkenbaar zijn door kleur. Alle contrasten zijn onvoldoende, de placeholder is ook onvoldoende en dat is dus.... dat is dus vervelend, want als je die nog donkerder gaat maken denkt men misschien dat er wat ingevuld is. De melding bij het foutieve veld is geen foutmelding, maar een instructie. Dat is een beetje een bonus. Die hoort niet helemaal onder UX design. En wat er mis kan gaan hier met de voorlees software is dat eventueel de foutmelding ook niet correct voorgelezen kan worden. Nou, om daar even met een oplossing te komen. Wat je dus kan doen is de contrasten veel meer uit elkaar trekken. En dat doen we ook in dit geval door ook de achtergrond van het veld niet meer lichtgrijs te maken zodat de placeholder voldoende contrast heeft. Verder een icoon om ervoor te zorgen dat het duidelijk is dat er iets fout is, of het nou zwart wit is of niet. Dat icoon is natuurlijk altijd zichtbaar. Denk ook aan... ik heb hier een betere foutmelding geschreven, dus hier gebruik ik een negatieve term; ongeldig e-mailadres en ik heb gewoon alle contrasten rechtgetrokken. Nou, dan zie je dus dat er relatief weinig hoeft te veranderen. En dit is natuurlijk... Ik ben zelf niet van beroep designer, dus het kan ook hartstikke... ik denk ook dat het nog veel mooier kan, maar ik denk wel dat dit een mooi startpunt is voor een veel toegankelijker formulier. Nou, nog eentje onder kleur. Hier even een huidig menu. Je zou denken goh jongens, maar dit is toch super duidelijk. Ook hier wordt alleen maar gecommuniceerd door kleur, namelijk welke pagina actief is. En je zal ook zien dat als ik... ja je ziet nog wel verschil. Als ik hier een zwart wit test van doe, dan zie je dus echt wat die contrasten ook met elkaar te maken hebben. Nou wat gaat er dus mis? Je kan dus alleen zien waar je op dit moment bent door kleur te herkennen. Dit zijn dan toevallig geen kleuren waar ik veel moeite mee heb, maar het kan natuurlijk zijn dat jij hier wel moeite mee hebt. Verder zijn voor alle menu items contrast problemen, zowel voor de witte tekst op de blauwe achtergrond als de witte tekst op de roze achtergrond. En dan ook nog het roze ten opzichte van het blauw. Dus eigenlijk overal zit hier een een fout in. En als bonus wat er dus mis kan gaan voor voorlees software is dat er niet wordt voorgelezen, bijvoorbeeld dat je nu op de homepagina bent. Dus dan hoor je misschien home diensten, nieuws en contact, maar dan weet je dus niet dat je nu op de homepagina bent. Je wil dus iets toevoegen in die code, waardoor dus een gebruiker dat ook voorgelezen kan krijgen. Bijvoorbeeld ‘home, huidige pagina’ hoor je dan. Om daar even een oplossing van te doen, dat kan in een paar iteraties al opgelost worden. Wat we dus doen is een streep zetten onder home zodat die dus niet meer afhankelijk is van kleur, alleen maar afhankelijk en verder de kleuren gelijktrekken en uit elkaar zodat er geen contrast problemen meer zijn. Dat doen we in dit geval door dat blauw iets groener of iets donkerder te maken lach me niet uit als dit opeens groen blijkt te zijn trouwens. Verder ook de kleur los te trekken van het design. Dus in dit geval zeggen we dus nou we halen die hele blauwe kleur halen we voor home weer helemaal uit. Dat kan ook. Maar je kan natuurlijk ook het design naar boven bijvoorbeeld gebruiken en dan heb je dus een wat donkerder groen, maar dan kloppen de contrasten nog steeds wel. En let goed op, voor de mensen thuis contrasten zijn niet bedoeld om het nou super perfect fijne ervaring te maken, die minimum contrasten. Want dat is waar we het nu over hebben. Minimale contrasten die zijn bedoeld om dingen überhaupt detecteerbaar te maken. Ik merk zelf met verminderd kleur zicht dat als zaken onder dat gemiddelde of onder het minimum contrast zitten, dat het mij dus soms niet lukt om elementen überhaupt van elkaar te onderscheiden, of überhaupt te detecteren dat er een element is. Bij laag contrast. Rood op donker bijvoorbeeld, dus zwart met een rode tekst. Soms zie ik helemaal niet dat er tekst aanwezig is en dat is natuurlijk super blokkerend voor mensen waaronder ik zelf ook. Er wordt nog gevraagd wat nou als je een zwarte border om de letters inzet? Ja, dat helpt zeker, want je ziet ook als wij nou die tekst zwart te maken. Dat zou ik even na moeten meten hoor. Maar als we de de omlijning zwart maken, dat kan bijvoorbeeld met ook met andere leuke design opties. Bijvoorbeeld een drop shadow of een zwart randje erachter met transparantie et cetera. Maar jazeker, een zwarte border hierzo zou zeker helpen. Dan zie je namelijk gewoon het zwart op wijze van spreken in het roze of blauw goed tegenover elkaar staan. En het feit dat er dan een wit binnenkant is, dat maakt dan niet uit. Dus we meten dit contrast echt tussen aangrenzende pixels aan elkaar. Hierbij het stappenplan. Heel kort nog even. Hier zie je bijvoorbeeld dat we een drietal informatie hebben, namelijk welke stappen er geweest zijn, welke stap ik nu ben en welke stappen dat er nog komen. Daar van kloppen een hoop zaken niet en je ziet ook dat de contrasten veel te laag zijn. Als ik nu switch tussen de kleur en de grijswaarden zie je dus dat voor mensen met verminderde kleurzicht één, twee en drie nagenoeg gelijk zullen lijken. Nou, een aantal manieren om dit op te lossen is bijvoorbeeld al door met vormen te gaan werken. Door bijvoorbeeld te zeggen, we voegen iconen toe aan de geweeste stappen. Een mooie omlijning onder stap drie waar je nu bent en we maken niet meer de contrast problemen voor de nog te komen stappen, maar maak ze wel visueel duidelijk te onderscheiden door bijvoorbeeld het lettertype wat in te dunnen en het vak aan de binnenkant niet ingekleurd te laten. Nou, wat mij betreft heel weinig verschil in deze designs, maar vind ik echt die laatste het best. Nog even kort over de hoor- en voelbare ervaring. Voor sommige mensen die visuele functiebeperkingen hebben, die zullen voorlees software en of braille gebruiken en daarvoor moet dus ook alles te bedienen zijn met het toetsenbord. Let goed op dat een blinde gebruiker ook altijd per definitie een toetsenbord gebruiker is en test daar ook op die manier op, want het zien waar de muiscursor zich op het scherm bevindt is natuurlijk niet mogelijk. Verder gaan we altijd kijken naar alternatieven voor niet tekstuele content, dus kan je zien wat de naam van een knop is in de code en dat je beschrijvende link teksten gebruikt. Een veelvoorkomend voorbeeld hiervoor. Ik skip even iets verder, is dit onderwerp; linkteksten. En wat hier mis kan gaan is dat je dus ziet dat de linktekst bestaat uit ‘lees meer’. Er wordt hier nog even gevraagd: zijn er ook regels rondom de grootte van iconen? In principe niet. Klikbare gebieden moeten voldoen aan een minimale grootte van 24 bij 24 pixels. Als je daar aan voldoet dan zit je in principe snor. Maar als je bijvoorbeeld kijkt naar de iOS design library, daar wordt gewoon gezegd dat een minimaal klikbaar gebied 48 bij 48 pixels is dus. En dit gaat dus alleen maar op als een icoon dan ook klikbaar is. Dus zorg ervoor dat dat icoon, laten we zeggen groter dan 24 bij 24 pixels zijn als ze klikbaar zijn, als het hebben over de andere grootte van iconen. Daar kunnen wij helaas niets over zeggen. We meten dan echt alleen maar het contrast uit en mensen zullen dan in sommige gevallen misschien moeten zoomen om goed te kunnen zien wat dat icoon is. Let dus ook goed op dat mensen soms vrij flink inzoomen. En goed, even terug weer naar de link tekst. Hier zie je een link helemaal onderaan onder het onder het stukje tekst. Lees meer. Nou, dit komt natuurlijk hartstikke veel voor in van die klikbare blokken. Denk aan met nieuwsberichten en dergelijke. Nou, het is dus belangrijk dat je ervoor zorgt dat elke linktekst op zichzelf uniek is. Dit omdat mensen die voorlees software gebruiken misschien niet de hele pagina willen lezen of dus voorgelezen willen krijgen om te kunnen navigeren op de website. Wat je dan kan doen is aan je schermlezer vragen: kun je mij een overzicht geven van alle links op de pagina? Als je dat in dit geval doet en je hebt vijftien blokken met dit soort met deze links erin staan, dan hoor je dus link lees meer link lees meer link lees meer. Ik zal niet verder doorgaan, maar je snapt denk ik wat ik wat ik bedoel. Als resultaat daarvan moet dus iemand alsnog de hele website of de hele pagina doorlezen voordat ze misschien eindelijk de laatste link vinden waar ze naar toe willen. Dat is natuurlijk het ergste scenario, maar kan goed gebeuren. Nou, stel je even voor of beeld je even in dat je dus altijd alle letters op een webpagina moet lezen. Van links naar rechts, van boven naar beneden totdat je bij de link komt waar je graag naar toe wil, dat kost ontzettend veel cognitieve inspanning en ook tijd en dat willen we dus voorkomen. Nou, hoe doen we dat? Dat doen we door goede link teksten te schrijven, bijvoorbeeld hier. Lees meer over kop puntje, puntje, puntje. Dat kan, maar ik snap ook dat een hoop van jullie nu misschien thuis zitten, maar dan wordt die knop zo lang en dan wordt die link zo lang. Deze tekst mag je ook verbergen, bijvoorbeeld in het titel attribuut. Maar zorg ervoor dat als je een designer bent, dat je dit soort dingen ook vastlegt. Dat je dan bijvoorbeeld zegt lees meer en dan en dan een notitie erbij maakt van let op titel attribuut is over kop. Als ik dit nu opvraag en laten we zeggen dat die koppen dus uniek zijn, dan heb je dus Lees meer over kop één. Lees meer over kop twee. Lees meer over kop drie. Al een stuk duidelijker. Nou, mijn favoriete oplossing hiervoor is gewoon de koptekst klikbaar maken. Je kan dit ook doen door bijvoorbeeld het hele blok klikbaar te maken door de klikbare gebied uit te trekken over het hele blok en als resultaat hiervan hoef je hier dus verder nooit meer iets aan te doen. Want als de koptekst omschrijvend is, dan is het link doel ook omschrijvend. En vaak heb je natuurlijk dat je dezelfde koptekst gebruikt bij het nieuwsartikel in het overzicht als dat je gebruikt in het nieuwsartikel zelf. Met als resultaat dat je dus eigenlijk nooit meer iets aan hoeft te doen, eigenlijk nooit meer notities hoeft achter te laten en dergelijke. Dat je gewoon super makkelijk kunt zeggen maak die koptekst klikbaar en dan heb je dus automatisch links koptekst 1, link koptekst 2. Hier voorkom je echt een beetje kopzorgen mee, want je hoeft hier nooit meer iets aan te doen. In principe, als je niet zo goed. Nou dan nog even over het borgen van digitale toegankelijkheid. Ik denk echt nogmaals dat jullie een belangrijke rol hebben in het documenteren van die eisen. Een aantal zaken die je dus van tevoren kan kan vastleggen is van goh, als je nog in de design fase zit, hoe ga je ervoor zorgen dat de juiste tekst alternatieve van bijvoorbeeld componenten van de gebruikersinterface. Dat die vastgelegd worden kun je bijvoorbeeld zelf al aan de iconen tekst alternatieve plakken en de manier waarop jij het designed, bijvoorbeeld een notitie of misschien zelfs wel echt in de achtergrond of misschien met documentatie die je echt extra aanlevert bij het aanleveren van je designs. En hoe meer je dit doet, hoe meer je de rest van de collega's achterin het designproces ontzorgt. Maar die kan je ook gewoon garanderen dat het goed gaat en ik denk dus echt dat hier gewoon echt een hele belangrijke rol zit voor designers. Ik denk ook trouwens dat designers vaak meer affiniteit hebben met de gebruiker. Natuurlijk omdat het stukje user vaak in de functie zit en dat is gewoon een belangrijk punt, ook om mee te nemen. Besef je goed dat jij misschien het allerbest in kaart hebt hoe de gebruikers nou daadwerkelijk interacteren met een bepaalde user flow. Ga er niet vanuit dat iedereen dat ook zomaar weet natuurlijk. Nou, ook dat stukje met lees meer, gaf ik nou net een voorbeeld voor. Maar bijvoorbeeld. Let dus ook op dat je bijvoorbeeld meerdere designs oplevert als je kan dat bij herschalen bijvoorbeeld dat je duidelijk kan zien wat er bij herschalen moet gebeuren. Als je dat iemand namelijk zelf laat invullen en zij kennen deze WCAG regels niet goed en dan krijg je misschien dat dingen vergeten worden. Laat de nieuwe componenten ook toetsen en werk zeker met component libraries waar je kan. Wat met aantal dingen die je dus goed kan testen is bijvoorbeeld zoom in tot 200 en 400% en denk na: Is er geen verlies van content en of functionaliteit? Gebruik een keer schermlezer om zelf te toetsen, bijvoorbeeld met NVDA of voice-over als je op een Mac zit. Denk aan, probeer een keer het toetsenbord te bedienen en probeer dan gewoon goed na te denken Is dit nou een fijne werkwijze? En neem ook zeker gebruikerstesten mee. Dit blijft namelijk een continu proces en ik wil eigenlijk ook iedereen uitdagen. Ga dit opnemen, gewoon in je day-to-day workflow. Ik vind namelijk dat zeker tegenwoordig ook met de wetten die er zijn, dat het opleveren van toegankelijke designs eigenlijk gewoon bij een kwalitatief opgeleverd design zitten. Kijk of inmiddels nog wat vragen hebben. Ik heb wat vragen, maar ik kom daar zometeen even op terug tijdens het vraag momentje. Probeer van tevoren altijd goed hierover na te denken, want achteraf repareren kost tijd, kosten en frustratie. En ik denk ook dat het fijn is om natuurlijk sneller te voldoen aan de wetgeving. En veel innovatie die gedaan is, is gewoon altijd gedaan in het kader van toegankelijkheid. Denk aan tekst naar spraak, wat natuurlijk ooit voor digitale toegankelijkheid bedoeld was, maar ook bijvoorbeeld dingen als de typemachine voor mensen die dus niet goed konden schrijven. Dan ben ik nu aangekomen bij de laatste 5 minuten en dan eindig ik altijd nog even met wat vragen. En ik heb al een vraag klaarliggen, namelijk zou je in plaats van een vlaggetje voor Engels en een vlaggetje voor Nederlands ook een vlaggetje kunnen toevoegen om alternatief pagina's voor mensen met functiebeperkingen te komen? Ja, dat zou kunnen... alleen ik raad dit met klem af. Een van de redenen is moreel, omdat je eigenlijk dan nog zegt hey, hier is de normale website en als jij het nodig hebt dan moet jij maar op het digitale toegankelijke platform gaan waar dan misschien functionaliteit ontbreekt, waar het toch anders werkt, et cetera, et cetera. En als je je aan de WCAG houdt, dan zorg je er dus voor dat je maar één platform nodig hebt en dat dat platform eigenlijk voor iedereen bruikbaar is. En dat is natuurlijk veel fijner als je die gelijkwaardigheid creëert binnen je content en functionaliteit, zodat je eigenlijk niet rekening hoeft te houden met goh, de blinde mensen moeten daar zijn en de dove mensen moeten daar zijn. Maar dan zeg je gewoon, onze website is voor iedereen beschikbaar. Het mag in principe wel, maar let dan ook bijvoorbeeld op dat wij, dan extra en dat dan ook goed gecontroleerd wordt op die toegankelijke omgeving, van is alles ook digitaal toegankelijk En dan toetsen we het nog steeds op de WCAG. En als je dan twee producten gaat beheren waarvan eentje dus niet goed is en eentje wel goed, onder de WVAG in ieder geval. Dan zou ik zelf denken dan is het beter om in te zetten op je centrale product WCAG compliciet te maken in plaats van bezig te gaan met een nieuwe extra versie van wat je dan ook aan het doen bent, om die dan maar digitaal toegankelijk te maken. Waarom niet gewoon direct je huidige platform? Zeker als je ziet dat, en als je me nu nog niet gelooft, dan spar ik daar heel graag met je over. Maar ik geloof er echt in dat elk design welk wild creatief design ook mogelijk is, dat dat kan voldoen aan de WCAG normen. Met een beetje creatief werk en een beetje kennis van de inhoudelijke uitvoering van de WCAG, denk ik echt dat elk design wat je maar kan op dromen dat dat zou kunnen werken. Dus nogmaals, en om dan een antwoord geven; ja, het mag. Nee, ik raad het zeker af omdat je dan eigenlijk alsnog zegt dat er twee kampen zijn, wat natuurlijk niet de beste en ideale ervaring is voor iedereen. Helemaal duidelijk, zegt Eline. Hebben jullie verder nog vragen van mij? Ik heb nog wel ruimte voor een vraagje. Neem ondertussen even een klein slokje water. Oké, het blijft nog even stil in mijn chat, dus dan gaan we gewoon lekker door naar wat kan je nou nog meer? Nou, wat we nu hebben gedaan is een vijftal slides uit mijn UX training. Heb je nou zoiets van, dit was echt super interessant, maar ook wel heel bondig, fair dat is het ook. Je kan deze training namelijk gewoon in zijn volledigheid bij ons volgen. En dan in plaats van 1 uur, spenderen we hier 6 uur op, en dan kom ik gewoon lekker langs bij jou op kantoor en gaan we je gewoon lekker de hele dag over sparren. En dan heb ik nog meer praktische voorbeelden en nog meer informatie en gaan we ook samen designs uitwerken. Dus als je echt een op maat training wil, dan kan je ons vinden daarop. Heb je nou zoiets van nou, ik ben eigenlijk geen UX’er, maar hoe zit het nou met puntje puntje? Je ziet hier op je scherm een lijst met trainingen die wij aanbieden en we hebben op dit moment ook nog plek op onze opleiding tot WCAG specialist. Als je echt een stap verder wil gaan kun je je zeker inschrijven en op 30 oktober al starten met deze opleiding. Nou, dat even over de andere trainingen die we hebben. Hierover vind je meer op cardan.com. Kijk daar vooral eens even lekker rond. En als je nou specifieke vragen hebt daarover mag je mij altijd mailen. Dat is joris@cardan.com. Nou en om dan af te sluiten heb ik nog een paar cadeautjes voor jullie, namelijk onze checklist voor digitaal toegankelijk UX design. Deze kun je gewoon naast je designs leggen en samen gaan kijken: Goh, heb ik me overal voldoende aan gehouden? Mooie beknopte manier om dit te checken, heb ik het goed gedaan. Verder krijg je van ons natuurlijk deze recording zeker nog opgestuurd. Die gaan we even digitaal toegankelijk maken. En dus daarmee bedoel ik vooral ondertitelen en die zul je van ons ontvangen als je deze als je hebt ingeschreven voor deze webinar kun je dus altijd even terugkijken en eventueel nog gebruiken voor andere inspiratie en dergelijke. En als laatste het allermooiste cadeau is dat we iedereen die heeft deelgenomen aan deze webinar 5% korting bieden op het afnemen van de training digitaal toegankelijk UX design, dus had je nou zoiets van, het klonk allemaal super leuk en ik wilde er eigenlijk nog veel meer over weten. Besef je dus goed dat wij 5% korting bieden voor afname van deze training. Dat kan incompany, maar ook open trainingen aan. Als je nou gewoon in je eentje die trainingen volgen, dan hebben we altijd klasjes lopen waar je dus met andere mensen samen kan gaan leren over digitaal toegankelijk UX design. Een vraag: is dit cumulatief? Die 5%? Die 5% is eenmalig per training natuurlijk. Het is inmiddels 1 voor 1, en ik wil jullie gewoon wederom bedanken voor jullie aandacht vandaag, voor het bijwonen van deze e-learning. Ik hoop dat jullie het een beetje interessant hebben gevonden. En als je nou nog vragen hebt, schroom je niet om ons even te mailen. trainingen@cardan.com, joris@cardan.com of info@cardan.com. Je kan kiezen uit wat je wil. Je kan ook gewoon ons contactformulier op de website invullen. Kijk maar wat je doet, als je ons maar weet te vinden. En voor nu hartstikke bedankt en dan gaan we lekker afronden. Wens jullie nog een hele mooie.. nu vandaag inmiddels hier wat zonnigere middag en natuurlijk heel veel succes voor iedereen. Dank je wel!