Toegankelijkheid voor thema's

Deze pagina is afgedrukt op Apr 19, 2024. Ga voor de huidige versie naar https://help.shopify.com/nl/manual/online-store/themes/customizing-themes/accessibility.

Maak ontwerp- en contentkeuzes die helpen je webshop toegankelijk te houden wanneer je je thema aanpast. Een toegankelijke website is zo ontworpen dat iedereen deze kan gebruiken, inclusief mensen met een beperking. Door keuzes te maken voor je webshop met het oog op toegankelijkheid, bied je een inclusieve ervaring voor alle klanten.

De onderstaande richtlijnen zijn gemaakt met de Web Content Accessibility Guidelines (WCAG) in gedachten. Omdat er veel factoren zijn om rekening mee te houden bij het maken van een toegankelijke website, wordt met de onderstaande richtlijnen niet gegarandeerd dat je webshop volledig toegankelijk is. Je vindt meer informatie over webtoegankelijkheid door naar de WCAG-website te gaan of door de onderstaande bronnen te raadplegen.

Op deze pagina

Toegankelijkheid van tekst

Het is belangrijk dat de tekst in je webshop leesbaar is voor klanten met een visuele beperking of die moeite hebben met het lezen van blokken met veel tekst.

Kleurcontrast

Wanneer je de kleuren voor je webshop bewerkt, moet je ervoor zorgen dat al je tekst toegankelijk is voor klanten die kleurenblind of anderszins slechtziend zijn. Deze klanten zijn afhankelijk van genoeg kleurcontrast om dingen visueel van elkaar te onderscheiden. Je kunt een onlinetool voor contrastverhoudingen gebruiken om het contrast van de verschillende delen van je winkel te controleren.

In het onderstaande voorbeeld heeft de tekst een contrastverhouding van 2,4:1 ten opzichte van de achtergrond en is deze voor sommige klanten moeilijk leesbaar.

Een blok lichtgrijze tekst en een effen witte achtergrond.

In het volgende voorbeeld heeft de tekst een contrastverhouding van 4,8:1 en deze is voor veel klanten gemakkelijker te lezen.

Een blok met donkergrijze tekst op een effen witte achtergrond.

Test het contrast van alle tekst, inclusief hoofdtekst, koppen, links en formuliervelden. Gebruik de volgende richtlijnen:

  • De kleur van hoofdtekst en knoptekst heeft een contrastverhouding van minimaal 4,5:1 ten opzichte van de achtergrond.
  • De kleur van koppen en andere grote tekst (tekengrootte 24 pixels en hoger) heeft een contrastverhouding van minimaal 3:1 ten opzichte van de achtergrond.
  • De kleur van alle tekst boven afbeeldingen, inclusief diavoorstellingen, banners en video's, heeft voldoende contrastverhoudingen ten opzichte van de achtergrond. Voor grote tekst (tekengrootte 24 pixels en hoger) is het contrast ten minste 3:1. Voor kleinere tekst is het contrast minimaal 4,5:1.
  • De kleur van niet-tekstelementen, inclusief invoerranden en pictogrammen, heeft een contrastverhouding van minimaal 3:1 ten opzichte van de achtergrond.

Tekstkoppen

Wanneer je koppen aan je pagina toevoegt met de RTF-editor, is het belangrijk om ze in de juiste volgorde te houden (1 - 6). Koppen worden gebruikt door ondersteunende technologieën om te communiceren hoe de pagina-content is georganiseerd. Als je niveaus overslaat, zoals kopniveau 2 gevolgd door kopniveau 4, kan dat verwarrend zijn voor gebruikers. Gebruik de volgende richtlijn:

  • Koppen worden in de juiste volgorde gebruikt en er worden geen niveaus overgeslagen.

Tekstgrootte en uitlijning

Wanneer je de typografie-instellingen van je thema bewerkt, moet je ervoor zorgen dat je tekst groot genoeg is voor klanten om comfortabel te kunnen lezen.

