Bästa praxis-referens för tillgänglighet i e-postmeddelanden och formulär

Du kommer att lära dig

Lär dig hur du gör din e-post och ditt registreringsformulär mer tillgängliga. När du utformar din e-post och registreringsformulär vill du se till att dina mönster är tillgängliga för alla dina mottagare.  

Tillgänglighet i e-post

Optimera ämnesrad och förhandsgranska text

Gör ditt ämnesrad och din förhandsgranskningstext beskrivande, lockande och kort.

Följ bästa praxis för e-postdesign

Om du följer de bästa metoderna för e-postdesign blir din e-post mer tillgänglig:

• Lägg till alt-text till alla dina bilder.
• Undvik e-post med enbart bilder.
• Undvik att använda bilder för att förmedla viktiga detaljer.
• Använd starkt kontrasterande färger (t.ex. vitt och svart, grått och mörkblått, rosa och mörkrött).
• Använd rubriker för att separera idéer.
• Använd beskrivande länkar (t.ex. "Handla i samlingen" i stället för "Klicka här för att gå till samlingen").
• Strukturera din e-post logiskt.

Nedan visas ett exempel på en e-post som är optimerad för alla mottagare (vänster) och en som inte är det (höger).

Tillgänglighet i registreringsformulär

Klaviyo optimerar automatiskt registreringsformulär för tillgänglighet. Ett Klaviyo-formulär som publiceras på din webbplats gör det möjligt för webbplatsbesökare att navigera i formuläret helt och hållet med hjälp av tangentbord och skärmläsare. Dessutom kan webbplatsbesökare stänga ett formulär med escape-tangenten och skicka in med enter-tangenten. Du kan lägga till en Focus Outline Color, som finns på fliken Styles i formulärredigeraren, för att hjälpa användarna att förstå vilket fält som är markerat när de tabbar genom formuläret.

Design av registreringsformulär

Precis som med e-postdesign bör du följa några grundläggande riktlinjer för att säkerställa att alla dina mottagare får den information du vill dela med dem via dina formulär. När du utformar formulär:

• Använd kontrasterande färger.
• Undvik att lägga in relevant information i bilder
• Använd beskrivande språk i länkar
• Bygg upp dina formulär i en logisk struktur.

När du bygger ditt registreringsformulär övervakar Klaviyo ett antal tillgänglighetsproblem och uppmanar dig att åtgärda eventuella identifierade problem på fliken Formulärvarningar. 

Nedan visas ett exempel på ett väl utformat formulär (till höger) och ett formulär som inte kommer att vara tillgängligt för alla (till vänster). 

Ytterligare resurser

• WebAIM: kontrastkontroll
• Sim Daltonism: simulator för färgblindhet
• Funkify: Simulator för funktionsnedsättning i Google Chrome