Email Accessibility and Click

Click's Email Designer provides the tools and features necessary for users to create ADA (Americans with Disabilities Act), WCAG (EU Accessibility Act Web Compliance Accessibility Guidelines), European Accessibility Act (EAA), or otherwise compliant content. 

This article provides an introduction to email accessibility along with best practices for using our Email Designer to design emails accessible to the vision-impaired and those relying on screen reading devices, including audio prompts, screen readers, and keyboard-only access. 

Goals

• Understand why you should take accessibility into consideration when designing emails
• Learn what accessibility best practices are handled by Click's Email Designer
• Learn how you can design your emails to be more accessible

Why Send Accessible Emails?

Accessibility and inclusive design, in addition to being legally required in much of the world, is a moral imperative. As laws and regulations continue to develop, ensuring that digital communication content and tools are usable by people with visual, cognitive, and/or motor disabilities is essential to the success of any business using digital marketing technologies.

With 285 million people worldwide being considered to be visually impaired, blindness and other forms of vision impairment are more common than many would think. Additionally, 4.5% of the population are color blind, which can be a major impediment when color is used to convey meaning or action in messages, both in email and on the web.

Two Perspectives on Accessibility

When thinking about accessibility at Click, there are two distinct perspectives:

1. Ensuring our Email Designer is accessible
   Our Email Designer is able to be used by users who rely on screen readers, keyboard navigation, or other similar technologies, and we are working to ensure that our HTML and Free Style Editors are as well.
   
   
2. Helping our end users create accessible emails
   Our Email Designer is ideal for creating beautiful and accessible emails without a need to directly modify HTML or CSS. This means that the HTML generated by our Designer follows crucial accessibility guidelines to ensure that the resulting email is accessible, and that our UI makes it simple for your team to follow accessibility best practices.

While our Email Designer generates clean, semantic HTML output, full compliance with accessibility regulations depends on the design and content choices made by the user who is building the email. The rest of this article focuses on best practices for building accessible emails, which can be implemented using any of our Email Editors. 

Accessibility Best Practices Automatically Applied to HTML Generated by Click's Email Designer

Our Email Designer will take care of the following accessibility best practices for you:

Role Presentation

Presentational elements are automatically marked with the ARIA attribute role="presentation".

This helps screen readers distinguish between layout tables (used purely for visual design) and data tables (which contain meaningful content). Without this distinction, screen readers may attempt to interpret design tables as structured data, causing confusion for users relying on assistive technologies.

This practice aligns with WCAG success criterion 1.3.1 (Info and Relationships) by ensuring that information and structure can be programmatically determined.

Semantic Elements

The Email Designer provides dedicated content blocks for Titles and Paragraphs, encouraging the use of semantic structure in email design.

• The Title Block is rendered using semantic <h1> tag by default, which helps define the main heading of the email. This is important for screen readers and assistive technologies that rely on headings to navigate content efficiently.
  
  
• Additional heading levels (<h2> and <h3>) can be created by configuring the Title Block properties; only one <h1> should typically be used per message to maintain a clear hierarchy.
  
  
• The Paragraph Block uses the standard <p> tag, ensuring that body text is properly marked up and easily interpreted by assistive tools.

Using these semantic elements contributes to a more accessible reading experience and aligns with WCAG 2.1 success criteria 1.3.1 (Info and Relationships) and 2.4.6 (Headings and Labels).

Language Attribute on the <html> Tag

To improve accessibility and assistive technology support, the Email Designer automatically includes the appropriate lang attribute in the <html> tag of the email HTML.

• This attribute indicates the primary language of the email content (e.g. lang="en" for English, lang="fr" for French).
  
  
• Screen readers and other assistive tools rely on this attribute to determine pronunciation rules and text-to-speech behavior. Without it, screen readers may default to an incorrect language model, leading to a poor or confusing experience for non-native users.

The lang attribute supports compliance with WCAG success criterion 3.1.1 (Language of Page), which requires that the language of the content be programmatically defined.

While the Email Designer sets a default lang based on your environment's language settings, we recommend reviewing and updating it as needed to ensure it matches the actual language used in your email content.

ALT Text for Images and Icons

The Email Designer allows users to easily add alternative text (ALT Text) to all images and icons through a dedicated field in the sidebar panel.

