Testen📱✅

Performance Test✅

Index(Roelie) performance lighthouse test

Ik heb even een lighthouse test gedaan voor de performance. Gelukkig kwam hier al een hoog percentage uit wat betekend dat het al best wel goed is, maar er zouden nog enkele dingen beter kunnen:

• Betere afmetingen van de afbeeldingen om de laadsnelheid te verbeteren.
• Zo min mogelijk externe URL bronnen gebruiken die laadtijd vertragen.
• Geef elke image, inclusief logo's een width en height mee in de HTML.
• Maak gebruik van font-display: swap om zo te voorkomen dat er geen tekst te zien is als er nog geladen wordt.

Community(Zenit) page performance lighthouse test

Bij de test van de community page was ook een aardig hoge score, met onder andere dezelfde verbeterpunten als hierboven maar ook nog andere aandachtspunten zoals:

• Het opschonen van de CSS, haal ongebruikte CSS en witruimtes weg voor een snellere laadtijd.
• Enable text compression.

Chat page(Amber) performance lighthouse test

Accesbility Test✅

Index(Roelie) accessibility lighthouse test

Uit de accessibility test van de index kwamen nog een aantal verbeterpunten naar voren:

• In de head heeft een icoon geen naam <a href="#"><i class="fa fa-shopping-cart"></i></a>, Dit is niet handig voor mensen met screenreader.
• Zorg ervoor dat er in de foot alleen <li> items in de <ul>, de <h3> hoort niet thuis in een list:

  <ul>
                <h3 class="footer-title">Vini Mini</h3> <!-- deze mag niet in een list -->
                <li><a href="" class="footer-link">Producten</a></li>
                <li><a href="" class="footer-link">Stappenplan</a></li>
                <li><a href="" class="footer-link">Over ons</a></li>
                <li><a href="" class="footer-link">Nieuws</a></li>
                <li><a href="" class="footer-link">Doe de test</a></li>
  </ul>

• Zorg ervoor dat je de header elementen h1 tot h6 in de goede volgorde gebruikt voor een goede semantiek.
• Voor en achtergrond kleuren hebben te weinig contrast, dit komt door de licht blauwe vini mini kleur.

Community page(Zenit) accessibility lighthouse test

Bij de lighthouse test van de community page kwamen veel van dezelfde verbeterpunten uit die ook bij de index te zien kwamen.

Na paar aanpassingen te hebben gemaakt is dit de nieuwe resultaat.

De aanpassingen waren:

• kleur veranderd van de icon
• alt artibuut toegevoegd
• bij de iconen de variabele aria-hidden="true" toegevoegd.

Chat page(Amber) accessibility lighthouse test

Bij de chatpage kwam ook goede feedback uit de lighthouse test, maar ook feedback die we al eerder hadden gehad over de kleuren:

• Geef de verzend button een duidelijke naam, deze heeft nu geen naam en is dan onduidelijk voor screenreader gebruikers.

Nadat ik een title="verzend" had toegevoegd aan de button kregen we een veel hogere score uit de test:

User Test✅

We hebben een usertest gedaan bij Daan de feedback dat Daan ons gaf was:

• 1 homepage inplaats van 2
• Bij contact de chat plaatsen

Colour contrast Analyser (Amber)

Voor de chat.ejs heb ik ook een test gedaan of de chat bubbels wel toegankelijk zijn qua kleuren. Het font had eerst een witte kleur, maar nu heb ik het veranderd naar donkerblauw. Ik heb dit getest met de Colour Contrast Analyser en dit is de uitkomst: