Help
Inloggen

Toegankelijkheid voor thema's

Wanneer je je thema aanpast, maak je ontwerp- en contentkeuzes die helpen om je webshop toegankelijk te houden. Een toegankelijke website is zo ontworpen dat deze door iedereen kan worden gebruikt, inclusief mensen met een beperking. Door keuzes te maken voor je webshop met het oog op toegankelijkheid, kun je een inclusieve ervaring bieden voor al je klanten.

De onderstaande richtlijnen zijn opgesteld met de Web Content Accessibility Guidelines (WCAG) in het achterhoofd. Omdat er veel factoren zijn waarmee rekening moet worden gehouden bij het maken van een toegankelijke website, garandeert alleen het opvolgen van de onderstaande richtlijnen niet dat je webshop volledig toegankelijk is. Je kunt meer informatie over webtoegankelijkheid vinden op de WCAG-website of in de onderstaande bronnen.

Op deze pagina

Teksttoegankelijkheid

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 grote blokken tekst.

Kleurcontrast

Zorg er bij het bewerken van de kleuren van je webshop voor dat alle tekst toegankelijk is voor klanten die kleurenblind zijn of een andere visuele beperking hebben. Deze klanten zijn afhankelijk van een goed kleurcontrast om dingen visueel van elkaar te onderscheiden. Je kunt een online tool voor contrastverhouding gebruiken om het contrast van de verschillende onderdelen van je winkel te controleren.

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

Een blok lichtgrijze tekst op een effen witte achtergrond.

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

Een blok 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 de hoofdtekst en de knoptekst heeft een contrastverhouding van ten minste 4,5:1 met de achtergrond.
  • De kleur van koppen en andere grote tekst (lettergrootte 24 px en groter) heeft een contrastverhouding van ten minste 3:1 met de achtergrond.
  • De kleur van alle tekst over afbeeldingen, inclusief diavoorstellingen, banners en video's, heeft een voldoende contrastverhouding met de achtergrond. Voor grote tekst (lettergrootte 24 px en groter) is het contrast ten minste 3:1. Voor kleinere tekst is het contrast ten minste 4,5:1.
  • De kleur van niet-tekstelementen, inclusief randen van invoervelden en pictogrammen, heeft een contrastverhouding van ten minste 3:1 met de achtergrond.

Tekstkoppen

Wanneer je koppen aan je pagina toevoegt met de rich text-editor, is het belangrijk om ze in de juiste volgorde (1-6) te houden. Koppen worden gebruikt door ondersteunende technologieën om te communiceren hoe de content op de pagina is georganiseerd. Het overslaan van niveaus, zoals een kop van niveau 2 gevolgd door een kop van niveau 4, kan verwarrend zijn voor gebruikers. Gebruik de volgende richtlijn:

  • Koppen worden in de juiste volgorde gebruikt en slaan geen niveaus over.

Tekstgrootte en uitlijning

Wanneer je de typografie-instellingen van je thema bewerkt, zorg er dan voor dat je tekst groot genoeg is zodat klanten deze comfortabel kunnen lezen.

De tekst moet ook een consistente spatiëring tussen woorden en letters hebben om deze gemakkelijk leesbaar te maken. In het onderstaande voorbeeld is de tekstuitlijning uitgevuld, wat een inconsistente spatiëring tussen de woorden creëert.

Een tekstblok dat is uitgevuld. Elke tekstregel vult de ruimte van begin tot eind, waardoor er een wisselende spatiëring tussen woorden ontstaat om het passend te maken.

In het volgende voorbeeld is de tekst links uitgelijnd, wat een consistente spatiëring tussen de woorden creëert.

Een tekstblok dat links is uitgelijnd. Er is een consistente spatiëring tussen elk woord.

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

  • De minimale lettergrootte voor hoofdtekst is gelijk aan 16 px.
  • Tekstuitlijning is niet uitgevuld. Uitgevulde tekst creëert een inconsistente spatiëring tussen woorden.

Tekstlinks

Tekstlinks moeten onderstreept zijn of een andere visueel onderscheidende stijl hebben in vergelijking met gewone tekst. Omdat sommige klanten moeite hebben met het zien van kleuren, kun je niet alleen op een kleurverandering vertrouwen om een link van gewone tekst te onderscheiden.

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

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

  • Tekstlinks zijn onderstreept of hebben een ander visueel onderscheidend kenmerk dan alleen kleur, zodat klanten links van gewone tekst kunnen onderscheiden.
  • Tekstlinks openen in 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 alternatieve tekst toe te voegen die elke afbeelding nauwkeurig beschrijft. Klanten die schermlezers gebruiken, vertrouwen op alt-tekst om de content van afbeeldingen in je webshop over te brengen.

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

Wanneer je alt-tekst aan een afbeelding toevoegt, is het een goede gewoonte om te doen alsof je de afbeelding beschrijft aan iemand die de ogen gesloten heeft. Help diegene een beeld in zijn of haar hoofd te vormen. De manier waarop je een afbeelding beschrijft, hangt ook af van de context van je webpagina. Je beschrijft een afbeelding bijvoorbeeld anders als je bedrijf een reisbureau is dan wanneer het een winkel voor outdooruitrusting is. Neem de volgende afbeelding als voorbeeld:

Twee vrienden die rugzakken dragen, met hun armen om elkaar heen, uitkijkend over de oceaan

Voor een reisbureau kun je verwijzen naar het land en de regio waar de twee vrienden reizen en naar de naam van de oceaan of zee waar ze naar kijken. Voor een winkel voor outdooruitrusting kun je je daarentegen richten op de merken en functies van de rugzakken van de twee vrienden.

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

Toegankelijkheid van diavoorstellingen en video's

Wanneer je video's aan je webshop toevoegt, moet je rekening houden met de behoeften van slechtziende klanten, dove of slechthorende klanten of klanten die gevoelig zijn voor vestibulaire stoornissen.

Sommige van deze klanten vertrouwen op de tekst-naar-spraakfunctie van schermlezers, die de content van een webpagina hardop voorlezen. Extra audio van video's en muziek, vooral wanneer die onverwacht is, kan deze ervaring bemoeilijken. Voor dove of slechthorende klanten is het een goed idee om ondertiteling aan je video's toe te voegen, zodat die klanten toegang hebben tot de content.

Klanten met vestibulaire stoornissen kunnen duizelig worden van bewegende content. Daarom is het belangrijk dat diavoorstellingen en video's niet automatisch worden afgespeeld en dat de klant de diavoorstelling kan bedienen met bedieningsknoppen.

Diavoorstellingen

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

  • Diavoorstellingen worden niet automatisch afgespeeld.
  • Als diavoorstellingen wel automatisch worden afgespeeld, bevatten ze bedieningselementen waarmee klanten de diavoorstelling kunnen pauzeren, vooruit laten gaan of stoppen.

Video's

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

  • Video's worden niet automatisch afgespeeld.
  • Als video's wel automatisch worden afgespeeld, is de audio gedempt.
  • Voor video's die audio bevatten, is de video volledig zichtbaar en wordt deze niet belemmerd door andere pagina-elementen. Hierdoor blijft de ondertiteling zichtbaar.
  • Voor video's die dialoog bevatten, zijn teksttranscripties beschikbaar. Deze staan op de pagina zelf of in een link naar een aparte pagina.

Deze richtlijnen zijn ook van toepassing op video's in een diavoorstelling.

Toetsenbordondersteuning

Klanten met een visuele of motorische beperking kunnen een toetsenbord gebruiken om online te navigeren en taken uit te voeren. Deze klanten vertrouwen op een visuele indicator om aan te geven waar hun toetsenbordfocus zich op een webpagina bevindt. In het onderstaande voorbeeld heeft het veld E-mail een visuele focusindicator:

Een aanmeldscherm voor klanten in een webshop met formuliervelden voor E-mail en Wachtwoord. Het veld E-mail is blauw omlijnd.

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

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

Bronnen

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

Bronnen voor kleurcontrast

Bronnen voor tekst

Bronnen voor alternatieve tekst

Bronnen voor diavoorstellingen en video's

Bronnen voor toetsenbordondersteuning

In dit gedeelte