Ik heb recent de browser test uitgevoerd. Ik ben erg tevreden met het resultaat. De test was vrij positief. Wat me mij opviel is dat wanneer javascript uit staat het filteren niet meer mogelijk is. Dit kan ik gelukkig gemakkelijk oplossen door de filter methode server sided af te laten handelen wanneer javascript niet beschikbaar is.

De website die ik gebruikt heb voor het testen van me browser is mijn progressive-web-apps project. De code daarvan is hier terug te lezen. En de live demo is hier terug te zien.

Waarom dit project?

Ik heb tijdens de oba een voice interface gemaakt met behulp van Google assistance. Tijdens Progressive-web-apps werkt ik verder aan aan mijn web app from scratch project.

Hoe heb ik de feature's getest.

Afbeeldingen uitzetten

Ik heb in mijn browser instellingen de afbeeldingen uitgezet. Als nu blijkt dat de afbeeldingen zo belangrijk is dat de content niet meer te begrijpen is (omdat er bijvoorbeeld geen alt tag aanwezig is) of dat de layout zo dusdanig stuk gaat dat er niet meer normaal door de website te navigeren valt dan is dit een groot probleem.

Custom fonts uitzetten

Custom fonts kan je testen door gewoon in de inspecter de font's uit te zetten. Als er geen fallback font is, of een websafe font dan kan dit een groot probleem veroozaken.

Kleur uitzetten en kleurenblindheid

Dit is een van de makkelijkere feature's om te testen. Er zijn een heleboel website's die kunnen testen of je een goed contrast hebt. Ook zijn er tools om kleurenblindheid na te bootsen.

een muis of trackpad

Dit kan ik testen door niet aan mijn muis en trackpad te zitten en te proberen om door me site te navigeren.

Breedband internet uitzetten

Je kan in de dev tools je internet throttelen en testen of je site het nog doet. Je kan natuurlijk ook je internet helemaal uitzetten.

Javascript uitzetten

Je kan in je settings je javascript uitzetten.

Cookies niet accepteren

Dit kan je testen door niet de cookie's te acceptern.

De feature test

Afbeeldingen uitzetten

De website werkt zonder afbeeldingen nog naar behoren en de alt tags geven de nodige informatie weer. Ik kan dus zonder afbeeldingen gebruik maken van de website (en mogelijk data besparen)

Custom fonts uitzetten

De website lijkt geen gebruik te maken van custom fonts. Wel zijn er websafe fallback fonts gedefineerd dus ik voorzie geen problemen.

Kleur uitzetten en kleurenblindheid

Ik heb checkmycolours.com gebruikt en de site geeft aan dat ik een goed contrast heb. Ook heb ik mijn audits niet horen klagen

een muis of trackpad

Ik kan goed door de site navigeren zonder muis. Dit kan ik doen door tab en shift tab te gebruiken. Bij chrome gaat dit lekker, maar bij safari gaat dit minder. Het lijkt erop dat de A tags niet gefocust word tenzij ik de voice over aanzet. Oop Firefox ervaar ik een vergelijkbaar probleem.

Breedband internet uitzetten

De site werkt nog wel, maar het zou wel een goede enhancement zijn als ik de user feedback zou geven dat er data opgehaald word aangezien dit wat langer duurt. Ook kan je de website in offline gebruiken, maar alleen de pagina's die je voorheen hebt bezocht.

Javascript uitzetten

Alles doet het behalve de filters. Ik kan dit oplossen door de select een submit button te geven wanneer er geen client sidder javascript aanwezig is. Ook zou het niet een slecht idee zij om bijvoorbeelde de filter pas weer te geven wanneer javascript actief is.

Cookies niet accepteren

Applicatie maakt Geen gebruik van cookies en gaat hier dus niet op stuk

Localstorage uitzetten

Applicatie maakt geen gebruik van de localstorage en gaat hier dus niet op stuk.

Browser Test

Safari apple iPod touch iOS 6.1.3

Alles werkt behalve de filter. Dit kan ik fixen door de filter ook server sided afgehandeld te laten worden als javascript niet beschikbaar is. Ook kan het zijn dat de filter het wel doet maar dat de informatie langzaam word binnengehaald. Als dit het geval is dat zou ik feedback moeten laten zien aan de gebruiker dat de pagina bezig is met het binnenhalen van de informatie.

Ie11 nokia lumia 620 windows phone 8.1

Alles werkt behalve de filter. Dit kan ik fixen door de filter ook server sided afgehandeld te laten worden als javascript niet beschikbaar is. Ook kan het zijn dat de filter het wel doet maar dat de informatie langzaam word binnengehaald. Als dit het geval is dat zou ik feedback moeten laten zien aan de gebruiker dat de pagina bezig is met het binnenhalen van de informatie.

Chrome 80 htc nexus 9 android 7.1.1

De applicatie ziet er goed uit en ik kan succesvol van beginscherm naar detail pagina navigeren. Ik ben tevreden met het resultaat.

Chrome (Desktop)

In chrome lijkt alles naar behoren te werken en zie ik verder geen problemen. Dit heeft mogelijk te maken omdat de applicatie in de nieuweste variant van edge gebouwd is en die draait op chromium

Firefox (Desktop)

In firefox wil hij niet de a tags focussen. Daardoor kan niet helemaal goed door de pagina’s navigeren. Dit is een mac probleem zoals uitgelegd in dit articel. https://stackoverflow.com/questions/11704828/how-to-allow-keyboard-focus-of-links-in-firefox/11713537

Safari (Desktop)

In safari lijken de a tags focussen. Daardoor kan niet helemaal goed door de pagina’s navigeren.

De Screenreader.

Al was het ff oefenen hoe een screenreader werkt. Was mijn website wel goed toegankelijk door middel van een screen reader. Een screenreader zal goed werken zolang je semantische html hebt en niet doormiddel van tabindex de tab order verstoort. Je kan dit testen door op windows je narrator aan te zetten, en op mac in je accesability settings te gaan en daar Voice over aan te zetten. Ik heb deze test uitgevoerd door me beeldscherm uit te zetten en geprobeerd om met alleen geluid naar de detail pagina te gaan binnen me website en hier de nodige informatie uit te halen.

Disclaimer

Vanwege het coronavirus is het voor mij helaas niet meer mogelijk foto's te maken van de mobiele devices hoe het eruit ziet.