What does the Accessibility check flag before you send?

Some of your readers listen to your newsletter instead of looking at it. Others open it with images turned off, or in a version of Outlook that ignores half of what a modern email can do. A newsletter that looks fine on your screen can leave all of them with gaps: a picture with nothing to say what it shows, a button that reads as plain text, a list of links that all just say “click here”.

The Accessibility check reads your draft for those gaps before you send. You’ll find it as the Accessibility row in the Content Check panel on the right-hand side of the composer when you click Preview and schedule, alongside the Bounce Risk and Email Weight rows. If nothing needs attention it reads Pass, with a green check mark. If something does, it reads Issues, with a warning sign.

Reading the results

Click the arrow next to the reading to open it. Each problem gets one line saying what’s wrong, with a short reason underneath and, where one applies, a link to the WCAG accessibility guideline it falls under.

Go back to editing to fix them. When you’re done, return to Preview and schedule and the check runs again on your saved draft.

What the check looks for

Images with no alt text

Alt text is the short description a screen reader reads aloud in place of an image, and what many email apps show when images are blocked. An image block with none leaves those readers with nothing.

What to do: open the image block’s settings and describe what the image shows, or what it’s for if it’s a link. Your logo isn’t flagged, because Letterhead fills its alt text in for you.

The check also looks inside custom HTML blocks. An image there is flagged when its <img> tag has no alt attribute, or an alt that is only spaces, and the problem is listed by the image’s web address. An image with an empty alt (alt="") is left alone, because that’s how HTML marks a purely decorative picture. To fix one, edit the block’s HTML and add a short description to the image’s alt.

Buttons with no readable label

A button needs words. Two kinds get flagged:

• A button with no label text — a screen reader has nothing to announce, so the reader doesn’t know what the button does.
• A button whose label is only an image — when images are off, the button is empty, and a screen reader has nothing to read. A label image with its own alt text is fine.

What to do: give the button a short label that says what happens when you click it, like “Read the full story” or “Get tickets”.

Buttons that won’t show as buttons in Outlook

A button is drawn as a block of solid color so it keeps its shape in every inbox. If its background color is empty or transparent, there’s nothing to draw, and Outlook shows the label as ordinary text.

What to do: pick a solid background color for the button.

Button text that’s hard to read

Button text needs enough contrast against the button’s color to be readable, especially for readers with low vision. The check uses the standard most accessibility guidelines use, a contrast ratio of at least 4.5 to 1, and flags a button whose text falls short.

What to do: darken the button or lighten the text (or the other way round) until the two clearly stand apart.

The check only judges a button whose colors it can read exactly: a background color set on the button itself as a plain color code (like #1A73E8), and text that is either left at its default white or set the same way. A button colored some other way, such as a partly transparent color, isn’t judged. If your newsletter takes its button colors from your channel’s settings, none of its buttons are judged.

Body text that’s hard to read

Body text needs enough contrast against its background too. For a text block, the check compares the block’s text color with the block’s background color, using the same contrast ratio of at least 4.5 to 1 as for buttons, and flags a block that falls short. The problem is listed with the first few words of the text.

What to do: darken the text or lighten the background (or the other way round) until the two clearly stand apart.

The check only judges a block that has both a text color and a background color set on it as plain color codes. It leaves a block unjudged when:

• either color isn’t set on the block itself, because then the color comes from your channel or the rest of the newsletter, which the check can’t see;
• your channel’s settings replace the text or block background color;
• the block, or the section it sits in, has a background image, because the image is what’s behind the text; or
• the only colors are ones you applied to a run of words inside the text, which aren’t compared. A block whose words all carry their own color may be judged on a block color a reader never sees.

Headings that skip a level

Screen readers let a reader jump from heading to heading, a bit like skimming a table of contents. When a heading drops more than one level at once, say from a level-2 heading straight to a level-4, it sounds like a section is missing. The check follows every heading in the order a reader meets it, from heading blocks and from headings inside text blocks, and flags the one that skipped, along with the two levels involved. A heading block is named by its text; a heading inside a text block is listed as a text block heading.

Going back up a level, or several, is always fine; only a jump down of more than one level is flagged.

What to do: change the flagged heading’s level so it sits one step below the heading before it.

Links that don’t say where they go

A screen reader can read out every link in an email as a list, without the sentences around them. If your links say “click here”, “read more” or “learn more”, that list is the same few words over and over.

What to do: link the words that say where the link goes. Instead of linking “click here” in “To see the full schedule, click here”, link “see the full schedule”.

What it doesn’t check

• Colors applied to words inside a text block, and colors that come from your channel. Text contrast is judged only on text blocks, using the block’s own text and background colors. Heading blocks aren’t checked for contrast.
• Images outside image blocks and custom HTML blocks. Alt text is checked on image blocks and on images in custom HTML, so images in curations and feeds aren’t checked.
• Links outside your own text. Link wording is checked in text you write directly in a block, like a text, heading or button block. Links inside curations, feeds and custom HTML blocks aren’t checked.
• Promotions. A promotion’s headline is taken into account when the check follows your headings, but it never flags a promotion itself, because what a promotion shows is decided when your newsletter sends.

It advises, it never blocks

The Accessibility check is a heads-up, not a gate. A finding won’t stop you from scheduling or sending. The reading reflects your saved draft, so after you fix something, save, and it updates.

It looks at whether your newsletter is easy to read and use. For whether your links actually work, see What does the Links check flag before you send?, and for content that mailbox providers may refuse, see What is Bounce Risk, and how do I lower it?.