Ook moet de tekst gelijke witruimtes tussen woorden en letters hebben om deze gemakkelijk leesbaar te maken. In het onderstaande voorbeeld is de tekst uitgevuld, waardoor er ongelijke witruimtes tussen de woorden ontstaan.

Een blok met uitgevulde tekst. Elke regel tekst vult de ruimte van begin tot eind. De witruimte tussen woorden varieert om de tekst passend te maken.

In het volgende voorbeeld is de tekst links uitgelijnd, waardoor er gelijke witruimtes tussen de woorden ontstaan.

Een blok met links uitgelijnde tekst. De witruimtes tussen de woorden zijn gelijk.

Gebruik de volgende richtlijnen bij het aanpassen van de grootte en uitlijning van tekst:

  • De minimale tekengrootte voor hoofdtekst is gelijk aan 16 pixels.
  • Tekst wordt niet uitgevuld. Bij uitgevulde tekst ontstaan er verschillende witruimten tussen de woorden.

Zorg dat tekstlinks onderstreept zijn of een andere, visueel verschillende stijl hebben in vergelijking met normale tekst. Omdat sommige klanten problemen hebben met het zien van kleuren, kun je niet alleen vertrouwen op een verandering van kleur om een link te onderscheiden van normale tekst.

Tekstlinks moeten op hetzelfde tabblad worden geopend. Links die op een nieuw tabblad of in een nieuw venster worden geopend, kunnen verwarring veroorzaken, vooral op een mobiel apparaat waar het oude venster niet zichtbaar is en niet inclusief is voor klanten. Dit geldt met name voor klanten die schermvergroting gebruiken of minder technisch zijn.

Als je het stijlblad van je thema bewerkt, zorg er dan voor dat je geen stijlen voor tekstlinks verwijdert. Gebruik de volgende richtlijnen:

  • Tekstlinks worden onderstreept of zien visueel anders uit, niet alleen qua kleur, zodat klanten links kunnen onderscheiden van reguliere tekst.
  • Tekstlinks worden geopend op hetzelfde tabblad wanneer erop wordt geklikt.

Alternatieve tekst voor afbeeldingen

Wanneer je afbeeldingen aan je webshop toevoegt, is het belangrijk om ze toegankelijk te maken voor klanten die blind of slechtziend zijn. Je kunt dit doen door een alternatieve tekst toe te voegen waarmee elke afbeelding nauwkeurig wordt beschreven. Klanten die schermlezers gebruiken, gebruiken alternatieve tekst om de content van afbeeldingen in je webshop te communiceren.

Je kunt alt-tekst toevoegen aan je productafbeeldingen vanuit het Shopify-beheercentrum. Je kunt alt-tekst toevoegen aan andere afbeeldingen in je thema vanuit de themabewerker.

Wanneer je alt-tekst aan een afbeelding toevoegt, is het een goed gebruik om te doen alsof je de afbeelding beschrijft voor mensen die hun ogen gesloten hebben. Help ze om een beeld in hun hoofd te creëren. De manier waarop je een afbeelding beschrijft, hangt ook af van de context van je webpagina. Je kunt een afbeelding bijvoorbeeld anders omschrijven als je bedrijf een reisbureau is dan als je bedrijf een winkel voor outdoorartikelen is. Bekijk de volgende afbeelding:

Twee vrienden dragen rugzakken met hun armen om elkaar heen en kijken uit op de oceaan

Voor een reisbureau kun je verwijzen naar het land en de regio waarin de twee vrienden reizen, en naar de naam van de oceaan of zee waarnaar ze kijken. Maar bij een winkel voor outdoorartikelen zul je waarschijnlijk meer de nadruk leggen op de merken en eigenschappen van de rugzakken van de twee vrienden.

