Accessibility features op CMD livesite testen

Annevd commented 2 months ago

User story: Als bezoeker wil ik toegankelijkheid features zien en kunnen aanpassen

Taak: Accessibility features op CMD livesite testen, wat werkt wel, wat werkt niet?

Annevd commented 2 months ago

25/9 Testen Accessibility features

Ik heb ondervonden dat de dark mode functie op een MacBook niet werkt.

Annevd commented 2 months ago

26/9 Testen Accessibility features

De button zelf

Functionaliteit:

De accessibility button op zich werkt overal goed. Op kleine en grote schermen is het duidelijk te zien en opent het menu zonder haperingen.

Het menu

Functionaliteit:

De dark mode checkbox werkt goed, je kan hem zonder moeite aan en uit zetten.
Ook de checkbox voor grotere letters werkt zoals behoren.
De vertaal optie daarentegen werkt niet goed. Toen ik voor het eerst de verschillende functies in het menu gebruikte werkte alles goed, en kon ik de site vertalen naar verschillende talen. Maar na een aantal keer dark mode/grotere letters te hebben aan/uit geklikt, was het selecteervakje weg, en kon ik geen talen meer kiezen.
Ook worden alle functies weer gereset wanneer je van pagina wisselt.

Ontwerp:

Het ontwerp van het menu kan naar mijn mening nog wel iets netter. Door dat de 'vertaal de site' tekst niet uitgelijnd staat met de andere tekst komt het een beetje chaotisch over. Veel gekker moet het ook niet worden, omdat deze functies voor alle gebruikers overduidelijk moeten zijn.

Dark mode

Functionaliteit:

Het gebruik van dark mode werkt zoals het bedoelt is. Echter het enige wat veranderd is de achtergrondkleur van de body. Op de homepage maakt dit amper verschil:

Light/Dark Homepage

Op bijvoorbeeld de stekjes pagina is het verschil iets groter:

Light/Dark Stekjesbieb

Iets om over na te denken is dus of het donker maken van de achtergrond wel genoeg is voor een dark mode, aangezien de rest van de content in lichte kleuren blijft.

Daarnaast werkt de dark mode blijkbaar niet op macbook/of safari?

Ontwerp:

Ook is het contrast tussen de groene tekst en de donkere achtergrond niet meer voldoende:

Er moeten dus nog zeker een aantal dingen overwogen en aangepast worden aan de dark mode, vooral als functie dat zou moeten helpen met de toegankelijkheid.

Grotere letters

Functionaliteit:

Na het klikken van de functie 'grotere letters' worden een aantal elementen groter:

Links in het navigatiemenu
Tekst binnen het toegankelijkheidsmenu
Tekst in buttons
Alle overige tekst behalve kopjes/titels

Hierbij schalen vaak ook de foto's mee, als die binnen hetzelfde blok staan.

Ontwerp:

Kopjes/titels worden niet groter, dit is waarschijnlijk omdat deze altijd al groter zijn dan de overige tekst. De enige plek waar ik dit storend vind is in de kaartjes van de stekjes. De tekst van de "bekijk stekje" button wordt hier namelijk groter dan de titel van het stekje zelf. In dit geval zou ik de titel van het stekje dan ook groter maken, je wilt namelijk eerst weten om welk stekje het gaat voordat je er naar gaat kijken.

Default/Grotere letters stekje:

Je zou ook nog kunnen overwegen alle kopjes groter te maken om zo de visuele hiërarchie wel in stand te houden:

Default/Grotere letters kopje:

Vertalen

Functionaliteit:

Bij de functionaliteit van de vertaalopties gaan er nog een paar dingen mis.

Na de eerste keer een vertaaloptie te hebben geselecteerd werkt het prima, de hele homepage werd naar het Engels vertaald via Google Translate. Echter wanneer ik naar een andere pagina wilde gaan kreeg ik een 404 not found error. Na het refreshen kwam de website weer terug, maar nu wel terug in het Nederlands, met de vertaalopties weg:

Dit werkt dus ook nog niet optimaal. Waarom dit zo is en hoe het kan worden opgelost moet nog achterhaald worden.

Op mobiel (Iphone 11) had ik niet het probleem dat de vertaalopties verdwenen. Wel had ik dat sommige pagina's na vertalen een 404 error gaven.

Nazneen05x commented 2 months ago

@Annevd Goed gedaan! mooie analyse!

fdnd-agency / buurtcampus-oost