Definition

Email decodability refers to how effectively an email's content can be interpreted and navigated by assistive technologies such as screen readers. While email accessibility broadly covers making email usable for people with disabilities, decodability specifically addresses the technical implementation that enables assistive technologies to parse and present content meaningfully.

Semantic HTML structure is the foundation of email decodability. Screen readers rely on HTML elements to understand content hierarchy and navigation. Using proper heading tags such as <h1> through <h6> in a logical order enables screen reader users to jump between sections. Using semantic list elements such as <ul> and <ol> properly announces list context. Unfortunately, many email developers use nested <div> and <span> elements for visual layout, which strips all semantic meaning and forces screen reader users to listen to every element sequentially without navigation cues.

ARIA label support across email clients is inconsistent but improving. Accessible Rich Internet Applications attributes such as aria-label and role can provide additional context for screen readers, but support varies significantly across email clients. Apple Mail and Outlook for iOS provide the best ARIA support among major email clients. Gmail's web interface provides partial support, while older versions of Outlook for desktop largely ignore ARIA attributes. Because of this inconsistent support, email accessibility strategy should prioritise semantic HTML as the primary method for decodability and use ARIA attributes as supplementary enhancements.

Best Practices

• Use semantic HTML elements instead of generic divs and spans: Replace nested <div> containers with semantic alternatives such as <header>, <main>, <section>, and <footer> where email client support permits. Use proper <h1> through <h6> heading elements in hierarchical order. Use <ul> and <ol> for lists. This provides a navigable structure for screen readers.
• Write comprehensive alt text for all images: Every <img> element must have an alt attribute. Alt text should describe the image's function and content for informative images, or be set to alt="" for decorative images so screen readers skip them. Avoid redundant phrases like image of or picture of because screen readers already announce the image role.
• Maintain a logical heading hierarchy without skipping levels: Start with a single <h1> for the email title, followed by <h2> for major sections, and <h3> for subsections. Skipping from <h2> to <h4> without an <h3> creates confusion for screen reader navigation. Test your heading structure by extracting all headings into an outline view.
• Ensure keyboard-accessible navigation for all interactive elements: All links and buttons must be reachable and activatable using the keyboard alone. Use clear focus indicators so keyboard users can see which element is selected. Avoid custom interactive components that depend on mouse hover or click events without keyboard equivalents.
• Test email decodability with actual screen reader software: Automated testing tools catch common issues but cannot replicate the screen reader experience. Test your emails with VoiceOver on macOS and iOS, NVDA on Windows, and TalkBack on Android at least quarterly. Document any issues and fix them in your template code.