Wat heb ik gedaan?
Vandaag kregen we de aftrap van het vak human centered design. We kregen een introductie over accessibility en hoe mensen nou eigenlijk met een beperking het werb gebruiken. Met name name mensen die screan reader gebruiken of andere technologien. We werken met de Exclusive Design Principles:
- Study situation — bestudeer goed hoe jouw testpersoon het web en hun computer gebruikt
- Ignore conventions — negeer gangbare ontwerppatronen als dat nodig is, en bedenk een tailor made oplossing
- Prioritise identity — zorg dat de identiteit van jouw testpersoon zichtbaar is in het prototype
- Add nonsense — denk outside the box, ontwerp dingen die we nog niet kennen
Bron: Vasilis van Gemert — Exclusive Design (2018)
Mijn testpersoon is Ihab. Na de introductie ben ik nagedacht over een eerste idee voor hem.
Idee: Mood Intro Wanneer Ihab een pagina laadt, speelt er een kort intro geluid (2 of 3 seconden) dat direct de sfeer en het type pagina aangeeft. Daarna speelt er een zacht achtergrondgeluid dat blijft lopen terwijl hij de pagina gebruikt. Zo weet hij meteen, zonder te lezen of navigeren, wat voor soort pagina hij heeft geopend.
Voorbeelden van sfeergeluiden per paginatype:
- Nieuws / webshop
- Zakelijk
- Natuur
- Event / feest
- Kinder
- Medisch
- Restaurant
- Sport
- Onderwijs
- Bank / finance
Hoe lang duurde het? De hele dag, introductie in de ochtend, daarna nagedacht over het concept en het idee uitgewerkt.
Wat heb ik geleerd? Dat inclusive design en exclusive design twee verschillende benaderingen zijn. Bij exclusive design ontwerp je niet voor iedereen tegelijk, maar juist heel specifiek voor een persoon.
Wat ga ik morgen doen? Voor dinsdag neem ik een aantal vragen mee voor Ihab zodat ik mijn idee beter kan uitwerken en aansluiten op hoe hij het web daadwerkelijk gebruikt. Ik wil weten hoe hij nu pagina's ervaart, wat hij fijn of frustrerend vindt, en of een audio gebaseerde aanpak iets voor hem zou zijn.
Wat heb ik gedaan? Als eerste hebben we een test sessie gehad met Ihab. Ik heb goed geluisterd naar zijn ervaringen en frustraties met screenreaders en spraakberichten. Daarna heb ik mijn notities uitgewerkt en nagedacht over het concept. Het idee is ontstaan om de standaard screenreader te vervangen door een ai stem die emotie kan overbrengen.
Over Ihab:
- Hij heeft zijn eigen toetsenbord bij zich waarmee hij kan typen
- Hij stuurt veel spraakberichten als hij geen tijd heeft om te typen dicteren werkt soms niet goed
- Spraakberichten ontvangen vindt hij fijn, omdat er meer emotie in zit
- Slecht leesbare websites zijn een groot probleem — afbeeldingen zonder alt tekst zijn voor hem een must om te hebben
- Hij wil iets wat er nog niet is
Wat is het probleem?
- Lange spraakberichten (soms 4 minuten) luistert hij pas later hij stelt het uit omdat het zoveel tijd kost
- Screenreaders hebben geen emotie, ze klinken saai en neutraal
- Irritaties komen vaak door elementen die niet goed gelabeld zijn
Oplossingsrichtingen vanuit Ihab:
- Een sneltoets waarmee hij kan pauzeren zodat hij de tijd heeft om te reageren
- ai stemmen zijn menselijker en hebben meer emotie
- Het belangrijkste is tekst en spraak — het draait altijd om text to speech
- Screenreaders zijn saai en dat wil hij anders
Hoe lang duurde het? De testsessie, uitwerken van de notities en observaties en bedenken van concept nam de hele dag in beslag.
Wat heb ik geleerd? Ik heb geleerd hoe Ihab het web ervaart en wat zijn grootste frustraties zijn. Het belangrijkste inzicht is dat screenreaders geen emotie hebben,terwijl Ihab juist emotie heel belangrijk vindt want dat vertelde hij ook over zijn voorkeur voor spraakberichten.
Wat ga ik volgendeweek doen? Volgende week ga ik onderzoeken hoe de Web Speech API werkt en wat de mogelijkheden zijn van ai stemmen. Ik wil een eerste kleine test opzetten waarbij tekst wordt voorgelezen met een menselijkere stem, zodat ik volgende week iets concreets kan testen met Ihab.
Na de voorgang gesprekken die ik heb gehad met Leonie ben ik er achtergekomen dat het heel normaal is dat ik nog niks heb. Ihab is een ik wil natuurlijk maken wat goed is. Ik was nog heel erg aan het struggelen omdat ik nog geen idee heb wat ik wilde maken. Uit mijn observaties is hij opzoek wat hem helpt met spraakberichten en of ai stemmen voor screen readers. Dat lijkt voor mij best niet haalbaar, ookal wil ik hem helpen met zijn problemen. Met de voortgang gesprekken met leonie heb ben ik op nieuwe ideen gekomen. Zo zou ik misschien iets kunnen namaken dat dat iets voor whatsapp is zodat hij makkelijk zijn spraakmemo;s op stop kan zetten. Want nu als die een spraakopname krijgt dan wilt hij eig gelijk antwoord geven maar dat kan dat dus niet. Hij luisterd hem eerst helemaal af en maakt ie zelf een spraakmemo en gaat wilt hij dingen vertellen maar dan vergeet hij weer waar het over ging in de spraakmemo die die kreeg. Of ik ga iets maken zodat op elke pagina hij een soort intro sound hoort en dan een beetje een sfeer krijgt van de website.
Wat heb ik gedaan? Vandaag test gehad met Ihab.
Hoe lang duurde het? 2 uurtjes test met Ihab.
Wat heb ik geleerd?
- Ihab wil de interface besturen met sneltoetsen, niet met de muis
- Een Whatsapp achtige interface voelt voor hem vertrouwd
- Het idee van een voicebericht speler met markeer functie slaat aan
Wat ga ik volgende week doen? Volgende week ga ik het verder en groter uitwerken. Weet niet of ik de geluidjes ga gebruiken of niet. Zoals dat je begint met opnemen. Maar misschien iets van spraak terug van "neem spraak opname op" ipv een kleine soundje.
In week 2 ben ik erachter gekomen dat het mood afspeler idee te vaag was voor Ihab, hij wilde iets concreets waarmee hij echt zijn spraakmemo's beter kan gebruiken. Hewhatsapp interface idee voelt veel beter, wat hij ook in het dagelijks leven gebruikt. Ik heb besloten om de focus te leggen op een keyboard voicebericht speler waarbij je met sneltoetsen kunt navigeren, markeren en reageren.
Wat heb ik gedaan? de keyboard interface uitgewerkt voor de voice memo prototype van Ihab. Ik heb een nieuw systeem bedacht en gebouwd met de volgende functies: Space voor play/pause pijltjes voor 5 seconden voor/achteruit alt + m om een moment te markeren als badge alt + G om naar een markering te springen
Bronnen: MDN — KeyboardEvent · WebAIM — Keyboard Accessibility
Hoe lang duurde het? Hele dag mee bezig geweest.
Wat heb ik geleerd? Door vooraf na te denken over welke acties Ihab het vaakst nodig heeft, kon ik een logische snelkoppelingenstructuur opzetten. Het gebruik van Alt als modifier voorkomt conflicten met standaard browsergedrag.
Wat ga ik morgen doen? De interface testen met Ihab en kijken waar hij vastloopt.
Wat heb ik gedaan? Gebruikerstest gedaan met Ihab. Hieruit kwamen een aantal duidelijke bevindingen: stoppen en pauzeren moeten dezelfde knop zijn, de screenreader liep steeds over de interface heen waardoor de focus aangepast moest worden, snelkoppelingen werkten niet als de focus in een tekstveld zat, de afspeelsnelheid was te hoog voor Ihab en de markeerfunctie miste audio feedback en navigatie. Op basis van de test heb ik de shortcutlijst bijgewerkt en een to do opgesteld voor de vervolgstap.
Hoe lang duurde het? Hele dag mee bezig geweest.
Wat heb ik geleerd? Dat snelkoppelingen die logisch lijken voor een ziende gebruiker anders uitpakken voor iemand die een screenreader gebruikt. Focus management is cruciaal als de screenreader de interface overneemt, verliest de gebruiker de context van wat er speelt.
Bronnen: MDN — ARIA: role="slider" · W3C — WAI-ARIA Authoring Practices · MDN — :focus-visible
Wat ga ik volgende week doen? Prototype verder uitwerken, readme schrijven met inzichten, audio sounds toevoegen bij markering en navigatie, en focus management fixen zodat de screenreader niet over de controls heen loopt.
Week 3 was de week dat het prototype echt vorm begon te krijgen. De testsessie met Ihab was heel waardevol ik merkte dat ik veel aannames had gemaakt over hoe hij zou navigeren. Het grootste inzicht was dat focus management alles bepaalt: als de screenreader focus heeft op een element dat ik niet verwacht, valt de hele sneltoetsstructuur weg. Ik ga volgende week de screenreader laag echt goed aanpakken.
Wat heb ik gedaan?
Audio ondersteuning toegevoegd via de web audio API. Concreet:
- Geluidseffecten bij afspelen, pauzeren, versturen en springen naar markeringen
- Snelheid aanpassen met pijltjes omhoog/omlaag
- Escape verlaat het tekstveld en geeft spraakfeedback
- Spraak via speechsynthesis bij versturen en terugkeren naar markering
Bronnen: MDN — Web Audio API · MDN — SpeechSynthesis · MDN — HTMLMediaElement · MDN — ARIA live regions
Hoe lang duurde het?
De hele dag.
Wat heb ik geleerd?
Hoe de web audio afspeeld, hoe je speach synthesis kan combineren en hoe je keyboard events afhandeld zonder dat ze botsen met invoervelden.
Wat ga ik morgen doen?
Testen met Ihab.
Wat heb ik gedaan?
Getest met Ihab. De volgende problemen zijn naar voren gekomen:
- Screen reader praat te veel door de UI heen
- Sneltoetsen worden niet goed gehighlight bovenaan de pagina
- alt m is overbodig m markeert al
- Bug die ik had: teruggaan naar vorige markering springt naar het huidige moment in plaats van de vorige (bijv. zit op 18s, wil naar 6s, springt naar 12s)
- Sneltoetsen werken niet in het tekstveld
- Spatie moet alt + spatie worden zodat het ook in het tekstveld werkt
- Focus zat niet goed bij het spraakbericht sprong naar markering in plaats van tekstveld
Hoe lang duurde het? De hele dag.
Wat heb ik geleerd? Focussen op de snel toesten en op de screen reader. Ben er nog niet uit gekomen met de screan reader. Die moet ik nog fixen
Wat ga ik volgende week doen?
Screen reader gedrag fixen zodat hij niet door de UI heen praat. Spatie omzetten naar alt+spatie zodat het in het tekstveld werkt.Sneltoetsen overzicht opschonen en beter zichtbaar maken. Kleine navigatiebugs zoals de markering vallen pas op in echte gebruik.
In week 4 heb ik alle bugs uit de test van dinsdag gefixed. De drie grootste verbeteringen: de screenreader leest niet meer door de hele interface heen, de markeernavigatie werkt nu. Tot slot is de shortcutlegenda naar boven verplaatst.
Er zijn nog een paar fouten is dat de screan reader over de text gaat van de gebruiker als de gebruiker iets markeert of terug markeert. Hier moet ik nog even naar kijken.
Probleem 1 — screen reader praatte door de audio heen speechSynthesis volledig verwijderd. Tab pauzeert de audio automatisch zodat VoiceOver nooit tegelijk met de audio spreekt.
Probleem 2 — screen reader zei te veel Decoratieve elementen waveform, tijdsduur, progress bar gemarkeerd met aria-hidden. Overbodige live regions en status updates verwijderd.
Probleem 3 — HTML-structuur klopte niet Pagina opnieuw opgebouwd met correcte semantische structuur h1 voor de paginatitel en duidelijke labels op alle interactieve elementen.
Probleem 4 — VoiceOver zei te veel bij de play knop De play knop is veranderd van een button naar een div met tabindex="0" Een button triggert altijd VoiceOver hints ("Je bevindt je momenteel op een knop..."). Een div niet. VoiceOver zegt nu alleen "Afspelen" en zwijgt daarna.
Probleem 5 — sneltoetsen niet vindbaar Er staat een apart tekstelement vóór de play knop in de tab-volgorde. Als Ihab door de pagina navigeert hoort hij eerst de sneltoetsen, daarna de play knop.
Herksansing Tijdens de herkansing hebben we gekeken naar de toegangkelijkheids probleem die ik eerst had. Dat met de screenreader had ik beter gefix. Maar dat komt omdat ik er een div van heb gemaakt, zodat de screen reader niet de volledige knop op noemt. Ook had ik een lijst met de snel toetsen en die sprak die wel op. Alleen kon er niet door heen tappen omdat ik de aria-hidden op true had gezet. Dat is een foutje.