Interactie

Tabel navigatie

Uit de tests kwam naar voren dat het voor Roger erg lastig is met zijn eigen screenreader door tabellen te navigeren. Zodoende heb ik na experimenten met aria-labels en andere oplossingen ervoor gekozen de Web Speech API die standaard in chrome zit te gebruiken. Daarmee is het erg makkelijk om exact te definieren wat er voorgelezen moet worden.

Omdat het voor Roger meermalen vervelend bleek als de screenreader lang door bleef gaan met lezen of veel te snel door tabellen raasde, heb ik besloten per rij informatie beschikbaar te maken.

Selectie van rijen

Het was al mogelijk om door de tabel heen te tabben, maar ik heb nu toegevoegd dat de rij die geselecteerd is uitgelicht wordt. In het screenshot hierboven zie je dat de geselecteerde rij ook vergroot is. Dat kan de gebruiker bereiken door op de plus toets te drukken. Aanvankelijk had ik ingesteld dat automatisch de geselecteerde rij wordt vergroot, maar later kwam ik er achter dat elementen juist niet extra groot gemaakt moeten worden voor Roger, omdat hij zelf al zijn screenreader gebruikt om op zijn scherm in te zoomen. Wanneer een element dan heel groot is, wordt het juist onduidelijker.

Ook is het nu mogelijk door op de rijen te klikken een rij uit te lichten en vanaf daar verder te kunnen tabben.

Meescrollen

Bij het navigeren door de tabelregels, heb ik ingesteld dat de regel die geselecteerd is altijd in het midden van het beeld blijft. Zo hoeft Roger niet het gedeelte van het scherm waarop hij is ingezoomd te verplaatsen.

Pagina overgangen

Een andere bevinding bij het testen was dat Roger niet altijd snel door had wanneer hij naar een volgende pagina ging. Daarom heb ik toegevoegd dat wanneer een nieuwe pagina wordt aangeklikt, de hele achtergrond eerst donkerder wordt en daarna weer naar de normale kleur terugkeert. Zo krijgt de gebruiker waar hij ook op het scherm kijkt feedback op zijn acties.

Sneltoetsen

Om het gebruik van de applicatie makkelijker te maken, heb ik verschillende sneltoetsen toegevoegd. Daarbij heb ik geprobeerd intuïtief te bepalen welke toetsen daar handig voor zijn. Hieronder zie je een lijstje van alle sneltoetsen.

• I-toets: lees alle sneltoetsen nog eens voor.
• Escape: ga een pagina terug
• spatie: lees de regel voor
• +-toets: Maak de regel groter
• tab: ga naar de volgende regel.

Om te voorkomen dat de screenreader automatisch te veel gaat vertellen, wordt pas wanneer een tabel is ingeladen enkel gezegd dat er op de I-toets gedrukt kan worden voor meer informatie. Wanneer daarop wordt gedrukt, wordt beknopt en met pauzes tussen elke zin uitgelegd welke sneltoetsen er zijn. Omdat de tabel dan al is ingeladen, kan de gebruiker de sneltoetsen meteen uitproberen.

Wanneer op spatie wordt gedrukt, wordt enkel de geselecteerde rij voorgelezen. Daarna stopt de gesproken tekst. Ik wilde toevoegen dat wat te zien is op de geselecteerde tabelregel in een volzin wordt uitgesproken, maar omdat de gebruiker uiteenlopende bestanden in kan laden, heb ik er voor gekozen dat hij de kop voorleest en dan de waarde en zo alle cellen van de geselecteerde rij af gaat.

Sticky headers

Om altijd duidelijk te houden waar elke waarde in de tabel voor staat, heb ik na het testen de headers van de tabel 'sticky' gemaakt. Dat houdt in dat deze niet verdwijnen wanneer de gebruiker door de tabel naar beneden navigeert, maar altijd op dezelfde plek bovenaan de tabel terug te vinden zijn.

De terug-knop

Ook de terugknop heb ik duidelijker gemaakt. Deze heeft nu een duidelijke rode rand om de mogelijkheid voor interactie direct duidelijk te maken. Daarnaast heb ik gekozen voor de afbeelding van een pijl, omdat dat sneller te interpreteren is dan de tekst "terug." Ook blijft deze net als de headers altijd op dezelfde plek staan, zodat deze makkelijk terug te vinden is.