{"id":254787,"date":"2025-05-24T05:01:01","date_gmt":"2025-05-24T05:01:01","guid":{"rendered":"https:\/\/peraltafinancing.com\/business\/marketing\/build-accessible-emails-how-to-make-your-code-more-accessible\/"},"modified":"2025-05-24T05:01:01","modified_gmt":"2025-05-24T05:01:01","slug":"build-accessible-emails-how-to-make-your-code-more-accessible","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=254787","title":{"rendered":"Build Accessible Emails: How to Make Your Code More Accessible"},"content":{"rendered":"


\n<\/p>\n

tags to be screen reader-friendly:<\/span><\/p>\n
\n\n
\n\n
\n\n\n\"Litmus\"\n<\/a>\n\n<\/td><\/tr><\/table>\n<\/td><\/tr><\/table>\n<\/code>\n<\/code><\/pre>\n
Screen reader: Accessible email header<\/strong><\/p>\n
https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/05\/accessible.mp3<\/a><\/audio><\/p>\n

As you can hear, there\u2019s quite a difference!<\/span><\/p>\n
How to code accessible tables for email layouts in Litmus<\/span><\/h4>\n
If there\u2019s one aspect of <\/span>accessible coding<\/span><\/a> 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
\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
Here\u2019s how to do it in Litmus:<\/span><\/p>\n
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.
<\/span>2. As you build your tables, add role=presentation.
<\/span>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
4. Then, update your Previews and QA tab to finish your testing process.
<\/span>5. Send it! *happy dance*<\/span><\/p>\n
4. Use semantic elements to structure your content<\/span><\/h3>\n
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
When double checking your copy, make sure any headline-worthy copy is enclosed within an <\/span><\/strong> tag: <\/span>, <\/span><\/p>\n<\/strong>, <\/span><\/p>\n<\/strong>, and so on. Similarly, make sure any body copy is housed within a <\/span> tag. When going through your email, screen readers put emphasis on specific headers, and setting up these <\/span><\/strong> and <\/span> tags will make your email easier to navigate.<\/span><\/p>\n
5. Left-align your copy, if possible<\/span><\/h3>\n
When it comes to your body text, it may be tempting to center align. However, when it comes to accessibility, <\/span>this is a big don\u2019t<\/span><\/a>! <\/span><\/p>\n
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
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
6. Check the contrast of your copy<\/span><\/h3>\n
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
If you need to manually input your color codes, check out <\/span>https:\/\/contrast-ratio.com\/<\/span><\/a>.<\/p>\n
Dodging accessible coding mistakes\u00a0<\/span><\/h2>\n
Of course, we all make mistakes. Here\u2019s a quick shortcut so you can easily fix your code:<\/span><\/p>\n\n\n\n\n\n\n\n\n\n
Common Accessibility Error<\/strong><\/th>\nFix It By\u2026<\/strong><\/th>\n<\/tr>\n<\/thead>\n
All-image emails<\/td>\nAdding images where necessary within the code of your email<\/td>\n<\/tr>\n
No ALT Text<\/td>\nAdding descriptive alt text to each image.<\/td>\n<\/tr>\n
Poor color contrast or disappearing text in dark mode<\/td>\nChoosing a color scheme that has high contrast. Think opposite sides of the color wheel.<\/td>\n<\/tr>\n
No text alignment<\/td>\nLeft-aligning your copy text. This makes it much easier for screen readers (and tbh, everyone.)<\/td>\n<\/tr>\n
Disorganized code<\/td>\nAdding role=\"presentation\"<\/code> to your tables, and semantic elements like
<\/p>\n<\/code>, <\/p>\n<\/code>, or  to create a hierarchy your screen reader can read.
(Plus it\u2019s cleaner code for you!)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
\n
\n
\n
\n
Unlock endless revenue<\/p>\n
Let\u2019s take a look at how much email-driven revenue you could be leaving on the table.<\/p>\n