• ALT Text provides a textual description of visual content, enabling screen readers to convey the meaning or purpose of the image to users with visual impairments.
  
  
• Adding meaningful ALT Text is essential for non-decorative images, such as product photos, logos, or icons that communicate information or support user actions.

This functionality supports WCAG 2.1 success criterion 1.1.1 (Non-text Content), which requires that all informative images include text alternatives.

By default, images added in the Email Designer have an empty alt attribute (alt="") unless specified otherwise. This is intentional: it signals to screen readers that purely decorative images should be ignored. To ensure compliance, users should review and customize the ALT Text for each image to reflect its content and context. 

Keyboard Navigation

Ensuring that designs are fully keyboard-navigable is a crucial aspect of making them accessible to users who rely on assistive technologies or prefer to navigate without using a mouse. It is important to consider how your designs behave for recipients who rely on keyboard navigation to interact with email content.

The Email Designer's built-in keyboard accessibility: The Email Designer allows users to create content with clean HTML that is generally accessible via keyboard controls. Most email clients support basic keyboard navigation, such as moving between links and buttons using the Tab key and activating them with Enter or Space bar.

Focus on interactive elements: The Email Designer ensures that interactive elements such as buttons and links are keyboard accessible by default. This means that recipients can navigate these elements using the Tab key and interact with them using the appropriate keyboard shortcuts. Proper tab order and focus management are essential for users with motor impairments who rely on keyboard navigation.

Mobile Responsiveness

The Email Designer ensures that all email designs are fully responsive, meaning they automatically adjust to display correctly on a wide range of devices, including desktops, tablets, and smartphones. This is essential for providing a seamless and accessible experience to users, no matter what device or screen size they are using.

• Fluid Layouts: The Email Designer uses fluid grid systems that adapt the layout based on screen width, ensuing that content is always legible and properly aligned.
  
  
• Mobile Friendly: Emails created in the Email Designer are optimized for mobile screens, ensuring that text is readable, images scale correctly, and buttons remain tappable without zooming or horizontal scrolling. 
  
  
• Touch Accessibility: Buttons and links are sized appropriately for touch devices, ensuring ease of interaction for users with motor impairments.

These responsive features help fulfill WCAG 2.1 success criterion 1.4.10 (Reflow), which ensures that content remains usable without requiring horizontal scrolling on small screens.

Additionally, responsive design plays a key role in accessibility by ensuring that users with visual impairments, including those who use screen magnifiers or other assistive tools, can easily navigate the content across various devices.

Content Creator Responsibilities for Creating Accessible Content

Even when you are using the Email Designer to design your emails, there are certain accessibility requirements that you, as the content creator, are responsible for implementing:

• Include a descriptive subject for the email
• Pay attention to color contrast
• Optimize for keyboard navigation
• Use the right font sizes
• Optimize for keyboard navigation
• Provide ALT text for images
• Do not use text in images
• Avoid blinking GIFs and animations
• Use meaningful hyperlink text
• Use justified text responsibly
• Make sure your HTML is well formatted
• Generate a text version of your email

Include a descriptive subject for the email

The subject line is the first text recipients will read, or have read to them by a screen reader. To determine whether an email message is relevant to the recipient's needs, the subject should be meaningful, descriptive, and concise.

Pay attention to color contrast

People with low-vision or color deficiencies can be less sensitive to luminosity or color contrasts when viewing text and images in an email message. To improve legibility, it’s important to incorporate sufficient contrast between text and the background of an email message. 

In addition to accessibility, another good reason to pay attention to color contrast is because some spam filters consider low contrast between text and background colors to be a red flag, interpreting it as a sign that the sender is trying to hide some content, like an unsubscribe link, from the recipient.

Tools like Color Oracle can be used to simulate a variety of color deficiencies and ensure you are providing enough contrast for all email recipients to understand your email content.

Optimize layout and design for keyboard navigation

HTML email newsletters and templates are commonly coded using tables, as these are a reliable way to create layouts that work across desktop, webmail and mobile email clients.

If not planned and built thoughtfully, people who rely on keyboard navigation (or screen readers, which read tabular content from left-to-right and from top-to-bottom) might not receive the content in the order intended. 

For example, in the image below where the table is consists of two columns and two rows comprising a body and sidebar for a template, the text would be read aloud in the order of the first body cell > first sidebar cell > second body cell > second sidebar cell, rather than reading the entirety of the body text, then reading the sidebar text.

To ensure the content is read in the correct order, a better layout would be a table of two columns and one row, as shown in the following example:

Maintaining a single-column layout on all screens – regardless of size – reduces the likelihood of content being parsed and read aloud by screen readers in either an incorrect order, or in a way in which the context of the content is unclear. 

In addition to the advice above, here are some other suggestions to maximize keyboard navigability:

• Test keyboard navigation: When designing emails, test how well users can navigate through interactive elements using only the keyboard. Ensure that all interactive content is easily accessible via keyboard.
  
  
• Focus states: Ensure that focus states are visually clear for interactive elements, such as buttons and links, so that keyboard users can easily identify where they are on the page.
  
  
• Avoid sole reliance on color to convey meaning: Relying only on color to communicate information can create accessibility barriers for users with visual impairments or color blindness. For example, using red text to indicate an error without any accompanying icon or message may not be clear to all users. To ensure content is accessible, always pair color with another visual indicator, such as text labels, icons, or patterns. This makes your message understandable for everyone, regardless of how they perceive color.

By keeping these principles in mind, content creators can ensure that their emails are more accessible to people who rely on keyboard navigation, while increasing its inclusivity for all users.

Use the right font sizes

In Clicks' Email Editors, content creators can choose from a range of font sizes, giving them control over the visual style of their content. However, it is important to select appropriate font sizes to ensure readability and accessibility for all recipients, especially those with visual impairments.

Text that is too small may be difficult to read for users with low vision, and could potentially cause eye strain for other recipients. According to WCAG 2.1 success criterion 1.4.4 (Resize text), text should be resizable up to 200% without loss of content or functionality. While the Email Designer automatically adjusts text for responsive design, it's the responsibility of the content creator to ensure the base font size is large enough for comfortable reading.

Here are some best practices:

• Set legible font sizes: For body text, use a font size of at least 14px to ensure it is readable on both mobile and desktop devices. For headings, choose a size that clearly differentiates them from the body text.
  
  
• Avoid very small text: Be careful with font sizes below 12px, as they can be hard to read, especially on smaller screens or for people with visual impairments.
  
  
• Test across devices: Ensure the chosen font size remains legible and accessible on different screen sizes, particularly on mobile devices, where text can appear smaller.

Click's Email Editor's provide flexible controls for setting font sizes, however they do not automatically enforce a minimum font size. It is up to the content creator to choose legible font sizes, particularly for body text, headings, and calls to action.

Provide ALT Text for images

All informative images should include an appropriate text alternative (ALT Text) that conveys the meaning, or purpose of the image. Purely decorative images – such as ‘spacer’ images for preserving layouts – should carry an empty or null alt attribute (alt=””) to inform screen readers that the image is decorative and should be ignored.

For example, a company logo is an informative image and should feature a text alternative. In HTML email code, this can be done using the alt HTML attribute, to convey its meaning to screen reader users:

<img src="https://www.clickdimensions.com/assets/uploads/logo.png" alt="Click company logo" />

Click's Email Editors provide the opportunity to add ALT Text to images through their respective image properties settings. 

NOTE: Including alt text is also a good idea because the ALT Text will be displayed if your recipient's email client cannot show the relevant image, ensuring the recipient has an idea of what they should be seeing.

Do not use text in images

While Click provides powerful tools for creating accessible and responsive email designs, it's important to note that text in images is not recommended and is left to the content creator's discretion.

Why it's problematic: Text embedded within images cannot be read by screen readers, search engines, or email clients that block images by default. This means that users with visual impairments, those who rely on assistive technologies, or users who cannot view images will miss out on important content. Additionally, if the images fail to load, the message is lost entirely.

A bad practice in email marketing: Using text in images also hinders the performance of your design in terms of SEO (Search Engine Optimization) and email client accessibility. Text in images reduces the ability to index content, negatively impacting searchability and discoverability. It also requires users to download and view images, which can be problematic for those with slower internet connections or limited data plans.

Best practices for content creators:

• Avoid using text in images whenever possible. Use text blocks within the email itself for better accessibility and visibility.
  
  
• If you must use text in an image (for design purposes), ensure that you include ALT Text that describes the content of the image clearly.
  
  
• Keep in mind that important calls to action (e.g. "Sign Up Now" or "Learn More") should always be in text form so users don't miss out due to image blocking.

Avoid blinking GIFs and animations

Using blinking elements or overly animated content can be visually distracting, cognitively overwhelming, and - most importantly - harmful for certain users, especially those with neurological or cognitive disabilities such as epilepsy, ADHD, or motion sensitivity.

According to WCAG 2.1, several success criteria address flashing and animated content.

2.3.1 Three Flashes or Below Threshold (Level A)

Content must not flash more than three times in any one-second period unless the flash is below the general flash and red flash thresholds. This is intended to prevent seizures in individuals with photosensitive epilepsy.

2.2.2 Pause, Stop, Hide (Level A)

If content moves, blinks, scrolls, or auto-updates and lasts longer than five seconds, users must be able to pause, stop, or hide it. While this is more applicable to web content, the principle also applies to animated GIFs, videos, and other media embedded in emails.

Recommendations for content creators:

• Avoid blinking content entirely: Do not use any blinking text or images, especially if it blinks more than three times per second. Pay special attention when you add animated GIFs and videos to your designs.
  
  
• Use animation sparingly and gently: If you use animated GIFs or CSS animation, ensure the motion is smooth, subtle, and doesn't distract or overwhelm.
  
  
• Provide static alternatives: For important content delivered via animation (e.g., banners or feature callouts), include the same information in static text form.
  
  
• No GIFs with looping motion: Avoid embedding looping GIFs that could be visually stressful. If animation is necessary, make it short, slow, and preferably non-looping.

Click's Email Editors allow content creators to insert animated GIFs, but do not automatically limit or evaluate flashing content. It is the responsibility of the content creator to ensure that any included animations or visual effects follow the WCAG guidance and do not create barriers for users with neurological sensitivities.

Use meaningful hyperlink text

It is important to clearly convey the purpose of links using the link text. This text informs the reader as to what will display when the link is followed and are often used for document navigation purposes by screen reading devices.

It is recommended that generic text such as “click here” or “read more” be avoided, as these will offer little meaning, especially when read out of context by a screen reader. Instead, we recommend links in code like:

<a href="http://mycompany.com/examplelink">read our recommendations for better links<a>.

Use justified text responsibly

While Click's Email Editors offer the ability to style content in various ways, justifying content - aligning text evenly across the width of a container - should be approached carefully.

Accessibility considerations: Excessive stretching of text, common with full justification, can result in large gaps between words, which can make reading difficult, particularly for users with dyslexia or visual impairments. For users with cognitive disabilities or those relying on screen readers, overly spaced-out text may hinder comprehension.

Best practices for content creators:

• Use justified content sparingly: In paragraphs where readability is key, such as body text, consider using left-aligned text instead of full justification. This provides more consistent word spacing, which is easier for most users to read.
  
  
• Check legibility: If you decide to justify content, review how the text appears across different screen sizes and devices to ensure it remains legible and clear.

Make sure your HTML is well formatted

Superfluous and malformed code in your template can cause display issues in email clients and produce unexpected results in accessibility devices. Tools like HTML Tidy Online can be used to remove empty and unclosed tags, as well as spot common code validation issues.

Since the Email Designer automatically generates accessible, semantic HTML, this is mostly a point to consider when using an HTML Block to insert your own custom HTML into the Email Designer.

Generate a Text Version of your email

While HTML emails offer rich design and interactivity, providing a plain text version is an essential practice for ensuring broader compatibility and accessibility.

• Accessibility for assistive technologies: Some screen readers or older assistive tools perform better with plain text emails. Providing a plain text version ensures that these users can still access the core message of the email.
  
  
• Fallback for limited environments: Some email clients, firewalls, or high-security environments disable HTML rendering. In such cases, the plain text version acts as a reliable fallback.
  
  
• Improved deliverability: Email providers and spam filters often check for a plain text counterpart. Having one can improve inbox placement and reduce the likelihood of being flagged as spam.

WCAG strongly encourages making content perceivable and operable by a wide range of users and technologies. Providing a plain text version supports this goal. 

Click users can automatically generate a plain text version of any Email Template by following the directions here.

Additional Accessibility Resources

If you want to learn more about email accessibility, here are some additional resources:

• Litmus Email 2025 Accessibility Guide
• Email On Acid Accessible Email
• EU Accessibility Act Post
• EU Accessibility Act Law (full text)