Met handgebaren en spraak navigeren door een website?

Zo werden SMS-berichten ontwikkeld voor doven, omdat ze daarmee makkelijker konden communiceren via mobiele telefoons. Nu er meer dan 23 miljard berichten per dag worden verzonden, is de SMS grondlegger van onze universele communicatie wereldwijd.

Toegankelijkheid in je design en code zorgt voor begrijpelijke en makkelijk bedienbare gebruikersinteracties. Enerzijds voor mensen met een beperking, wat een grote groep mensen omvat. In Nederland tellen we ongeveer 1,5 miljoen doven/slechthorenden en 300.000 blinden/slechtzienden. Anderzijds verbeter je de ervaring voor iedereen, net zoals gebeurde met de nu universele SMS.

In een vorige blog doken we in de wereld van digitale toegankelijkheid. We schreven een handleiding met basisprincipes en over hoe je zelf hiermee aan de slag kon gaan. Deze keer laten we zien hoe we een accessible oplossing voor maaltijdenboxleverancier Boerschappen hebben ontworpen.

Onze klant Boerschappen levert direct van de lokale boer producten bij de mensen thuis. Ze willen hiermee de keten niet alleen korter maken, maar ook eerlijker - en de mensen thuis voorzien van gezonde voeding. Op de website en in de app geven ze tientallen recepten. Specifiek hiervoor bouwden we een innovatieve oplossing met oog op toegankelijkheid.

Want je kent het vast wel. Je bent aan het koken, krijgt vieze handen en wil naar stap drie van het recept. Dan moet je ofwel met je vieze handen op je mobiel navigeren of iedere keer je handen wassen. Je hebt hier in principe te maken met een tijdelijke motorische beperking, omdat de interface even moeilijker met je handen te bedienen is. Vanuit eigen motivatie van het team besloten we aan de slag te gaan voor een meer gebruiksvriendelijk - en innovatief - design.

Vanaf de start was iedereen enthousiast, want we hadden het nog niet eerder gebouwd of gezien. Alleen bij de recepten van Albert Heijn zagen we een functie in de app waarmee je het scherm op 'always-on' kan zetten. Dat kan toch beter?

Ieder kwartaal innoveren we voor een van onze klanten en leveren we een proof-of-concept op. Dat kan met een nieuwe technologie, techniek of aanpak. In dit geval bouwden we een kookmodus waarbij de klanten van Boerschappen door een recept kunnen navigeren met behulp van spraak en handgebaren.

Het team is los van elkaar gaan schetsen in Codepen, een webgebaseerde HTML-, CSS- en JavaScript-code-editor waarmee je rechtstreeks in de browser kunt experimenteren. Alle schetsen raapten we bij elkaar en op basis daarvan bouwden we samen een toegankelijk design.

Voor de implementatie van de handgebaren maakten we gebruik van de camera API van de browser in combinatie met een stukje software van Google genaamd Tensorflow, waarmee je de positie van de vingers goed kan herkennen. Deze techniek gebruikten we om bepaalde gebaren te matchen aan bepaalde acties in de browser. Zo kunnen gebruikers bijvoorbeeld wijzen, zwaaien of een vuist opsteken en hiermee naar een volgende stap, vorige stap of naar het begin van het recept navigeren.

Vervolgens vingen we met de Web Speech API gesproken commando’s van gebruikers af, en gebruikten we de Speech Synthesis functies van deze API zodat bepaalde delen van het recept voorgelezen konden worden.

"Waar opletten bij implementatie? Voice en gesture API’s maken gebruik van de camera of microfoon van de gebruiker, dus je hebt altijd expliciet toestemming nodig van hen. In een app is vaak bij installatie al toestemming gevraagd, maar in de browser moet je dit specifiek nog vragen."

Voor nu blijft de innovatiesprint bij een leuke proof of concept, maar we hebben een positieve blik op de toekomst van voice controls en voorleesfeatures. We weten nog niet zeker of de functie van handgebaren snel aan zal slaan, omdat dit nog vrij experimenteel is - en daardoor misschien weinig waarde toevoegt. Zou jij met handgebaren door een website willen navigeren?