{"id":3494,"date":"2025-05-07T21:56:04","date_gmt":"2025-05-08T01:56:04","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/7-simple-tricks-to-make-your-email-code-more-accessible\/"},"modified":"2026-03-23T16:02:40","modified_gmt":"2026-03-23T20:02:40","slug":"7-simple-tricks-to-make-your-email-code-more-accessible","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/7-simple-tricks-to-make-your-email-code-more-accessible","title":{"rendered":"Email Marketer\u2019s Guide to Coding for Accessibility"},"content":{"rendered":"<table class=\"my-5\" style=\"background-color: #f2f3f6;\">\n<tbody>\n<tr>\n<td class=\"block-1\" style=\"padding: 20px;\">\n<h3>Key takeaways \u2728<\/h3>\n<ul>\n<li><strong><b>Accessibility matters. <\/b><span style=\"font-weight: 400;\">Not only is it legally required to make your emails accessible to everyone, it\u2019s the right thing to do for your subscribers, and for your business. You can\u2019t increase conversion rates if someone can\u2019t interact with your email.<\/span><\/strong><\/li>\n<li><strong><b>Coding for accessibility <\/b><span style=\"font-weight: 400;\">doesn\u2019t just mean optimizing for screen readers, though that\u2019s a big part of it. In addition to screen readers, you also need to think about visual impairment and the general organization of your code. Messy code makes for less accessibility.<\/span><\/strong><\/li>\n<li><strong>What is good for accessibility is usually good for everyone. <span style=\"font-weight: 400;\">Making small changes in your email code, like adding role=presentation in your tables or adding hover effects for clicks is either neutral for the rest of your subscribers or makes your email easier to use for everyone. Either way, it\u2019s worth doing.<\/span><\/strong><\/li>\n<li><strong>Litmus <\/strong><span style=\"font-weight: 400;\"><strong>offers an accessibility checker<\/strong> for 40+ different accessibility issues so you can double-check your code as you build in <\/span><b>Litmus Builder.<\/b><\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span style=\"font-weight: 400;\">As email marketers, we all strive to deliver great emails to our subscribers\u2019 inboxes. We run spam tests and email testing to ensure our design renders perfectly on all devices and email clients.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The hundreds of hours that go into your email design and email copy go <\/span><i><span style=\"font-weight: 400;\">poof<\/span><\/i><span style=\"font-weight: 400;\"> if your code renders your email inaccessible. Accessibility is a pillar of email design because without an <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-accessibility-for-designers-8-best-practices-you-should-follow\">accessible design<\/a>, a portion of your subscribers can\u2019t see or click on your email at all. This makes it impossible for them to take action on your email, and worse, gives them a terrible experience.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re just getting started with making your email code more accessible, it can be overwhelming. But there are a few simple tricks that you can implement easily\u2014and have a big impact on <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/ultimate-guide-accessible-emails\"><span style=\"font-weight: 400;\">email accessibility<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Table of contents<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><a rel=\"noopener\" href=\"#coding-standards\">Accessibility coding standards<\/a><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><a rel=\"noopener\" href=\"#screen-readers\">Accessible coding and screen readers<\/a><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#checklist\"><span style=\"font-weight: 400;\">Accessible email code checklist<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#coding-mistakes\"><span style=\"font-weight: 400;\">Dodging accessible email coding mistakes<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#dark-mode\"><span style=\"font-weight: 400;\">Coding for dark mode<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#interactive\"><span style=\"font-weight: 400;\">Coding accessible, interactive emails<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#tables\"><span style=\"font-weight: 400;\">How to code accessible tables for email layouts<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#inclusive\"><span style=\"font-weight: 400;\">Tools for accessible and inclusive coding<\/span><\/a><\/li>\n<\/ul>\n<h2 id=\"coding-standards\"><span style=\"font-weight: 400;\">Accessibility coding standards<\/span><\/h2>\n<a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/emailmarkup.org\/en\/reports\/accessibility\/2024\/\"><span style=\"font-weight: 400;\">Email markup consortium<\/span><\/a><span style=\"font-weight: 400;\"> recently analyzed over 400,000 emails and found that 99.97% of HTML emails contained accessibility issues that prevent many subscribers from reading the email. \ud83e\udd2fThat\u2019s basically every email send!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As email marketers, we must do better.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u201cThe most common thing I hear about accessibility is that \u2018nobody is looking at my email with images off,\u2019 or \u2018nobody is using screen readers,\u2019 and that\u2019s just not true,\u201d says Carin Slater, email marketing expert. \u201cWhen someone signs up for your inbox, it\u2019s like being invited into their home. You need to respect who they are as people. That\u2019s what accessibility is all about.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re not sure where to start with accessible coding, it\u2019s time to study up on standards like the <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/WCAG\/\"><span style=\"font-weight: 400;\">Web Content Accessibility Guidelines (WCAG)<\/span><\/a><span style=\"font-weight: 400;\">. These standards outline exactly how to code emails to make sure they\u2019re accessible to everyone\u2014not just what\u2019s legally required of you in the U.S. and internationally.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">These internationally recognized standards outline how to make websites, apps, and other digital properties accessible to people with disabilities. While WCAG isn\u2019t a law on its own, it\u2019s the widely recognized guide for making web and digital experiences accessible to everyone.<\/span><\/p>\n\n<div class=\"container pt-3 pb-5 px-1\">\n\t<div class=\"row blog-cta-green rounded-5 p-4\">\n\t\t<div class=\"mx-auto col-12\">\n\t\t\t<div class=\"row d-flex align-items-center\">\n\t\t\t<div class=\"col-12 text-center\">\n\t\t\t\t<p class=\"bold fs-4\">Accessibility made simple<\/p>\n\t\t\t\t<p>Creating accessible emails is no longer optional\u2014it\u2019s required. Learn about accessibility\u2019s impact on brands from two industry experts.<\/p>\n\t\t\t\t<button class=\"button-blue arrow\"><a href=\"https:\/\/www.litmus.com\/resources\/why-businesses-must-embrace-email-accessibility\" class=\"text-white text-decoration-none\">Watch now<\/a><\/button>\n\t\t\t<\/div><!--col-6-->\n\t\t\t<div class=\"d-none\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/07\/blog-cta-email-guardian-07292024.svg\" width=\"210\" height=\"180\" alt=\"\">\n\t\t\t<\/div><!--col-6-->\n\t\t\t<\/div> <!--row-->\n\t\t<\/div><!--col-12-->\n\t<\/div><!--row-->\n<\/div><!--container-->\n\t\n\t\n\t\n\t\n\n<h2 id=\"screen-readers\"><span style=\"font-weight: 400;\">Accessible coding and screen readers<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">When we think about accessible coding, what most people jump to is optimizing for screen readers. A <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/special-characters-emojis-line-breaks-more-tricks-for-optimizing-your-emails-for-screen-readers\"><span style=\"font-weight: 400;\">screen reader<\/span><\/a><span style=\"font-weight: 400;\"> is an assistive software that reads text on a computer screen (in this case, your email). It\u2019s most commonly used by those with visual impairments, but anyone who has engaged Amazon\u2019s Alexa, Apple\u2019s Siri, or Google Assistant has used a screen reader. The <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.who.int\/news-room\/fact-sheets\/detail\/blindness-and-visual-impairment\"><span style=\"font-weight: 400;\">World Health Organization estimates<\/span><\/a><span style=\"font-weight: 400;\"> there are around 2.2 billion people with visual impairments, many of whom are considered blind.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">What happens when your code isn\u2019t accessible? Let\u2019s take images as an example. Without ALT text, <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/how-does-your-email-sound\"><span style=\"font-weight: 400;\">screen readers<\/span><\/a><span style=\"font-weight: 400;\"> have no way of properly describing an image out loud.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s look at this really simple email header from one of our own emails. This header contains an image of the Litmus logo without ALT text.<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-115626 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/05\/Logo-Accessibility.png\" alt=\"Black email header with the Litmus pinwheel logo in the middle\" width=\"520\" height=\"106\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/05\/Logo-Accessibility.png 520w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/05\/Logo-Accessibility-300x61.png 300w\" sizes=\"(max-width: 520px) 100vw, 520px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s how a screen reader will read out our email header, if we hadn\u2019t optimized it for accessibility.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Audio Player<\/span><br \/>\n<span style=\"font-weight: 400;\">00:00<\/span><br \/>\n<span style=\"font-weight: 400;\">00:00<\/span><br \/>\n<span style=\"font-weight: 400;\">Use Up\/Down Arrow keys to increase or decrease volume.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Screen readers end up listing out a ton of garbled letters from your code.That means your subscribers with screen readers have to sort through confusing letters and numbers in an attempt to hear your message.\u00a0 That\u2019s not super helpful, and the body of the email hasn\u2019t even started yet! With that kind of experience, what are the chances they\u2019d open another email? (Hint: Zero.)<\/span><\/p>\n<h2 id=\"checklist\"><span style=\"font-weight: 400;\">Accessible email code checklist<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Sometimes, we forget to set ALT tags for our images, use a color combination that\u2019s difficult to read, or fail to optimize our emails for screen readers. It happens to the best of us.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here is your <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/wp-content\/uploads\/pdf\/email-accessibility-checklist-2025.pdf\"><span style=\"font-weight: 400;\">accessibility checklist<\/span><\/a><span style=\"font-weight: 400;\"> so your code is always readable by all of your subscribers\u2014and easier for you to <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-accessibility-5-tips-for-writing-email-copy-for-everyone\">write with accessible language<\/a>, too.<\/span><\/p>\n<div class=\"container pt-3 pb-5 px-1\">\n<div class=\"row blog-cta-blue rounded-5 p-4\">\n<div class=\"mx-auto col-12\">\n<div class=\"row d-flex align-items-center\">\n<div class=\"col-12 text-center\">\n<p class=\"bold fs-4\">Are your emails accessible?<\/p>\n<p>Use this free pre-send email accessibility checklist as a starting point to make<br \/>\nsure your email copy, design, and code is accessible to everyone.<\/p>\n<p><button class=\"button-blue download\"><a class=\"text-white text-decoration-none\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/wp-content\/uploads\/pdf\/email-accessibility-checklist-2025.pdf\">Get the checklist<\/a><\/button><\/p>\n<\/div>\n<div class=\"d-none\"><picture><source srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/05\/State-of-Innovations-Banner.png.webp\" type=\"image\/webp\" \/><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/05\/State-of-Innovations-Banner.png\" alt=\"\" width=\"221\" height=\"175\" \/> <\/picture><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h3><span style=\"font-weight: 400;\">1. Add a language code to your &lt;HTML&gt;<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Not all of your subscribers will read your email on their laptops or phones\u2014some will use screen readers to access your email. Since your email content will be read out loud, it should be in the right language so the pronunciations are correct. After all, you wouldn\u2019t want your email written in French to be pronounced in American English, would you?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To prevent that from happening, you have to tell screen readers what language your email is written in. If there\u2019s no language code specified in your emails, screen readers can\u2019t pronounce the copy correctly\u2014and your eloquent email may come out sounding completely wrong.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">That\u2019s why it is key to check your &lt;HTML&gt; for a language code\u2014that\u2019s a simple snippet of code that specifies your email\u2019s language. If it isn\u2019t already in your code, add lang=\u201cxx\u201d\u2014replace xx with the appropriate language code for your email. Check out this <\/span><a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/www.lingoes.net\/en\/translator\/langcode.htm\"><span style=\"font-weight: 400;\">list of all possible language codes and localities<\/span><\/a><span style=\"font-weight: 400;\">\u2014which allows you to account for different accents, like a differentiation between British and American English.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are a few special cases to consider:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">If you\u2019re using any XML in your &lt;HTML&gt; tag, you\u2019ll also need to add <\/span><strong>xml:lang=\u201cxx\u201d<\/strong><span style=\"font-weight: 400;\">. <\/span><\/li>\n<li><span style=\"font-weight: 400;\">If you\u2019re including the Outlook 120dpi fix in your email code, <\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/discussions\/151-mystery-solved-dpi-scaling-in-outlook-2007-2013\"><span style=\"font-weight: 400;\">you\u2019ll need this solution<\/span><\/a><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"> to specify a language. Here\u2019s how our code looks with this fix:<\/span><\/span><\/span>\n<pre><code style=\"color: #fff; background: #333;\">\n&lt;html \nxmlns_v=\"urn:schemas-microsoft-com:vml\"\nxmlns_o=\"urn:schemas-microsoft-com:office:office\"\nlang=\"en\" xml_lang=\"en\"&gt;\n<\/code><\/pre>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Pro tip: it\u2019s possible to populate the language code dynamically if you have localization set up within your ESP.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">2. Always include ALT tags for your images<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">It\u2019s important to keep in mind that the images in your emails might not always be visible for your subscribers. Maybe they have their images off, or they have a bad connection, or they\u2019re using a screen reader. If you\u2019re including a lot of important information in your images, that messaging will be lost. That\u2019s where ALT text comes in. You can set text that\u2019s visible to your subscribers (or read out by their screen reader) so they still get the same messaging as people that can see your images.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u201cIf the image is of a specific product, and then the headline underneath the image is the name of the product, then your alt text shouldn\u2019t just be the name of the product. In a screen reader, that would read something like, \u2018iPhone iPhone iPhone iPhone iPhone,\u2019 which is just a terrible experience,\u201d says Carin.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Wherever you have an &lt;IMG&gt; tag in your email code, be sure to set the ALT tag. If you have populated ALT tags already, double check to make sure that text matches the text on the image. If you have empty ALT tags, make sure that there isn\u2019t any text on the image that needs to be populated for a screen reader to see.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are some cases where you should add an empty ALT tag: alt=\u201c\u201d to the images. Do this when:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">There are no ALT tags on your images.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">There is no text in the image itself.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The image is purely decorative and does not add any meaning to the email.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">If you don\u2019t include the empty tag, screen readers will read out the URL of the image\u2014and no one wants a long URL read out to them!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Once you\u2019ve set all of your ALT tags\u2014empty or not\u2014for the images in your email, add font styling into the &lt;IMG&gt; tag for <\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/the-ultimate-guide-to-styled-alt-text-in-email\"><span style=\"font-weight: 400;\">styled ALT text<\/span><\/a><span style=\"font-weight: 400;\">. This styling lets you get fancy with your ALT text and lets you alter the appearance of the font, color, size, style, and weight.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">3. Include role=\u201dpresentation\u201d attribute on all &lt;TABLE&gt; elements<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Most email marketers rely on tables to structure their email layout, but those can cause serious issues for screen readers. If a screen reader identifies a table in your email\u2019s code, it will read out loud as one. It might literally tell you how many rows and columns there are, telling you each column\u2019s position and content, making it impossible to understand your message.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">That\u2019s why it\u2019s key to tell the screen reader that you\u2019re using the table for layout purposes only. You can do that by adding <\/span><b>role=\u201cpresentation\u201d <\/b><span style=\"font-weight: 400;\">to every table in your email. This role tells the screen readers to remove any semantic meaning from the tables\u2014so instead of reading out row and column numbers, it focuses on the content instead.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s look at this really simple email header from one of our own emails:<\/span><\/p>\n<figure id=\"post-23062 media-23062\" class=\"alignnone\"><img decoding=\"async\" class=\"\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/litmusemailheader.png\" alt=\"\" \/><\/figure>\n<p><span style=\"font-weight: 400;\">Before we optimized for accessibility, our code looked like this:<\/span><\/p>\n<pre><code style=\"color: #fff; background: #333;\">&lt;code style=\"color: #fff; background: #333;\"&gt;\n&lt;table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\"\nborder=\"0\"&gt;&lt;tr&gt;\n&lt;td align=\"center\" bgcolor=\"#2f343c\" valign=\"top\"\nstyle=\"padding: 0px 15px;\"&gt;\n&lt;table class=\"w100p\" width=\"600\" cellpadding=\"0\"\ncellspacing=\"0\" border=\"0\"&gt;&lt;tr&gt;\n&lt;td class=\"w100p\" width=\"600\" align=\"center\"&gt;\n&lt;table cellpadding=\"0\" cellspacing=\"0\" border=\"0\"&gt;\n&lt;tr&gt;&lt;td style=\"font-size: 1px; line-height: 30px;\"&gt;&amp;nbsp;\n&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;\n&lt;a rel=\"noopener\" target=\"_blank\" rel=\"noopener\" target=\"_blank\" href=\"https:\/\/litmus.com?utm_campaign=soeanalytics2019rt&amp;utm_source=email&amp;utm_medium=marketing&amp;utm_content=%%dynamic_content_1456%%\"&gt;\n&lt;img src=\"https:\/\/pages.litmus.com\/l\/31032\/2016-08-16\/954sb7\/31032\/95886\/litmus_logo_white.png\"\nwidth=\"134\" height=\"50\" style=\"color: #ffffff;\nfont-family:'proxima_nova', Helvetica, Arial, sans-serif;\ntext-align:center; font-weight:bold; font-size:36px;\nline-height:40px; margin: 0 auto; padding: 0;\" \/&gt;\n&lt;\/a&gt;\n&lt;table cellpadding=\"0\" cellspacing=\"0\" border=\"0\"&gt;\n&lt;tr&gt;&lt;td style=\"font-size: 1px; line-height: 30px;\"&gt;&amp;nbsp;\n&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;\n&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;\n&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;\n&lt;\/code&gt;\n<\/code><\/pre>\n<p><span style=\"font-weight: 400;\">Did you notice that it\u2019s missing ALT attributes and the tables aren\u2019t set to <\/span><strong>role=&#8221;presentation&#8221;<\/strong><span style=\"font-weight: 400;\">?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Those small oversights have a big impact on accessibility. Here\u2019s how a screen reader interprets the code above:<\/span><\/p>\n<p><strong>Screen reader: Non-accessible email header<\/strong><\/p>\n<audio class=\"wp-audio-shortcode\" id=\"audio-3494-1\" preload=\"none\" style=\"width: 100%;\" controls=\"controls\"><source type=\"audio\/mpeg\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/05\/non-accessible.mp3?_=1\" \/><a href=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/05\/non-accessible.mp3\">https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/05\/non-accessible.mp3<\/a><\/audio>\n<p><span style=\"font-weight: 400;\"><br \/>\nAnd here is that same code that\u2019s been refactored by adding the <\/span><strong>ALT=&#8221;&#8221;<\/strong><span style=\"font-weight: 400;\"> attribute and <\/span><strong>role=&#8221;presentation&#8221;<\/strong><span style=\"font-weight: 400;\"> to <\/span><strong>&lt;TABLE&gt;<\/strong><span style=\"font-weight: 400;\"> tags to be screen reader-friendly:<\/span><\/p>\n<pre><code style=\"color: #fff; background: #333;\">&lt;code style=\"color: #fff; background: #333;\"&gt;\n&lt;table role=\"presentation\" width=\"100%\" cellpadding=\"0\"\ncellspacing=\"0\" border=\"0\"&gt;&lt;tr&gt;\n&lt;td align=\"center\" bgcolor=\"#2f343c\" valign=\"top\"\nstyle=\"padding: 0px 15px;\"&gt;\n&lt;table role=\"presentation\" class=\"w100p\" width=\"600\"\ncellpadding=\"0\" cellspacing=\"0\" border=\"0\"&gt;&lt;tr&gt;\n&lt;td class=\"w100p\" width=\"600\" align=\"center\"&gt;\n&lt;table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\"\nborder=\"0\"&gt;\n&lt;tr&gt;&lt;td style=\"font-size: 1px; line-height: 30px;\"&gt;&amp;nbsp;\n&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;\n&lt;a rel=\"noopener\" target=\"_blank\" rel=\"noopener\" target=\"_blank\" href=\"https:\/\/litmus.com?utm_campaign=soeanalytics2019rt&amp;utm_source=email&amp;utm_medium=marketing&amp;utm_content=%%dynamic_content_1456%%\"&gt;\n&lt;img src=\"https:\/\/pages.litmus.com\/l\/31032\/2016-08-16\/954sb7\/31032\/95886\/litmus_logo_white.png\"\nwidth=\"134\" height=\"50\" alt=\"Litmus\" style=\"color: #ffffff;\nfont-family:'proxima_nova', Helvetica, Arial, sans-serif;\ntext-align:center; font-weight:bold; font-size:36px;\nline-height:40px; margin: 0 auto; padding: 0;\" \/&gt;\n&lt;\/a&gt;\n&lt;table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\"\nborder=\"0\"&gt;\n&lt;tr&gt;&lt;td style=\"font-size: 1px; line-height: 30px;\"&gt;&amp;nbsp;\n&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;\n&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;\n&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;\n&lt;\/code&gt;\n<\/code><\/pre>\n<p><strong>Screen reader: Accessible email header<\/strong><\/p>\n<audio class=\"wp-audio-shortcode\" id=\"audio-3494-2\" preload=\"none\" style=\"width: 100%;\" controls=\"controls\"><source type=\"audio\/mpeg\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/05\/accessible.mp3?_=2\" \/><a href=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/05\/accessible.mp3\">https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/05\/accessible.mp3<\/a><\/audio>\n<p><span style=\"font-weight: 400;\"><br \/>\nAs you can hear, there\u2019s quite a difference!<\/span><\/p>\n<h4 id=\"tables\"><span style=\"font-weight: 400;\">How to code accessible tables for email layouts in Litmus<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">If there\u2019s one aspect of <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-accessibility-for-designers-8-best-practices-you-should-follow\"><span style=\"font-weight: 400;\">accessible coding<\/span><\/a><span style=\"font-weight: 400;\"> you take away from this article, it\u2019s adding role=presentation to your tables. This will dramatically impact your accessibility and takes very little time to do.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u201cDoing this is so important because it lets screen readers know that they don\u2019t need to read it out like a table,\u201d says Carin. \u201cI came up through email in a very regulated industry, and everything had to look a certain way, so I often would use tables or bullet points in the code to do that. Those are both important cases for ARIA labels to let a screen reader know that it\u2019s not actually meant to be read that way.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s how to do it in Litmus:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">1. First, log in to your Litmus account and click on Litmus Builder. Choose from one of your templates or start coding your email directly with HTML.<br \/>\n<\/span><span style=\"font-weight: 400;\">2. As you build your tables, add role=presentation.<br \/>\n<\/span><span style=\"font-weight: 400;\">3. When you\u2019re done, double check your work in the QA checks tab in Builder. Litmus Accessibility Checker can help you identify exactly what you\u2019re missing with dozens of helpful accessibility checks.<\/span><\/p>\n<div class=\"wistia_responsive_padding\" style=\"padding: 43.13% 0 0 0; position: relative;\">\n<div class=\"wistia_responsive_wrapper\" style=\"height: 100%; left: 0; position: absolute; top: 0; width: 100%;\"><iframe class=\"wistia_embed\" title=\"Coding-Gif Video\" src=\"https:\/\/fast.wistia.net\/embed\/iframe\/6wowhg44zz?web_component=true&amp;seo=false\" name=\"wistia_embed\" width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"no\"><\/iframe><\/div>\n<\/div>\n<p><script src=\"https:\/\/fast.wistia.net\/player.js\" async><\/script><\/p>\n<p><span style=\"font-weight: 400;\">4. Then, update your Previews and QA tab to finish your testing process.<br \/>\n<\/span><span style=\"font-weight: 400;\">5. Send it! *happy dance*<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">4. Use semantic elements to structure your content<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Semantic elements make it easy to highlight content hierarchy, showing subscribers (and screen readers) what\u2019s a headline and what\u2019s paragraph copy. Including semantic elements gives your subscribers who use screen readers the option to \u201cscan\u201d through an email more easily. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">When double checking your copy, make sure any headline-worthy copy is enclosed within an <\/span><strong>&lt;H&gt;<\/strong><span style=\"font-weight: 400;\"> tag: <\/span><strong>&lt;H1&gt;<\/strong><span style=\"font-weight: 400;\">, <\/span><strong>&lt;H2&gt;<\/strong><span style=\"font-weight: 400;\">, <\/span><strong>&lt;H3&gt;<\/strong><span style=\"font-weight: 400;\">, and so on. Similarly, make sure any body copy is housed within a <\/span><strong>&lt;P&gt;<\/strong><span style=\"font-weight: 400;\"> tag. When going through your email, screen readers put emphasis on specific headers, and setting up these <\/span><strong>&lt;H&gt;<\/strong> <span style=\"font-weight: 400;\">and <\/span><strong>&lt;P&gt;<\/strong><span style=\"font-weight: 400;\"> tags will make your email easier to navigate.<\/span><br \/>\n<script src=\"\/\/fast.wistia.com\/embed\/medias\/ar8a58x5jf.jsonp\" async><\/script><br \/>\n<script src=\"\/\/fast.wistia.com\/assets\/external\/E-v1.js\" async><\/script><\/p>\n<div class=\"wistia_responsive_padding\" style=\"padding: 56.25% 0 0 0; position: relative;\">\n<div class=\"wistia_responsive_wrapper\" style=\"height: 100%; left: 0; position: absolute; top: 0; width: 100%;\">\n<div class=\"wistia_embed wistia_async_ar8a58x5jf seo=false videoFoam=true popover=true\" style=\"height: 100%; width: 100%;\"><\/div>\n<\/div>\n<\/div>\n<h3 class=\"mt-5\"><span style=\"font-weight: 400;\">5. Left-align your copy, if possible<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">When it comes to your body text, it may be tempting to center align. However, when it comes to accessibility, <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/uxmovement.com\/content\/why-you-should-never-center-align-paragraph-text\/\"><span style=\"font-weight: 400;\">this is a big don\u2019t<\/span><\/a><span style=\"font-weight: 400;\">! <\/span><\/p>\n<p>When you center your text, the starting edge changes for every line, which forces your subscribers to work harder to find the beginning of each line. That\u2019s a challenge for people with dyslexia and other reading impairments.<\/p>\n<p>If you have any copy that\u2019s longer than two lines, left-align that copy. This is especially important for mobile, since the narrow width often produces more lines of text than you may realize. You may need to left-align your text responsively on mobile.<\/p>\n<h3><span style=\"font-weight: 400;\">6. Check the contrast of your copy<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Check the contrast ratio of your text colors against the background colors of your email. You may have subscribers that have color deficits, and if your colors do not provide enough contrast for them, they may not be able to read your email. There are two ways you can check your contrast ratio:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you need to manually input your color codes, check out <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/contrast-ratio.com\/\"><span style=\"font-weight: 400;\">https:\/\/contrast-ratio.com\/<\/span><\/a>.<\/p>\n<h2 id=\"coding-mistakes\"><span style=\"font-weight: 400;\">Dodging accessible coding mistakes\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Of course, we all make mistakes. Here\u2019s a quick shortcut so you can easily fix your code:<\/span><\/p>\n<table class=\"table table-striped\">\n<thead>\n<tr>\n<th><strong>Common Accessibility Error<\/strong><\/th>\n<th><strong>Fix It By\u2026<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>All-image emails<\/td>\n<td>Adding images where necessary within the code of your email<\/td>\n<\/tr>\n<tr>\n<td>No ALT Text<\/td>\n<td>Adding descriptive alt text to each image.<\/td>\n<\/tr>\n<tr>\n<td>Poor color contrast or disappearing text in dark mode<\/td>\n<td>Choosing a color scheme that has high contrast. Think opposite sides of the color wheel.<\/td>\n<\/tr>\n<tr>\n<td>No text alignment<\/td>\n<td>Left-aligning your copy text. This makes it much easier for screen readers (and tbh, everyone.)<\/td>\n<\/tr>\n<tr>\n<td>Disorganized code<\/td>\n<td>Adding <code>role=\"presentation\"<\/code> to your tables, and semantic elements like<br \/>\n<code>&lt;H2&gt;<\/code>, <code>&lt;H3&gt;<\/code>, or <code>&lt;p&gt;<\/code> to create a hierarchy your screen reader can read.<br \/>\n(Plus it\u2019s cleaner code for you!)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n<div class=\"container pt-3 pb-5 px-1\">\n\t<div class=\"row blog-cta-blue rounded-5 p-4\">\n\t\t<div class=\"mx-auto col-12\">\n\t\t\t<div class=\"row d-flex align-items-center\">\n\t\t\t<div class=\"col-lg-6 col-12\">\n\t\t\t\t<p class=\"bold fs-4\">Unlock endless revenue<\/p>\n\t\t\t\t<p>Let\u2019s take a look at how much email-driven revenue you could be leaving on the table.\n<\/p>\n\t\t\t\t<button class=\"button-blue download\"><a href=\"https:\/\/www.litmus.com\/roi-calculator\" class=\"text-white text-decoration-none\">Calculate ROI<\/a><\/button>\n\t\t\t<\/div><!--col-6-->\n\t\t\t<div class=\"col-6 d-none d-lg-block\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/09\/download-blog-cta-09232024.svg\" width=\"221\" height=\"175\" alt=\"\">\n\t\t\t<\/div><!--col-6-->\n\t\t\t<\/div> <!--row-->\n\t\t<\/div><!--col-12-->\n\t<\/div><!--row-->\n<\/div><!--container-->\n\t\n\t\n\t\n\t\n\n<h2 id=\"dark-mode\"><span style=\"font-weight: 400;\">Coding for dark mode<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Litmus Market Share shows 35% of emails are opened in <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers\"><span style=\"font-weight: 400;\">dark mode<\/span><\/a><span style=\"font-weight: 400;\">, making it a potentially significant chunk of your subscribers. Since it launched in 2018, it\u2019s created quite a few headaches for email marketers\u2014especially when it comes to accessibility.<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-20042 size-large\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/09\/litmus-light-mode-email-vs-dark-mode-email-example-749x1024.png\" alt=\"Litmus light mode email vs. dark mode email example\" width=\"749\" height=\"1024\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/09\/litmus-light-mode-email-vs-dark-mode-email-example-749x1024.png 749w, https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/09\/litmus-light-mode-email-vs-dark-mode-email-example-220x300.png 220w, https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/09\/litmus-light-mode-email-vs-dark-mode-email-example-768x1050.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/09\/litmus-light-mode-email-vs-dark-mode-email-example.png 900w\" sizes=\"(max-width: 749px) 100vw, 749px\" \/><\/p>\n<p><span style=\"font-weight: 400;\"><br \/>\nThat\u2019s because some email clients leave your email exactly as it is, some email clients completely invert your colors, and some only partially do.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To make sure any Dark Mode styles stay accessible to users\u2014specifically, that your color contrast works and is readable to users with colorblindness or low vision, you can use two different methods to control what your email looks like:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">@media (prefers-color-scheme: dark)<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">This method works in very much the same way as applying a block of styles inside a @media query for your Mobile Responsive view, except this CSS block targets any user interface that\u2019s set to Dark Mode. @media (prefers-color-scheme: dark) allows you to create the most robust custom Dark Mode themes where you can implement anything from Dark Mode-specific image swaps, hover effects, background images\u2026 basically almost anything you can do with traditional CSS. This method requires you to add <\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/264-dark-mode-meta-tags\"><span style=\"font-weight: 400;\">Dark Mode meta tags and styles<\/span><\/a><span style=\"font-weight: 400;\"> to the &lt;head&gt; of your email in order to work in Apple Mail.<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">[data-ogsc]\/[data-ogsb]<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">S\/O to <\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/discussions\/8256-outlook-app-vs-dark-mode-on-ios-a-disaster#comment-16402\"><span style=\"font-weight: 400;\">Mark Robbins<\/span><\/a><span style=\"font-weight: 400;\"> for showing us how to target the Outlook app. This method allows for image swapping on Outlook.com. To do it, duplicate the @media (prefers-color-scheme: dark) styles you already applied and add the appropriate [data-ogsc] prefixes to each CSS rule.<\/span><\/p>\n<h2 id=\"interactive\"><span style=\"font-weight: 400;\">Coding accessible, interactive emails\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Interactive emails are some of the most fun and challenging to create. Adding elements like polls, surveys, hot spots, quizzes, offer reveals, and reviews gives your subscribers a chance to engage directly with your email. With most of these types of interactivity, however, you need a fallback option or a generic version to make them accessible.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But one of our favorite underused interactive elements can actually <\/span><i><span style=\"font-weight: 400;\">help <\/span><\/i><span style=\"font-weight: 400;\">your accessibility efforts: Hover effects.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Coding accessible, interactive emails\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Interactive emails are some of the most fun and challenging to create. Adding elements like polls, surveys, hot spots, quizzes, offer reveals, and reviews gives your subscribers a chance to engage directly with your email. With most of these types of interactivity, however, you need a fallback option or a generic version to make them accessible.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But one of our favorite underused interactive elements can actually <\/span><i><span style=\"font-weight: 400;\">help <\/span><\/i><span style=\"font-weight: 400;\">your accessibility efforts: Hover effects.<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-4878 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/screen-recording-2017-12-08-at-10.52-am.gif\" alt=\"Gif demonstrating the three hover effect text options: change color, underline, and drop shadow.\" width=\"697\" height=\"285\" \/><\/p>\n<p><span style=\"font-weight: 400;\"><br \/>\nAt Litmus, we use <\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/interactive-email-for-beginners-6-interactive-elements-you-can-add-to-your-emails-today\"><span style=\"font-weight: 400;\">hover effects<\/span><\/a><span style=\"font-weight: 400;\"> on our CTAs, links, and images to indicate clickability. Hover effects are a simple interactive element that can make your emails more engaging and improve <\/span><span style=\"font-weight: 400;\">your subscribers\u2019 experience by making them easier to interact with.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s how to do it:<\/span><\/p>\n<p><strong>Embed CSS<\/strong><\/p>\n<pre><code style=\"color: #fff; background: #333;\"><span style=\"font-weight: 400;\">.txt-color:hover { color: #8ddaeb !important; }<\/span><\/code><\/pre>\n<p><b><br \/>\n<\/b><strong>HTML \u2013 Text Hover Color Change<\/strong><\/p>\n<pre><code style=\"color: #fff; background: #333;\">&lt;!-- start TEXT HOVER COLOR CHANGE --&gt;\n&lt;a rel=\"noopener\" rel=\"noopener\" href=\"#\" style=\"color:#43b9d3; text-decoration:none;\"&gt;\n&lt;span style=\"line-height: 21px;\" class=\"txt-color\"&gt;\nChange Color on Hover&lt;\/span&gt;&lt;\/a&gt;\n&lt;!-- end TEXT HOVER COLOR CHANGE --&gt;<\/code><\/pre>\n<p><span style=\"font-weight: 400;\"><br \/>\nThough hover effects are only supported in AOL, Apple Mail, Gmail, and Yahoo! Mail, they\u2019re a popular effect and worth implementing in your email code. You can fade an image, change the color of your CTA button, add a pop-up tab, and more.<\/span><\/p>\n\n<div class=\"container pt-3 pb-5 px-1\">\n\t<div class=\"row blog-cta-green rounded-5 p-4\">\n\t\t<div class=\"mx-auto col-12\">\n\t\t\t<div class=\"row d-flex align-items-center\">\n\t\t\t<div class=\"col-12 text-center\">\n\t\t\t\t<p class=\"bold fs-4\">Create emails that everyone can experience<\/p>\n\t\t\t\t<p>Maximize your email\u2019s impact by designing accessible content for all. Accessibility checks are always at your fingertips with Litmus.<\/p>\n\t\t\t\t<button class=\"button-blue arrow\"><a href=\"https:\/\/www.litmus.com\/email-builder\" class=\"text-white text-decoration-none\">Build Accessible Emails<\/a><\/button>\n\t\t\t<\/div><!--col-6-->\n\t\t\t<div class=\"d-none\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/07\/blog-cta-email-guardian-07292024.svg\" width=\"210\" height=\"180\" alt=\"\">\n\t\t\t<\/div><!--col-6-->\n\t\t\t<\/div> <!--row-->\n\t\t<\/div><!--col-12-->\n\t<\/div><!--row-->\n<\/div><!--container-->\n\t\n\t\n\t\n\t\n\n<h2><span style=\"font-weight: 400;\">Accessibly coding with email personalization<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">We often think of accessibility as an \u201cextra\u201d aspect of coding, but it\u2019s really the foundation of personalization. You can\u2019t build tailored experiences for your subscribers if they can\u2019t read or click on your email to begin with.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u201cIn email marketing, we talk a lot about 1:1 personalization, but true 1:1 communication is impossible if users can\u2019t access your content,\u201d says <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/lcastady\/\"><span style=\"font-weight: 400;\">Lauren Castady<\/span><\/a><span style=\"font-weight: 400;\">, Associative Creative Director at Oracle Digital Experience Agency.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Merge tags pull in data from your ESP or database to personalize words, designs, or images in your email. But what a lot of email marketers don\u2019t know is that merge tags work in ALT Text\u2014so you can still add personalization from your images into your descriptions. For example, if you\u2019re sending a \u201cHappy Birthday [NAME]!\u201d email, you can add an extra message for anyone unable to see those images.<\/span><\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/05\/personalized-email-example.png\" alt=\"\" \/><\/div>\n\n<p><span style=\"font-weight: 400;\">\u201cIf you\u2019re using a personalized image with someone\u2019s name on it, like a birthday cake, don\u2019t miss the ALT text. You can either add a merge tag for an extra layer of personalization or make the ALT text generic enough that it matches the message without losing the experience. It does take a bit more coding, but you can do it as long as you have that data in your ESP.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here are some examples to try:<\/span><\/p>\n<p><strong>Generic ALT text with a flexible fallback personalization parameter in the image<\/strong><\/p>\n<pre><code style=\"color: #fff; background: #333;\">&lt;img alt=\"a good morning cup of coffee for you\" src=\"https:\/\/image.ltms.app\/pi\/9c9g2puty6bzmr24gwcf3tu72.png?firstname={{={{FirstName}}|Friend}}\"\/&gt;<\/code><\/pre>\n<p><strong>Personalized ALT text with a flexible fallback personalization parameter in the image<\/strong><\/p>\n<pre><code style=\"color: #fff; background: #333;\">&lt;img alt=\"Good morning,{{FirstName}} - enjoy this cup of coffee!\" src=\"https:\/\/image.ltms.app\/pi\/9c9g2puty6bzmr24gwcf3tu72.png?firstname={{={{FirstName}}|Friend}}\"\/&gt;<\/code><\/pre>\n\n<div class=\"container pt-3 pb-5 px-1\">\n\t<div class=\"row blog-cta-green rounded-5 p-4\">\n\t\t<div class=\"mx-auto col-12\">\n\t\t\t<div class=\"row d-flex align-items-center\">\n\t\t\t<div class=\"col-lg-6 col-12\">\n\t\t\t\t<p class=\"bold fs-4\">Engage with 1:1 experiences<\/p>\n\t\t\t\t<p>Deliver personalized content at scale. Use live polls, dynamic content, and advanced targeting to drive results.\n<\/p>\n\t\t\t\t<button class=\"button-blue arrow\"><a href=\"https:\/\/www.litmus.com\/email-personalization\" class=\"text-white text-decoration-none\">Personalize now<\/a><\/button>\n\t\t\t<\/div><!--col-6-->\n\t\t\t<div class=\"col-6 d-none d-lg-block\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/07\/blog-cta-email-guardian-07292024.svg\" width=\"210\" height=\"180\" alt=\"\">\n\t\t\t<\/div><!--col-6-->\n\t\t\t<\/div> <!--row-->\n\t\t<\/div><!--col-12-->\n\t<\/div><!--row-->\n<\/div><!--container-->\n\t\n\t\n\t\n\t\n\n<h2 id=\"inclusive\"><span style=\"font-weight: 400;\">Tools for accessible and inclusive coding<\/span><\/h2>\n<p>Litmus\u2019 Accessibility Checker (our <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/accessible-email-made-easy-introducing-accessibility-checks-in-litmus\">email accessibility checker<\/a>!), built directly into <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-builder\">Litmus Builder and <\/a><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\">Litmus Previews<\/a><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-builder\">, gives you visibility into important accessibility guidelines to meet the needs of the disabled community.<br \/>\n<script src=\"\/\/fast.wistia.com\/embed\/medias\/b46ozclanu.jsonp\" async><\/script><br \/>\n<script src=\"\/\/fast.wistia.com\/assets\/external\/E-v1.js\" async><\/script><\/a>\n<div class=\"wistia_responsive_padding\" style=\"padding: 56.25% 0 0 0; position: relative;\">\n<div class=\"wistia_responsive_wrapper\" style=\"height: 100%; left: 0; position: absolute; top: 0; width: 100%;\">\n<div class=\"wistia_embed wistia_async_b46ozclanu seo=false videoFoam=true popover=true\" style=\"height: 100%; width: 100%;\"><\/div>\n<\/div>\n<\/div>\n<h3 class=\"mt-5\"><span style=\"font-weight: 400;\">1. Automatic accessibility checks<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Scan your email for 40+ accessibility areas, with detailed reports and guidance on any issues found. With Litmus\u2019<\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-builder\"><span style=\"font-weight: 400;\"> Email Builder<\/span><\/a><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">, you can check your code as you work to ensure it meets your subscribers\u2019 needs.<\/span><\/span><\/p>\n<h3><span style=\"font-weight: 400;\">2. Visual impairment filter<\/span><\/h3>\n<p><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Make sure your email looks right against four different visual impairment filters mimicking different kinds of <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/how-to-design-for-colorblindness\">colorblindness<\/a>, so you can double check design elements like color contrast, negative space, and font size.<\/span><\/span><\/p>\n<img decoding=\"async\" src=\"https:\/\/d33v4339jhl8k0.cloudfront.net\/docs\/assets\/55ad6bf6e4b0b0593824e281\/images\/64adce6ba9d61472afe08884\/file-meM3V7RKDn.jpg\" alt=\"An example of the accessibility checks in Litmus\" \/>\n<h3><span style=\"font-weight: 400;\">3. NVDA screen reader preview<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Our NVDA screen reader integration supports over 80 languages so you can make sure your email looks good <\/span><i><span style=\"font-weight: 400;\">and <\/span><\/i><span style=\"font-weight: 400;\">sounds good.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">These tools are available in every single Litmus plan because we believe that creating more accessible, inclusive emails is an important part of making email marketing better for everyone.<\/span><\/p>\n\n<div class=\"container pt-3 pb-5 px-1\">\n\t<div class=\"row blog-cta-green rounded-5 p-4\">\n\t\t<div class=\"mx-auto col-12\">\n\t\t\t<div class=\"row d-flex align-items-center\">\n\t\t\t<div class=\"col-12 text-center\">\n\t\t\t\t<p class=\"bold fs-4\">Start making a difference today<\/p>\n\t\t\t\t<p>Maximize your email\u2019s impact with Litmus to ensure accessibility and inclusivity for all subscribers \u2014 no matter their abilities.<\/p>\n\t\t\t\t<button class=\"button-blue arrow\"><a href=\"https:\/\/www.litmus.com\/email-testing\" class=\"text-white text-decoration-none\">Create Inclusive Emails<\/a><\/button>\n\t\t\t<\/div><!--col-6-->\n\t\t\t<div class=\"d-none\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/07\/blog-cta-email-guardian-07292024.svg\" width=\"210\" height=\"180\" alt=\"\">\n\t\t\t<\/div><!--col-6-->\n\t\t\t<\/div> <!--row-->\n\t\t<\/div><!--col-12-->\n\t<\/div><!--row-->\n<\/div><!--container-->\n\t\n\t\n\t\n\t\n\n<p><em>Originally published by <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/contributors\/alice-li\">Alice Li<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Make your emails accessible to all! Learn coding best practices for email accessibility like semantic HTML, Dark Mode, and screen reader-friendly design. <\/p>\n","protected":false},"author":3,"featured_media":113198,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[520],"blog_category":[53],"class_list":["post-3494","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-email-accessibility","blog_category-tips-resources"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Build Accessible Emails: How to Make Your Code More Accessible - Litmus<\/title>\n<meta name=\"description\" content=\"Make your emails accessible to all! Learn coding best practices like semantic HTML, Dark Mode, and screen reader-friendly design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/7-simple-tricks-to-make-your-email-code-more-accessible\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Email Marketer\u2019s Guide to Coding for Accessibility\" \/>\n<meta property=\"og:description\" content=\"Make your emails accessible to all! Learn coding best practices like semantic HTML, Dark Mode, and screen reader-friendly design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/7-simple-tricks-to-make-your-email-code-more-accessible\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-08T01:56:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-23T20:02:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/04\/Coding-for-Accessibility.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"725\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build Accessible Emails: How to Make Your Code More Accessible - Litmus","description":"Make your emails accessible to all! Learn coding best practices like semantic HTML, Dark Mode, and screen reader-friendly design.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/7-simple-tricks-to-make-your-email-code-more-accessible","og_locale":"en_US","og_type":"article","og_title":"Email Marketer\u2019s Guide to Coding for Accessibility","og_description":"Make your emails accessible to all! Learn coding best practices like semantic HTML, Dark Mode, and screen reader-friendly design.","og_url":"https:\/\/www.litmus.com\/blog\/7-simple-tricks-to-make-your-email-code-more-accessible","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2025-05-08T01:56:04+00:00","article_modified_time":"2026-03-23T20:02:40+00:00","og_image":[{"width":1380,"height":725,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/04\/Coding-for-Accessibility.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/7-simple-tricks-to-make-your-email-code-more-accessible#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/7-simple-tricks-to-make-your-email-code-more-accessible"},"author":{"name":"","@id":""},"headline":"Email Marketer\u2019s Guide to Coding for Accessibility","datePublished":"2025-05-08T01:56:04+00:00","dateModified":"2026-03-23T20:02:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/7-simple-tricks-to-make-your-email-code-more-accessible"},"wordCount":3408,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/7-simple-tricks-to-make-your-email-code-more-accessible#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/04\/Coding-for-Accessibility.png","keywords":["Email Accessibility"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/7-simple-tricks-to-make-your-email-code-more-accessible#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/7-simple-tricks-to-make-your-email-code-more-accessible","url":"https:\/\/www.litmus.com\/blog\/7-simple-tricks-to-make-your-email-code-more-accessible","name":"Build Accessible Emails: How to Make Your Code More Accessible - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/7-simple-tricks-to-make-your-email-code-more-accessible#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/7-simple-tricks-to-make-your-email-code-more-accessible#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/04\/Coding-for-Accessibility.png","datePublished":"2025-05-08T01:56:04+00:00","dateModified":"2026-03-23T20:02:40+00:00","description":"Make your emails accessible to all! Learn coding best practices like semantic HTML, Dark Mode, and screen reader-friendly design.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/7-simple-tricks-to-make-your-email-code-more-accessible#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/7-simple-tricks-to-make-your-email-code-more-accessible"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/7-simple-tricks-to-make-your-email-code-more-accessible#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/04\/Coding-for-Accessibility.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/04\/Coding-for-Accessibility.png","width":1380,"height":725,"caption":"Icon of coding emails"},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/7-simple-tricks-to-make-your-email-code-more-accessible#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"Email Marketer\u2019s Guide to Coding for Accessibility"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=3494"}],"version-history":[{"count":18,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3494\/revisions"}],"predecessor-version":[{"id":123292,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3494\/revisions\/123292"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/113198"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=3494"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=3494"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=3494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}