{"id":196161,"date":"2025-04-21T07:22:10","date_gmt":"2025-04-21T07:22:10","guid":{"rendered":"https:\/\/peraltafinancing.com\/business\/marketing\/how-we-made-the-worlds-worst-email-accessible\/"},"modified":"2025-04-21T07:22:10","modified_gmt":"2025-04-21T07:22:10","slug":"how-we-made-the-worlds-worst-email-accessible","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=196161","title":{"rendered":"How We Made the World’s Worst Email Accessible"},"content":{"rendered":"


\n<\/p>\n

\n

Step 1: Start with an accessible foundation<\/span><\/h2>\n

At the heart of all of our emails is a foundation of HTML, CSS, and real text that helps keep all of our campaigns accessible. While a lot of brands opt for all-image emails, we prefer using as much text as possible\u2014styled with CSS to keep it on brand\u2014so that people using assistive technology like screen readers have actual content to consume.<\/span><\/p>\n

Our retro Litmus Weekly is no different. While it\u2019s heavily styled, all of that happens with CSS instead of Photoshop.<\/span><\/p>\n

If you <\/span>dig into the code<\/span><\/a>, you\u2019ll see a bunch of HTML, CSS, and semantic markup that provides not only human- and machine-readable content, but context for what that content actually means. You\u2019ll also see a whole bunch of HTML tables, too, which can be confusing for people using screen readers. Knowing this, we apply <\/span>an ARIA role<\/span><\/a> to every table element to prevent it from being read as a table.<\/span><\/p>\n

The presentation role<\/span><\/a> does exactly what it sounds like: it tells any assistive technology that the element is used for presentation only, so don\u2019t bother doing anything with it. It\u2019s what prevents screen readers from reading out every individual table row and cell to users, which is a very jarring experience.<\/span><\/p>\n

Speaking of hiding things from screen readers, we use a similar ARIA feature for those 90s-inspired bullets, too. Instead of using an ARIA role, though, we include the \u201caria-hidden\u201d attribute on the button images:<\/span><\/p>\n

\"\"<\/span><\/code><\/p>\n

Since the bullets are purely decorative, we\u2019re removing them in line with <\/span>the ARIA spec<\/span><\/a>, which aims to improve the experience for assistive technology users by eliminating redundant or extraneous content.<\/span><\/p>\n

The importance of email accessibility<\/span><\/h3>\n

One in four adults in the <\/span>United States<\/span><\/a> (U.S.) and <\/span>European Union<\/span><\/a> have a disability, and globally, it\u2019s <\/span>one in six<\/span><\/a>. Yet, accessibility challenges in digital spaces like email are often overlooked.<\/span><\/p>\n

These disabilities encompass vision impairments, color blindness, dyslexia, cognitive disabilities, age-related impairments, situational challenges (like a broken arm), and more.<\/span><\/p>\n

If your emails aren\u2019t accessible, you\u2019re missing out on a large audience\u2014and leaving significant revenue on the table, with an estimated <\/span>$1 trillion in annual disposable income<\/span><\/a>.<\/span><\/p>\n

Looking for tools to help with email accessibility? Litmus\u2019 built-in <\/span>accessibility tools<\/span><\/a> help ensure your emails can be read and experienced by all.<\/span><\/p>\n

Here\u2019s how it works:<\/span><\/p>\n

\u21b3 Source: From compliance to connection: Why businesses must embrace email accessibility<\/a><\/em><\/p>\n

These include:<\/span><\/p>\n