De afbeelding in het artikel heeft een leeg alt-attribuut. Een leeg alt markeert een afbeelding als decoratief, waardoor schermlezers haar overslaan. Hier draagt de afbeelding betekenis, dus gebruikers van een schermlezer missen de informatie die ziende lezers eruit halen.

De afbeelding is zo opgemaakt:

<img src="awesome_cat.jpg" alt="" />

Aanbeveling

Geef een beschrijvende alt-tekst. De tekst moet de inhoud en functie van de afbeelding in de context van het artikel weergeven:

<img src="awesome_cat.jpg" alt="Een schattige kat die ontspannen ligt te luieren" />

Gebruik een leeg alt alleen voor afbeeldingen die puur decoratief zijn en niets toevoegen aan de inhoud.

De call-to-action in de header reageert alleen op een muisklik. Het is een div met een klik-handler, dus hij zit niet in de tabvolgorde en reageert niet op Enter of spatie. Toetsenbordgebruikers en schermlezergebruikers kunnen hem helemaal niet bereiken.

De call-to-action is zo opgemaakt:

<div class="link" onClick="navigateCallToAction()">Get a Quote!</div>

Aanbeveling

Gebruik een a-element voor navigatie en zet de bestemming in het href-attribuut:

<a class="link" href="/request-a-quote">Get a Quote!</a>

Een link is standaard focusbaar en met het toetsenbord te bedienen, werkt zonder JavaScript en vertelt hulptechnologie en zoekmachines wat hij doet.

Het contactformulier bevat een eigen dropdown die niet bereikbaar is met het toetsenbord. Gebruikers die afhankelijk zijn van toetsenbordnavigatie kunnen het formulier niet volledig invullen.

Aanbeveling

Gebruik een standaard HTML <select>-element of zorg dat de eigen dropdown volledig met het toetsenbord te bedienen is, inclusief de juiste ARIA-attributen en toetsenbordinteractie.

Op de homepage ontbreekt een zichtbare focusstijl op meerdere interactieve elementen, waaronder navigatielinks en knoppen. Daardoor is het voor toetsenbordgebruikers onduidelijk welk element de focus heeft.

Aanbeveling

Voeg een duidelijk zichtbare focusstijl toe aan alle interactieve elementen. Gebruik CSS :focus-visible om een focusindicator te tonen met een contrastverhouding van minimaal 3:1 ten opzichte van de achtergrond.

Het contactformulier heeft velden die ingevuld moeten worden, maar niets vertelt gebruikers welke dat zijn. Pas na het verzenden blijkt dat naam en e-mailadres verplicht waren. Dat is verwarrend voor iedereen, en zeker voor mensen met een cognitieve beperking.

De velden zijn zo opgemaakt:

<div class="input-field">
  <label for="fullname">Fullname:</label>
  <input type="text" id="fullname" required />
</div>
<div class="input-field">
  <label for="email">Email:</label>
  <input type="email" id="email" required />
</div>

Aanbeveling

Zet in het label welke velden verplicht zijn, zodat de instructie zichtbaar is voordat het veld wordt gebruikt en schermlezers hem samen met het label voorlezen:

<div class="input-field">
  <label for="fullname">Fullname (required)</label>
  <input type="text" id="fullname" required />
</div>
<div class="input-field">
  <label for="email">Email (required)</label>
  <input type="email" id="email" required />
</div>

Wordt er een sterretje gebruikt, leg de betekenis daarvan dan één keer uit bovenaan het formulier.

De zoek- en verzendknop op het productoverzicht bevatten alleen een emoji. Schermlezers kondigen ze aan als "vergrootglas, knop" en "envelop, knop" of als een naamloze knop, zodat gebruikers niet weten wat de knoppen doen.

De knoppen zijn zo opgemaakt:

<button class="btn" onclick="search()">🔎</button>
<button class="btn" onclick="submitForm()">📨</button>

Aanbeveling

Geef elke bediening een toegankelijke naam die het doel beschrijft. Verberg de emoji voor hulptechnologie en voeg de naam toe met aria-label:

<button class="btn" onclick="search()" aria-label="Zoeken">
  <span aria-hidden="true">🔎</span>
</button>
<button class="btn" onclick="submitForm()" aria-label="Formulier verzenden">
  <span aria-hidden="true">📨</span>
</button>

Zichtbare tekst naast het icoon is nog beter, omdat die iedereen helpt en ook door spraakbesturing wordt herkend.