Scanrapport: Example Store B.V.

Samenvatting

We vonden 33 problemen van 5 soorten. 10 daarvan kunnen sommige klanten tegenhouden bij het kopen. De meeste zitten in de themacode, dus ze komen terug op elke pagina die dezelfde sectie gebruikt. Alle 33 zijn op te lossen in het thema.

Gecontroleerde pagina’s

1. Homepage /
2. Collectie: Tassen /collections/bags
3. Product: Linnen draagtas /products/linen-tote-bag
4. Winkelwagen /cart
5. Contact (gekozen door de winkel) /pages/contact

Problemen

1. Menu niet bruikbaar met toetsenbord

   Ernst: Hoog Gevonden: 3

   De uitklapmenu’s openen alleen als u er met de muis overheen gaat. Met de Tab-toets slaat u ze over, dus toetsenbordgebruikers kunnen via het menu geen enkele collectiepagina bereiken.

   Waar

   Header op elke pagina: de uitklapmenu’s “Shop”, “Collecties” en “Over ons”.

   Voor wie

   Mensen die geen muis kunnen gebruiken, waaronder veel schermlezergebruikers.

   Oplossing

   Maak van elk menu-item een knop die het uitklapmenu opent met Enter of Spatie, en sluit met Escape.

   WCAG-criterium

   2.1.1 Toetsenbord (niveau A)

2. Winkelwagenlade houdt toetsenbord vast

   Ernst: Hoog Gevonden: 1

   De winkelwagenlade opent, maar de focus blijft op de pagina erachter. Zodra u met Tab in de lade komt, kunt u er niet meer uit, en is de sluitknop onbereikbaar.

   Waar

   Productpagina, na “In winkelwagen”.

   Voor wie

   Toetsenbord- en schermlezergebruikers. Zij kunnen vanuit de lade niet door naar de checkout.

   Oplossing

   Verplaats de focus naar de lade als die opent, houd de focus daar zolang de lade open is, sluit met Escape, en zet de focus terug op de knop “In winkelwagen”.

   WCAG-criterium

   2.1.2 Geen toetsenbordval (niveau A)

3. Veld zonder label

   Ernst: Hoog Gevonden: 6

   Deze velden hebben alleen placeholdertekst of een icoon. Een schermlezer zegt “bewerkbare tekst” of “knop” zonder te zeggen waarvoor.

   Waar

   Zoekveld (elke pagina), nieuwsbriefveld (footer), aantalkiezer (productpagina, winkelwagen).

   Voor wie

   Gebruikers van een schermlezer of spraakbediening.

   Oplossing

   Voeg een zichtbaar label toe, of een verborgen label als het ontwerp geen ruimte heeft.

   WCAG-criterium

   4.1.2 Naam, rol, waarde (niveau A)

4. Te weinig tekstcontrast

   Ernst: Middel Gevonden: 14

   Lichtgrijze tekst op wit heeft een contrast van 2,8 : 1. Het minimum voor normale tekst is 4,5 : 1.

   Waar

   Actieprijzen, de balk “Gratis verzending vanaf € 50”, tekst in de footer en details op productkaarten.

   Voor wie

   Mensen die slecht zien, oudere klanten, en iedereen die buiten op een telefoon kijkt.

   Oplossing

   Maak het grijs donkerder in de thema-instellingen en CSS. Een iets donkerdere tint houdt dezelfde uitstraling.

   WCAG-criterium

   1.4.3 Contrast (minimum) (niveau AA)

5. Afbeelding zonder alt-tekst

   Ernst: Middel Gevonden: 9

   Afbeeldingen hebben geen tekstalternatief, of alleen de bestandsnaam, zoals “IMG_2041.jpg”.

   Waar

   Banners op de homepage, collectie- en productafbeeldingen.

   Voor wie

   Schermlezergebruikers, die de bestandsnaam horen of helemaal niets.

   Oplossing

   Voeg voor productafbeeldingen een korte beschrijving toe in Shopify-beheer. Markeer puur decoratieve afbeeldingen als decoratief in het thema.

   WCAG-criterium

   1.1.1 Niet-tekstuele content (niveau A)

Buiten de themacode

Dit zagen we ook. Het telt niet mee in de cijfers hierboven, omdat het niet in uw thema op te lossen is.

• App voor productreviews: de sterrenbeoordeling werkt niet met het toetsenbord. Dit zit in een app van derden. Meld het bij de app-ontwikkelaar, of vraag ons naar alternatieven.
• Checkout: niet gecontroleerd. Shopify beheert de checkout, en die is niet met themacode aan te passen.

Wat deze scan niet dekt

Een automatische scan vindt veel voorkomende problemen, maar niet allemaal. Sommige dingen, zoals of een alt-tekst de afbeelding echt beschrijft, of een pagina logisch is met een schermlezer, moet een mens controleren. Onze betaalde audit bevat die handmatige controle.