Als je bedrijf een reisbureau is, kan een voorbeeld van slechte alt-tekst zijn: 'Twee mensen voor de oceaan'. Voor hetzelfde reisbureau kan een voorbeeld van goede alt-tekst zijn: 'Twee vrienden die in Lagos, Portugal reizen en die op een zonnige dag uitkijken op de zanderige baai van Praia do Camilo'.

Toegankelijkheid bij diavoorstellingen en video's

Wanneer je video's aan je webshop toevoegt, moet je ervoor zorgen dat je rekening houdt met de behoeften van slechtziende klanten, klanten die doof of slechthorend zijn, en klanten die last hebben van evenwichtsstoornissen.

Sommige van deze klanten gebruiken de tekst-naar-spraak-functie van schermlezers waarmee de content van een webpagina wordt voorgelezen. Extra geluid van video's en muziek, vooral wanneer dit onverwacht is, kan deze ervaring bemoeilijken. Voor klanten die doof of slechthorend zijn, is het een goed idee om ondertiteling toe te voegen aan je video's, zodat die klanten toegang hebben tot de content.

Klanten met evenwichtsstoornissen kunnen duizeligheid ervaren bij bewegende content. Daarom is het belangrijk dat diavoorstellingen en video's niet automatisch worden afgespeeld en dat de klant de diavoorstelling met knoppen kan regelen.

Diavoorstellingen

Gebruik de volgende richtlijnen wanneer je een diavoorstelling aan je webshop toevoegt:

  • Diavoorstellingen worden niet automatisch afgespeeld.
  • Als diavoorstellingen wel automatisch worden afgespeeld, dienen ze diavoorstellingsknoppen te bevatten die klanten kunnen gebruiken om de diavoorstelling te pauzeren, door te spoelen of te stoppen.

Video's

Gebruik de volgende richtlijnen als je een video aan je webshop toevoegt:

  • Video's worden niet automatisch afgespeeld.
  • Als video's wel automatisch worden afgespeeld, is het geluid gedempt.
  • Voor video's met geluid is het beeld volledig zichtbaar en wordt het niet belemmerd door andere pagina-elementen. Hierdoor blijven ondertitels zichtbaar.
  • Voor video's met dialogen zijn teksttranscripties beschikbaar. Deze worden opgenomen op de pagina of in een link naar een afzonderlijke pagina.

Deze richtlijnen zijn ook van toepassing op video's die deel uitmaken van een diavoorstelling.

Ondersteuning van het toetsenbord

Klanten met een visuele of motorische beperking kunnen een toetsenbord gebruiken om online te navigeren en taken uit te voeren. Deze klanten gebruiken een visuele indicator om te communiceren waar de focus van het toetsenbord ligt op een webpagina. In het onderstaande voorbeeld heeft het veld E-mailadres een visuele focusindicator:

Een inlogscherm voor klanten in een webshop met formuliervelden voor e-mailadres en wachtwoord. Het veld E-mailadres is blauw omlijnd.

Als je het stijlblad van je thema bewerkt, zorg er dan voor dat je niet de stijl voor toetsenbordfocus van de pagina-elementen verwijdert. Gebruik de volgende richtlijn:

  • Alle interactieve pagina-elementen hebben een duidelijke visuele indicator wanneer ze toetsenbordfocus hebben. Deze elementen omvatten links, knoppen en formuliervelden.

Bronnen

Raadpleeg de volgende bronnen voor meer informatie over webtoegankelijkheid voor de onderwerpen die in dit artikel zijn besproken.

Bronnen over kleurcontrast

  • Colors with Good Contrast (Kleuren met goed contrast), een artikel van het Web Accessibility Initiative
  • Contrast Ratio, een online tool die je kunt gebruiken om de contrastverhouding tussen twee kleuren te bepalen
  • Color Contrast Analyzer, een te downloaden toepassing voor contrastverhoudingen die is ontwikkeld door de Paciello Group

Tekstbronnen

Bronnen voor alternatieve tekst

Bronnen over diavoorstellingen en video's

Bronnen voor toetsenbordondersteuning

In deze sectie

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis