Accessibility "Best Practices" Reference

Copywriters

Web/Email: Use Descriptive Headlines

The Reason:

Your subject lines should be brief but descriptive, and give subscribers an accurate idea of what's in your email. Effective subject lines aren't just good for accessibility, they also tend to increase overall subscriber engagement.
Reference Article for Descriptive Headlines

Example:

Watch this developer try to write a descriptive headline for accessibility!

Email: Use Preheaders

The Reason:

Email preheader is the summary text that follows a subject line when the email is viewed in an inbox. In many cases, it’s used to provide a short summary of the email, and is typically one sentence long.
Email preheader text is what many mobile, desktop, and web email clients show readers to give them an idea of what’s inside the message before they actually open it. In many cases, this powerful line of text can be the difference between someone opening and not opening an email.
Your subject line and preheader text can—and should—work together to create interest and encourage readers to open your email. If you do not specify any preheader text, often your brand, disclaimers, site navigation or any other initial text will show in your subscribers’ inboxes. While there’s nothing wrong with this, not including preheader text is a missed opportunity to capture your subscriber’s attention.
Reference Article for Email Preheaders

Example:

We're rolling out a new payment processing product that will make your job easier!

Web/Email: Use Proper Alt Text

  1. Keep It Succinct
    One or two sentences are more than enough in your Alt text. It should be meaningful and enticing enough for the subscribers to view the image.
  2. Proper Punctuation Is A Must
    Use proper punctuation for your screen readers to know where to take a pause and read your content better.
  3. Include The Text That Is Present In The Image
    Include the exact phrase that appears in the image to make the email message obvious. The safe bet is to also have important information in the Alt text, that doesn’t appear in the image.
  4. Don’t ‘COPY And PASTE’ Image Captions
    Screen readers and display read the captions even for blocked images. Your Alt text should offer additional information that’s not conveyed through the caption.
  5. Count On Context
    Just like your image and content should be relevant to each other, your Alt text also should consider context. You should contemplate on the information the reader is likely to get from the surrounding content and then write an Alt text that goes with it.
  6. Quotes Are Not Needed
    Let’s get a bit technical now! When you use Alt attribute in the HTML code of your email campaign, it uses double quotes to define the beginning and end of your Alt text. If you use quotes again, it will lead to broken HTML.
  7. Distinguish The Decorative Images
    Write ‘Decorative image’ as Alt text if the image is just for email ornamentation. That would enable quicker email scanning for the subscriber.
Reference Article for Alt Text

The Example (bear with me):

Stylish man dressed in leopard-print with cool sunglasses, in front of a red background.

Web/Email: Use Meaningful Link Text

The Reason:

A lot of people using screen readers will navigate the page quickly by tabbing through the links. Some screen reading apps will even create a "Table of Contents" for the page, using only the links.

If all of the links on the page read "Click Here!", there is no way for the user to know what exactly they are clicking on.

Reference Article for Link Text

The Example:

Web/Email: Write Copy That's Easy To Read

  1. Readability

     Stick to writing at an eighth-grade reading level, which will allow for around 85% of the general population to easily understand your content.

  2. Consistancy

    Use the same terms to describe the same things. For example, if you refer to an action as “edit,” don’t call it “change” later in your email.

  3. Defined

    If there’s a chance someone won’t know what a word or phrase means, take the time to define it.

  4. Easily Digestible

    Write short paragraphs and break up blocks of text with headers and bullet points. This makes content both easier to read and skim.

Reference Article on Readability

The Example:

I'm not sure what to write as an example, but I feel like you all will understand.

Designers

Web/Email: Use Color Contrast

The Reason:

This one is pretty obvious. If there's not enough contrast between the text and the background, the text becomes impossible to read for a lot of people with low-vision.

I think you all have this on lock, but here's my favorite online contrast checker:

Coolors Contrast Checker

The Example:

This is a freaking nightmare to read.

This is a WAY easier to read.

Web/Email: Don't Hide Information in Images

The Reason:

This one is trickier because a lot of our email headlines are embedded in the hero images.

I think we just need to make sure that the relavent information is conveyed through the Header, Preheader, and Alt Text.

Subscribers who use a screen reader, or have images blocked in their email client, aren't going to see information in images or infographics. Make sure the most critical content in your message is presented in text, and use images to complement that text.
Reference Article about Info in Images

