4 Testen - koeenm/look-and-feel-corporate-identity GitHub Wiki

Inleiding

Om te zorgen dat de website goed toegankelijk is moet je de website natuurlijk testen. Zo kan je de website laten testen door de ingebouwde toegankelijkheidstest in Google Chrome. Maar kan je ook zelf de website testen of je goed door de site heen kan tabben. Ook kan je een screenreader gebruiken om te kijken of de website te gebruiken is voor blinde mensen. Daarnaast lijkt het me goed de website te laten testen die deze site nog niet gezien en gebruikt heeft, op die manier weet je of de site word geintepreteerd op de manier dat jij wilt dat ie word.

Lighthouse test

Onze Lighthouse test heeft een score van 81 gekregen. Dat is nog niet geweldig, dus er is genoeg ruimte voor verbetering.

Contrast

image

Door de test zijn we erachter gekomen dat het contrast van de twee belangrijkste kleuren op onze site niet een goed contrast hebben.

image

De witte kleur op de donkerblauwe heeft een goed contrast, maar die groene kleur heeft geen goed contrast op de donkerblauwe achtergrond. Dit kunnen we oplossen door de groene tekst gewoon wit te laten, of een andere kleur op de achtergrond te zetten.

Links

image

Ook moeten de links uit onze site een goede naam hebben. Zodat mensen met een screenreader weten waar ze heen gaan wanneer ze op de link klikken. De links die niet aan de goede toegankelijkheid voldoen zijn de icoontjes in de footer; deze leiden naar een Facebook en Instagram website. In images zet je altijd een alt atribuut, zodat mensen die het plaatje niet kunnen zien alsnog weten wat er te zien is. Als dit ook word toegevoegd in de svg van deze links, dan zal dit geen toegankelijkheidsprobleem meer zijn.

Headings

Als laatste probleem waren de headers niet op goede volgorde. Zo gingen we van een h1 naar een h3. Dit zorgt ervoor dat er voor mensen die een screenreader gebruiken verwarring kan ontstaan. In de html stond wel gewoon een h2, maar deze was verwerkt in een p. Dus heb ik de h2 uit de p gehaald.

                    <p><h2>Over De Hallen Amsterdam</h2>

Kleur en contrast test

///

Tab test

De tab test door de site is goed verlopen, je kan via alle bruikbare elementen op de website door de hele site heen tabben, dit zorgt ervoor dat mensen die geen beschikking hebben tot een muis nog steeds vloeiend de hele site kunnen gebruiken zonder enig probleem. Het enige wat we nog kunnen aanpassen is de focus state, op dit moment hebben we de standaard vorm en blauwe kleur die je browser automatisch in stelt. We kunnen hiervan de opmaak mooier maken, door bijvoorbeeld een solide kleur te gebruiken en een andere kleur dat meer bij onze site past te gebruiken.

image

Browsers

Het viel ons op dat de site, op dit moment nog, niet werkt op Safari, maar wel op bijvoorbeeld Chrome en Firefox. Dit komt doordat we onze css heb genest, en dit nog niet volledig word ondersteund op Safari. Hier moeten we nog goed naar kijken om dit probleem op te lossen.

⚠️ **GitHub.com Fallback** ⚠️