Best practices voor toegankelijkheid in e-mails en formulieren

Wat je leert

Leer hoe je je e-mail en aanmeldingsformulier toegankelijker kunt maken. Wanneer je je e-mail en aanmeldingsformulier ontwerpt, wil je er zeker van zijn dat je ontwerpen toegankelijk zijn voor al je ontvangers.  

Toegankelijkheid in e-mail

Onderwerpregel en voorbeeldtekst optimaliseren

Maak je onderwerpregel en voorbeeldtekst beschrijvend, verleidelijk en kort.

Volg de algemene best practices voor e-mailontwerp

Als je de algemene best practices voor e-mailontwerp volgt, wordt je e-mail toegankelijker:

• Voeg alt-tekst toe aan al je afbeeldingen.
• Vermijd e-mail met alleen afbeeldingen.
• Vermijd het gebruik van afbeeldingen om belangrijke details over te brengen.
• Gebruik sterk contrasterende kleuren (bijvoorbeeld wit en zwart, grijs en donkerblauw, roze en donkerrood).
• Gebruik kopteksten om ideeën te scheiden.
• Gebruik beschrijvende links (bijvoorbeeld "Shop de collectie" in plaats van "Klik hier om naar de collectie" te gaan).
• Structureer je e-mail logisch.

Hieronder zie je een voorbeeld van een e-mail die is geoptimaliseerd voor alle ontvangers (links) en een die dat niet is (rechts).

Toegankelijkheid in aanmeldingsformulier

Klaviyo optimaliseert automatisch aanmeldingsformulieren voor toegankelijkheid. Een Klaviyo formulier dat op je website wordt gepubliceerd schakelt websitebezoekers in om volledig door het formulier te navigeren met behulp van hun toetsenbord en screenreaders. Bovendien kunnen websitebezoekers een formulier sluiten met de escape toets en verzenden met de enter toets. Je kunt een Focus Outline Color toevoegen op het tabblad Styles in de formuliereditor om gebruikers te helpen begrijpen welk veld gemarkeerd is als ze door het formulier bladeren.

aanmeldingsformulier ontwerp

Net als bij het ontwerpen van e-mails wil je een aantal basisrichtlijnen volgen om ervoor te zorgen dat al je ontvangers de informatie krijgen die je via je formulieren met ze wilt delen. Bij het ontwerpen van formulieren:

• Gebruik contrasterende kleuren.
• Vermijd het plaatsen van relevante informatie in afbeeldingen
• Gebruik beschrijvende taal in links
• Bouw je formulieren op in een logische structuur.

Tijdens het bouwen van je aanmeldingsformulier, houdt Klaviyo in de gaten voor een aantal toegankelijkheidsproblemen, en zal het je vragen om alle geïdentificeerde problemen op te lossen in het tabblad Forms Alerts. 

Hieronder zie je een voorbeeld van een goed ontworpen formulier (rechts) en een formulier dat niet voor iedereen toegankelijk is (links). 

Extra hulpbronnen

• WebAIM: contrastcontrole
• Sim Daltonisme: kleurenblindheid simulator
• Funkify: Google Chrome handicap simulator