Toegankelijkheid voor thema's

Wanneer je je thema aanpast, is het een goed idee om ontwerp- en inhoudskeuzes te maken die helpen je online winkel toegankelijk te houden. Een toegankelijke website is zo ontworpen dat deze door iedereen kan worden gebruikt, inclusief mensen met een handicap. Toegankelijkheid voor je online winkel is essentieel voor het bieden van een inclusieve ervaring voor je klanten.

De onderstaande richtlijnen zijn gemaakt met de Web Content Accessibility Guidelines (WCAG) in gedachten. Aangezien er veel factoren zijn om rekening mee te houden bij het maken van een toegankelijke website, wordt met de onderstaande richtlijnen niet gegarandeerd dat uw online winkel volledig toegankelijk is. U kunt meer lezen over webtoegankelijkheid door naar de WCAG-website te gaan of door de onderstaande bronnen te raadplegen.

Toegankelijkheid van tekst

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

Kleurcontrast

Wanneer u de kleuren voor uw online winkel bewerkt, moet u ervoor zorgen dat al uw 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. U kunt een onlinetool voor contrastverhoudingen gebruiken om het contrast van de verschillende delen van uw 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 is deze voor veel klanten gemakkelijk 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 rich text 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-inhoud is georganiseerd. Het overslaan van niveaus, zoals een kopniveau 2 gevolgd door een kopniveau 4, kan 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 u de typografie-instellingen van uw thema bewerkt, moet u ervoor zorgen dat uw 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 is niet uitgevuld. Bij uitgevulde tekst ontstaan er verschillende witruimtes tussen de woorden.

Wanneer u links naar uw tekst toevoegt, moet u ervoor zorgen dat deze door al uw klanten kunnen worden geïdentificeerd. Omdat sommige klanten problemen hebben met het zien van kleuren, kunt u niet alleen vertrouwen op een verandering van kleur om een link te onderscheiden van normale tekst. In het onderstaande voorbeeld is de tekst Lees ons verhaal onderstreept, zodat deze niet afhankelijk is van de kleurverandering om te communiceren dat de tekst een link is:

Een welkomstbericht met de boodschap 'Lees ons verhaal en ontmoet de mensen die ons merk maken tot wat het is'. De tekst 'Lees ons verhaal' is rood en onderstreept om aan te geven dat het een link is.

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

  • Tekstlinks zijn onderstreept of worden op een andere manier visueel onderscheiden van normale tekst.

Alternatieve tekst voor afbeeldingen

Wanneer u afbeeldingen aan uw online winkel 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 inhoud van afbeeldingen in uw online winkel te communiceren.

Je kunt alternatieve tekst toevoegen aan uw productafbeeldingen vanuit de Shopify-beheerder. Je kunt alternatieve tekst toevoegen aan andere afbeeldingen in uw thema vanuit de themabewerker.

Wanneer u alternatieve tekst aan een afbeelding toevoegt, is het een goed gebruik om te doen alsof u de afbeelding beschrijft voor mensen die hun ogen gesloten hebben. Help ze om een beeld in hun hoofd te creëren. De manier waarop u een afbeelding beschrijft, hangt ook af van de context van uw webpagina. Je kunt een afbeelding bijvoorbeeld anders omschrijven als uw bedrijf een reisbureau is dan als uw 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 kunt u 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 zult u 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 alternatieve tekst zijn: 'Twee mensen voor de oceaan'. Voor hetzelfde reisbureau kan een voorbeeld van goede alternatieve 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 u video's aan je online winkel toevoegt, moet u ervoor zorgen dat u 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 inhoud 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 uw video's, zodat die klanten toegang hebben tot de inhoud.

Klanten met evenwichtsstoornissen kunnen duizeligheid ervaren bij bewegende inhoud. Daarom is het belangrijk dat diavoorstellingen en video's niet automatisch worden afgespeeld.

Diavoorstellingen

Wanneer u een diavoorstelling aan uw online winkel toevoegt, gebruikt u de volgende richtlijnen:

  • Diavoorstellingen worden niet automatisch afgespeeld.
  • Als diavoorstellingen automatisch worden afgespeeld, bevatten ze een instelling die klanten kunnen gebruiken om de diavoorstelling te onderbreken of te stoppen.

Video's

Wanneer u een video aan uw online winkel toevoegt, gebruikt u de volgende richtlijnen:

  • 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 aanmeldingsscherm voor klanten in een online winkel met formuliervelden voor e-mailadres en wachtwoord. Het veld E-mailadres is blauw omlijnd.

Als u het stijlblad van uw thema bewerkt, zorg er dan voor dat u 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 onlinetool 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

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis