Product deep dives

Building accessible emails with the Beefree SDK: HTML output, UI improvements, and best practices

Samantha Hoffmann
Samantha Hoffmann
December 8, 2025
|
5 min read

Summary: This article explains how the Beefree SDK helps companies create accessible emails and inclusive editing experiences. You will learn why accessibility matters, how the SDK produces HTML that works well with assistive technologies, and how features like Check Endpoints, Frontend Commands, and the Plain Text API support more reliable and readable content. We also look at improvements in the builder UI, such as keyboard navigation, ARIA support, and higher contrast settings, along with upcoming updates that will make the editor even more usable for everyone. And, we’ve included a link to Beefree SDK’s VPAT.

Note: This blog post is based off of a December 2025 Spotlight Session. To watch the Spotlight Session, use the viewer below.

Why accessibility matters: The legal, moral, and business cases

Accessibility is not something you add at the end of a project, but is a core part of creating digital experiences that people can actually use, and is a foundational principle at Beefree.

This idea comes from the original purpose of the web, which inventor Tim Berners Lee described as having power through its universality. Information should be available to everyone, no matter their ability or preferred way of navigating content.

Email is part of that vision because it remains one of the most widely used tools for communication today.

People read and interact with email in many different ways. Some rely on a keyboard rather than a mouse. Others use screen readers to hear the content aloud. Many users zoom their displays to 200 percent to make text easier to see. Readers with dyslexia or colorblindness depend on thoughtful structure, readable typography, and strong contrast to understand what is on the screen.

These needs are not rare or unusual. They are part of every audience.

  • About 8 percent of Caucasian men experience colorblindness
  • About 7 percent of working age adults have dexterity challenges
  • About 35 percent of U.S. entrepreneurs are dyslexic

In the email marketing industry, we often cite statistics about the percentage of emails opened in Outlook desktop (4%), emails opened in Gmail (24%), as reasons why we should make sure our code works across multiple clients, but why do we not give similar accessibility statistics the same weight?

There are also legal expectations in place. The European Accessibility Act, effective since June 2025, requires online services of all sizes to follow accessibility guidelines. Similar standards exist across the United States, Canada, Australia, and India for many businesses.

Together, these points highlight an important truth: Accessibility is a responsibility, a practical necessity, and a way to create stronger, more effective communication. Making your emails accessible ensures that more people can read them, understand them, and take action.

Understanding accessibility in the email ecosystem

Email is one of the most familiar and reliable communication tools, yet it operates in a very different world than the modern web. Each major client has its own approach to HTML and CSS. Gmail may display something one way, Outlook may rewrite the code entirely, and Apple Mail may support only part of a feature you expected to use. These shifts can affect everything from layout to spacing to basic readability.

For most readers, these differences show up as small visual changes. For people who use assistive technologies, they can have a much bigger impact. When an email client removes or alters structural elements, a screen reader may lose context. A heading might not announce itself as a heading. A button might not scale when a user zooms in. A layout that seems simple on the surface may become confusing once the underlying markup is changed.

This is why accessible email depends on HTML that can withstand these inconsistencies. Structure needs to be clear, styles need to be stable, and important information needs to remain intact, no matter which client displays it. When the foundation is reliable, assistive tools can interpret the content more accurately, and users can move through it with more confidence.

How the Beefree SDK generates accessible HTML

The Beefree SDK is designed for the realities of the email ecosystem. Instead of relying on modern browser features that email clients often strip out, it uses stable patterns that perform reliably across clients. This results in HTML that is easier for assistive technologies to interpret and is more consistent for readers.

The SDK:

  • Uses semantic HTML for headings, paragraphs, lists, and tables
  • Applies longhand, inline CSS that survives when clients remove shorthand styles
  • Encourages best practices such as:
    • Setting the language of the email
    • Adding alt text for all images
    • Using text-based buttons that scale with user settings

These choices preserve structure, protect meaning, and support more inclusive reading experiences.

Semantic structure and why it matters in Beefree SDK

Structure is one of the most important parts of accessible email. Clear headings, paragraphs, and table markers help readers and assistive tools understand how content is organized.

The Beefree SDK uses semantic elements such as H1 through H6 headings, paragraph tags, table headers, and layout tables marked with the role="presentation" attribute to distinguish decorative tables from data. This helps screen readers move through content in a predictable way.

Buttons also matter. Image-based buttons often break down when a user adjusts text size or switches to high contrast mode. In contrast, text-based buttons created in the SDK scale properly, remain readable, and are reliably announced by screen readers. This supports a more consistent experience for everyone.

Helping screen readers understand your content

Screen readers rely on clear signals to understand what an email contains, how it should sound, and what each element represents. Two simple choices, language settings and alt text, make a major difference in how well that experience works for users.

Setting the language of a message tells the screen reader how to pronounce the content. Without this attribute, the reader has to guess based on the user’s device settings, which can lead to incorrect pronunciation and a confusing listening experience. When you select a language in the Beefree SDK, it becomes part of the HTML and guides the screen reader to announce the text in the correct voice and rhythm.

Alt text plays a similar role for images. If an image communicates meaning, users who cannot see it need a clear description of what it shows. The SDK makes it simple to add alt text for each image and also includes an option to generate it with AI, either one image at a time or across the whole message. This is especially helpful when you want to ensure nothing is missed during content creation.

These two features work together to support a more complete and consistent experience for people who navigate email through audio. They help screen readers deliver the right context, describe visuals accurately, and guide users through the message with confidence.

Checking content for accessibility issues

Creating accessible email is easier when potential issues are caught early. The Beefree SDK supports this through Check Endpoints, a set of tools that identify common accessibility gaps before a message is sent. These checks look for things that are easy to miss during design but have a real impact on readability and usability.

Check Endpoints can highlight elements with low color contrast and point out when a message includes more than one primary heading. They can also surface text that is too small to read comfortably, along with missing headings and missing alt text, both of which are important for users who rely on screen readers. Check Endpoints are available for all paid plans as part of the Content Services API. For a full list of available checks you can call, visit our documentation.

These checks become even more helpful when combined with Frontend Commands. When an issue is found, the builder can automatically bring the user to the correct module, highlight it, and open its settings. This creates a smooth workflow that helps teams resolve problems quickly without searching through the entire layout.

The Beefree app uses these tools through its Smart Check feature, and the same components are available to anyone building with the SDK. You can create a custom review process that fits your product while helping users deliver more accessible content.

Together, Check Endpoints and Frontend Commands give teams a practical way to catch issues early and guide creators toward stronger, more inclusive results.

For more information on Check Endpoints and Frontend Commands, we recommend watching our Spotlight Session.

How the Beefree SDK builder supports accessible editing

Accessibility is not only about the final HTML output. It also applies to the editing experience itself. Many users rely on assistive technologies or keyboard-only navigation, and the Beefree SDK builder includes improvements that support those workflows.

Keyboard navigation

The editor is fully operable using a keyboard. Users can add blocks, navigate the canvas, reorder items, move between controls, and activate actions without using a mouse. The interface follows a predictable navigation order and includes focus indicators that make it clear where the user is at any time.

ARIA attributes

ARIA attributes add helpful context for screen readers. The builder uses several attributes to clarify the purpose and behavior of interface elements.

The aria-label attribute is used for controls whose purpose is not obvious from an icon alone, such as the desktop and mobile stage-view toggles. The aria-hidden attribute hides decorative icons from screen readers so that only meaningful information is announced. The role attribute differentiates decorative layout tables from tables that represent structured data.

These attributes help assistive tools interpret the interface more accurately.

Higher contrast theme

A high contrast default theme released in November 2025 improves text to background contrast across the editor. This theme meets WCAG AA requirements and creates a more readable interface for users with low vision.

Supporting accessible reading with plain text

Plain text versions play an important role in email accessibility. Some users rely on screen readers that handle plain text more smoothly than complex HTML. Others read email on older devices, in low bandwidth environments, or simply prefer a simpler view that feels easier to process.

The Beefree SDK makes it easy to generate a clean text only version of any message through the Plain Text API endpoint. This output removes visual styling but keeps the meaning and structure of the content intact. It gives users a reliable fallback that supports clear reading and improves overall deliverability.

If you would like to explore how the Plain Text API works or how to add it to your workflow, you can find a detailed overview in our dedicated blog post.

Continuing to improve accessibility together

Accessibility is not a one time project. It is an ongoing commitment that grows and evolves as standards change and user needs become clearer. The Beefree SDK follows this approach by continually improving both the builder experience and the HTML output it creates.

Our team is currently expanding font size options to give creators more flexibility in designing readable layouts. We are also working toward full usability at 200 percent zoom for January 2026, which is an important guideline for users with low vision. On the output side, we are exploring updates to font sizing with relative units that support smoother scaling across clients.

To support greater transparency, we recently published our VPAT in the Beefree SDK Trust Center. This document outlines the accessibility features we have completed, the areas we are actively improving, and the standards we use to guide our work. It provides a clear view of our current progress and our long term commitment to building a fully inclusive product.

We are also refining our accessibility checks and looking for new ways to help creators identify issues earlier in the design process. These improvements aim to make email creation more intuitive and supportive for everyone who uses the builder.

Your feedback plays an important role in this work. Many of our accessibility improvements begin with ideas from customers who want to create more inclusive content. If you have suggestions or specific needs, we encourage you to reach out through our support channels. Your insights help us shape a better and more accessible product.

Samantha Hoffmann
Samantha Hoffmann
December 8, 2025
|
5 min read