Web/Email: Tips for Type

  1. Choose Legible Fonts
  2. Space Fonts Appropriately

    "Even the most legible font can be challenging to read if the letters or lines of text are too close together. Adjust the kerning and leading of your fonts so they’re as easy to read as possible."

  3. Avoid Center-Aligned Paragraphs

    These are really hard for people with dyslexia to read.

  4. Use Plenty of Whitespace
Reference Article about Email Type

The (painful) Example:

Look. At. This.

I'm not sure why this even exists.

Email Team

Email: Maintain a Logical Structure

The Reason:

You've probably heard of responsive design, and that's what we're talking about here. Depending on how they're coded, multi-column templates will sometimes resize on mobile devices or screen readers to display out of the intended order. It's important for all your subscribers to be able to view your content in a logical order no matter what device they're using, but it's especially vital for people who use screen readers.
Reference Article for Logical Structure

Example:

Desktop:

Section 1

Section 2

Section 3

Mobile:

Section 1

Section 2

Section 3

Email: Use Headers

The Reason:

"Your subscribers who use screen readers rely on page elements like tables and headers to determine the informational hierarchy of a web page or HTML email. This is how they scan and navigate through your content to access what's most important to them."
"Use HTML headings attributes like 'H1' and 'H2' to identify important sections of your content, rather than rely on style elements like colors or bold text. Well-styled text might look nice, but that doesn't mean much to a subscriber who can't see it."
Reference Article on Headers

Also important: Using a semantically logical structure is good just in general. We can always change the "look/styling" of a header, but semantically you want everything to fall in proper order (h1, h2, h3, h4, etc).

The Example:

This is an H1

This is an H3

This is an H4

Email: Include a Plain Text Version

The Reason:

“Plain-text emails are simple, and don't contain any images, rich-text formatting, or embedded links. While these emails don't include any fancy design elements, many people who use screen readers prefer them since they provide just the core content of your message. You can also choose to edit the plain-text version of your campaign in the Campaign Builder.”

Reference Article on Plain Text

Development

Web/Email: Semantic Markup

The Reason:

Semantic markup is referring to a logical HTML structure, with logical HTML elements.

Rather than having everything in a 'div', use the proper elements.

Make sure the semantic heirarchy exists.

Reference Article on Semantic Markup

The Example:

Semantic Markup Example

Web/Email: Set the Language Attribute

The Reason:

In the head of the document, establish the language attribute as 'en'.

Reference Article on Language Attributes

The Example:

Screen Shot of html code with the language attribute.

Web/Email: Set the Title Tag

The Reason:

Just like on a web page, the screen reader will read the title tag of the email before anything else.

Reference Article on Title Tags

The Example:

Screen shot of a web page tab that shows the title tag of the page.

Web/Email: Use/Don't Remove :focus Indicators

The Reason:

“While some browsers and email clients add these by default, they’re not always the most user-friendly. Consider adding your own, so you can adjust things like color contrast, brand colors, and consistency. Keep in mind, many email clients do not support the :focus selector. But subscribers who need it for email accessibility are more likely to use email clients with support for it. Campaign Monitor has a list of email clients that do/don’t support the :focus selector.”
Reference Article on :focus

The Example:

Outline styling:
Screenshot of Sass code for the button outline.

Web/Email: Add a Skip Nav Link

The Reason:

Skip Nav Links are at the top of your document, usually before the regular menu. They are normally invisible to a sighted user, but will appear if someone is using links to tab through the document.

The Skip Nav Link allows the user the option to skip over a large navigation menu, and go straight to the content on the document.

Reference Article on Skip Nav Links

The Example:

Skip Nav Link example on aph.org

Web/Email: Set Presentation Roles

The Reason:

“Setting table roles to “presentation” enables screen readers to read your email in a way that makes sense to subscribers. Without this, it will interpret the table as data and read out the HTML code.”
Reference Article on Presentation Roles

The Example:

Screenshot of html code with the presentation role set on a table.

Web/Email: Use form labels

The Reason:

It is tempting to use nothing but placeholders on a form, because they are so much more attractive.

Unfortunately screen readers will not always read the placeholders, which means some people have no idea what they are filling out.

In addition, when a sighted user clicks on the input, the placeholder dissapears, which can also lead to confusion.

Fortunately, if the design calls for nothing but placeholders, there's a dev workaround that can still keep your form accessible.

The Example:

Not Accessible:
Accessible:

General Reference

Accessibility Testing Tools

Accessibility Resources