Accessible Templates for Every Inbox — Resource Kit

Escrito por Rodrigo Santander

5
(2)

Thank you for attending my session "CNX26 — Accessible Template for Every Inbox Client." It was a pleasure to have you with me.

This document gathers the tools, articles, and guides I rely on most. Think of it as your starter pack on the path to becoming an Accessibility Email Wizard. Bookmark it, share it, and come back to it whenever you build your next campaign.

Let's get to work.

Coding & Testing Platforms

Parcel — The email coding platform. Includes a free Accessibility testing tool and a vision impairment simulator.
https://parcel.io/

Email on Acid — Email testing platform. Send your email test to different clients to check the rendered version in each one.
https://www.emailonacid.com/

Typography

Font Style Matcher — One of my favorites. Select a web-safe font and a custom font, see both visualized side by side, and edit character attributes so your DOM doesn't break.
https://meowni.ca/font-style-matcher/?ref=emailresourc.es

Color Contrast

Colour Contrast Checker
https://colourcontrast.cc/

WebAIM Contrast Checker
https://webaim.org/resources/contrastchecker/

Alt Text

Alternative Text Deep Dive (a11y.email) — A four-part series worth reading in full.

How to Write Alt Text (Email on Acid)
https://www.emailonacid.com/blog/article/email-development/write-alt-text/

Dark Mode Guides

How to Fix Outlook Dark Mode Problems — by Nicole Merlin (Email Design)
https://webdesign.tutsplus.com/how-to-fix-outlook-dark-mode-problems--cms-37718t

Master the Art of Dark Mode Email Design and Coding (Email on Acid)
https://www.emailonacid.com/blog/article/email-development/dark-mode-for-email/

The Ultimate Guide to Dark Mode (Litmus)
https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers

Code Solutions with Current Support (GitHub — matthieuSolente)
https://github.com/matthieuSolente/email-darkmode

Dyslexia-Friendly Content

How to Write Better Website Content for People with Dyslexia (Scope)
https://business.scope.org.uk/how-to-write-better-website-content-for-people-with-dyslexia/

Frame Your Text (Dyslexie Font)
https://dyslexiefont.com/en/frame-your-text/

Mobile Dyslexic. Mobile Dyslexic replaces all fonts of all web pages with carefully crafted special font which is easier to read by people with dyslexia.

https://addons.mozilla.org/en-US/firefox/addon/mobile-dyslexic

Bonus: Better Buttons

Link Button — Use this instead of VML buttons. Mark Robbins does a fantastic job explaining why this kind of button, which are really link texts, work and have better compatibility with Outlook.
https://www.goodemailcode.com/email-code/link-button

Go build inboxes everyone can read. — See you at CNX26.

¿Qué tan útil fue este post?

¡Dale clic en una estrella para calificar la nota!

Calificación: 5 / 5. Recuento de votos 2

No hay votos aún. Sé el primero en calificar este post.

Rodrigo Santander

Marketing Champion y Salesforce MVP. Ro es el fundador de la Comunidad más grande de LATAM sobre Marketing y la era Agéntica. Cuando no está trabajando, disfruta tocar el ukulele y dibujar.