Testen | sessie 3 - lennartdeknikker/web-design-1920 GitHub Wiki

Tijdens de derde meeting met Roger hadden de meesten van ons al enkele prototypes beschikbaar. Deze zijn omstebeurt door Roger getest. De resultaten daarvan en links naar de prototypes zijn hieronder te vinden.

Test 1 - Sjors

https://sjors-web-design-1920.herokuapp.com/

Lighthouse scores worden gemeten voor een website die ingevuld wordt. Daarbij is het voor Roger met behulp van de custom screen reader in de pagina mogelijk om de scores uit te lezen. Deze worden ook weergegeven in een staafdiagram.

Voor Roger was het onduidelijk wat SEO is. Hij weet ook niet wat een PWA is. Deze score is voor hem misschien minder relevant.

Vragen van Roger

Hoe wordt gebruiksvriendelijkheid of accessibility gemeten?
Op welke punten scoort de website dan precies goed?

Sjors wil meer context aan de metingen toevoegen. Nadat Roger de website 1 keer had uitgeprobeerd, wist hij zich al goed door de pagina te navigeren.

Terwijl de lighthouse scan wordt uitgevoerd ziet Sjors een mogelijkheid om iets leuks toe te voegen. Wat dat precies gaat zijn weet hij nog niet.

Wanneer een webadres verkeerd wordt ingevoerd, is het lastig voor Roger om te weten wat er mis gaat.

Roger vind het fijn dat het lekker eenvoudig is.

Test 2 - Lennart

https://trusting-goldstine-720ac9.netlify.app/

Het blijkt voor Roger nog goed mogelijk om bestanden te selecteren voor een input type file.

Test 3 - Nick

https://countnick.github.io/web-design-1920/

In een datavisualisatie zijn aangegeven punten vaak erg klein en per definitie slecht zichtbaar. Nick wil maken dat Roger kan vragen om meer informatie. Hij maakt daarbij gebruik van de microfoon.

Het is nog onduidelijk welke staaf in het diagram geselecteerd is.

Nick wil een lijndiagram maken waar je tegen kan praten om informatie daar uit te halen.

Test 4 - Simone

https://web-design-simone.herokuapp.com/

Simone was eerst bezig een grafiek duidelijker leesbaar te maken. Ze wil toevoegen dat met het toetsenbord informatie uit de grafiek ontsloten kan worden.

De play en pauze knoppen zijn voor hem wel goed te gebruiken.

Daarnaast heeft ze twee grafieken. 1 is ingevuld en de ander niet. De ingevulde is voor hem beter waar te nemen. Ze wil aan de grafiek nog audio-ondersteuning toevoegen. Voor Roger zou het fijn zijn als de waarden aan de grafiek nog beter leesbaar worden gemaakt.

Test 5 - Bas

audiogedeelte werkt nu even niet, maar op de pagina wordt in eerste instantie alleen basisinfo voorgelezen. Daarna is met audio door de grafiek heen te bewegen.

Met Supernova, wordt de grafiek nog overgeslagen. Alleen de titel van de grafiek wordt genoemd. Wanneer de audio werkt, kan Roger over de puntjes van de grafiek bewegen en voor elke x-coordinaat wordt dan informatie over dat punt voorgelezen. De popup is voor hem wel leesbaar. Voor ingewikkeldere grafieken zou dat wel lastig kunnen worden.

Hij heeft grote letters en veel contrast gebruikt. De grafiek zoals deze er nu uit ziet is voor Roger erg duidelijk.

Test 6 - Tabish

https://tnanhekhan.github.io/web-design-1920/

Tabish heeft zijn tabel geupdate. de data is goed leesbaar voor Roger. Roger kan nu tabben door de tabelregels. Dan wordt voorgelezen in een lopende zin hoeveel coronagevallen er voor die dag waren.

Hij heeft nu arialabels toegevoegd om dat voor elkaar te krijgen. Dit werkt al een stuk beter met de screenreader dan de vorige keer, omdat deze labels niet overgeslagen worden.

De kleuren en data zijn voor hem heel overzichtelijk en duidelijk leesbaar.

Test 7 - Kevin

https://qiubee.github.io/web-design/

Heeft de kleuren aangepast en zijn concept aangepast. Supernova vertelt nu de data in lopende zinnen, maar er zijn nu geen visuele elementen meer zichtbaar. De tabel is nu volledig omgezet naar tekst. De visuele weergave wordt wel nog toegevoegd. Daarnaast wordt omlijnd wat wordt voorgelezen. Dat is voor Roger wel duidelijk. De omkadering is nog niet gelijk met waar de screenreader aan het lezen is.

Welke sneltoetsen van Supernova gebruikt Roger?

Hij heeft een spiekbriefje maar de combinaties die hij veel gebruikt zijn:

ctrl+enter
ctrl+plus
ctrl+space

De screenreader werkt wel nog slecht met heel veel websites. werken met de screenreader ervaart hij als het leren van een nieuwe taal.

Test 8 - Max

https://mordock.github.io/web-design-1920/

de custom screenreader geeft eerst stapsgewijs uitleg. De uitleg stopt wel wanneer de gebruiker naar de 'volgende' knop tabt. Er verschijnt vervolgens een tabel waar Roger dan doorheen kan tabben, maar er gebeurt niks wanneer hij dat doet. Hij kan er wel op klikken.

Wat vind Roger van zo'n custom screenreader in een webpagina?

Het is vervelend als ze door elkaar praten. Supernova is hem aangeraden en daarom werkt hij daar maar mee. Het is misschien beter een gebruiker te laten kiezen welke screenreader hij gebruikt. Ook de custom reader uit kunnen schakelen.

Test 9 - Ramon

https://webdesign-ramon.netlify.com/ (op mobiel)

Hij heeft verder gewerkt aan zijn mobiele onzichtbare datavis. Een deel van de tekst op het scherm is voor hem niet zichtbaar. Dat valt er buiten. Hij ziet een geluidsfragment en drukt op play. Er zijn nog wat mankementen, maar die zijn vooral voor Ramon duidelijk, omdat we slecht kunnen zien wat er met de telefoon gebeurt. Hij maakt daar zelf notities bij. Door de telefoon te kantelen moet het mogelijk zijn door een tabel te navigeren. Hij gebruikt de screenreader die standaard in zijn iPhone zit wel regelmatig. Wanneer die uit staat werkt het wel naar behoren, maar wanneer die ook aan staat, gaat alles door elkaar. Dat werkt niet.

Roger vindt dit concept origineel en vindingrijk en door de beweging heel intuïtief werken.

Test 10 - Wouter

https://ally-tester.herokuapp.com/

Ook Wouter heeft een website tester gemaakt met lighthouse. Wanneer een website getest wordt, klinkt er applaus als er een hoge score is. Als grappige toevoeging heeft hij een bewegend icoon van een mannetje die zich in een rolstoel voortbeweegt als laadicoon toegevoegd. De verbeterpunten worden ook weergegeven. Alle resultaten staan in hoog contrast op een donkere achtergrond. Met groene tekst is een positieve score weergegeven.

De lighthousescore voor runningblind.nl is erg hoog, maar deze site moet juist verbeterd worden. De score is dan ook gebaseerd op de technische standaarden, maar niet op hoe de website gebruikt kan worden. Roger zou graag dan feedback willen kunnen geven.

Wouter wil een persoonlijke omgeving creëeren waarin Roger zelf gegevens over toegankelijkheid van websites bij kan houden.

Oranje op donkergrijs is slecht zichtbaar. Het liefst ziet hij alle tekst wit.