Content Accessibility Guide

Summary: All images and icons that are important to understanding the site need alternative text that conveys their meaning. Alternative text should focus on the purpose of the image and shouldn’t include “photo of” or “image of”.

What is alternative text?

Alternative text—often shortened to “alt text”—is a written description of an image in a website or app that is present in the code but not usually visible on the page. Through a screen reader, it communicates the meaning of the image to those who cannot see it.

Nearly all content management systems have a field for alternative text, often as part of the workflow for uploading or editing an image.

What Users of Screen Readers Hear:

Without alternative text:
“I-M-G underscore six zero four six dot J-P-G. Unlabeled image.”

With alternative text:
“A pomeranian dog running through the grass. Image.”

When do images need alternative text?

If an image conveys meaning that is important to understanding the content of a website or how to use it, it needs alternative text. Think, for example, about a job posting with an image showing a couple of employees and a dog in a dog-friendly office. It would be important to have alternative text for this image so that all site visitors know that the office is dog-friendly.

However, if the text of the job posting mentions the dog-friendly office, it is not necessary that the image’s alternative text conveys the same message. In that case, the information about the dog-friendly office is redundant.

Decorative images

Decorative images don’t need alternative text. A decorative image is there only to evoke a feeling or reinforce accompanying copy rather than to convey meaning on its own. Here is an example of meaningless “data visualization” images which reinforce the headings.

The key thing to remember when deciding an image is decorative is “does this image convey any specific meaning which isn’t delivered by written content?” When in doubt, though, add descriptive alternative text.

What makes good alternative text?

The key to writing good alternative text is to consider the image’s purpose. What is the key information the image conveys to sighted users? That is what screen reader users need to know as well.

A few other things to consider when writing alternative text:

• Keep alt text under 125 characters, since some screen readers won’t read more. Shorter is better for accessibility and SEO.
• Focus on what’s important for a user to know. Try to capture the meaning of the image in broad strokes and remember the context of the content. For example it might be relevant to identify a dog’s breed in a photo on a blog about dogs, but not so much on a blog about hiking.
• No need to write “image of…” or “photo of…”. The screen reader will automatically let people know it’s an image.
• Alternative text for images which convey a lot of information—a bar graph or nutrition facts, for example—will require an accompanying description written out on the page. The alt text should give a brief summary of what the image represents and let the reader know a more-detailed description is provided.

Summary: Text should not be added to images and uploaded to the CMS. Instead, work within the layout capabilities of your CMS to make sure text is available in the code as well as visually.

When faced with limitations in the layout capabilities of their CMS, it’s often tempting for content creators to make a new layout by putting the content they want into an image and uploading it to the site. However, the assistive technology used by people with disabilities relies on being able to directly access the individual elements of a content component: A screen reader user might scan the page by jumping from heading to heading; a user with low vision might want to enlarge all text to twice its normal size; a user with dyslexia might have a specific font that they convert all text to in order to make reading easier for them; and so on.

Since text that is part of an image can’t be customized in this way, it is important to avoid this approach. Exceptions are allowed for company logos and other cases where the way that the text is presented visually is critical to its meaning.

Be cautious with PDFs

For many organizations, PDFs can feel like an easy way to add content to a website—especially if that content already exists in PDF format.

In addition to the SEO drawbacks of PDF content, however, it can also cause accessibility challenges. PDFs can be made accessible, but it takes a bit of specialized knowledge and is usually more work than creating an accessible web page with the same content. If you want to offer PDF content as a download, consider offering the same information as a web page.

Summary: Instructions for using a site or app should not rely on sight. Instead of referring to a visual characteristic (e.g. color, position) use something available to all users (e.g. button text)

Content creators sometimes find that they want to direct a user’s attention to a specific portion of a page where the user can gain more information or take an action. They might point a user to the content in a sidebar “on the right side” or recommend pressing “the blue button.”

The trouble with references to particular visual attributes of content is that they often don’t match how everyone experiences the world. A screen reader user, for example, doesn’t experience a page as “right” and “left”, but instead moves through the page based on the order that individual elements show up in the code. Similarly, a colorblind user may not be able to distinguish certain colors—or in rare cases, any color at all—making a reference to “the blue button” difficult or impossible to act on.

A better approach is to keep layouts simple and rely on tried-and-true patterns that users are accustomed to. This allows them to quickly find the information or action they want and removes the need for references to visual characteristics altogether.

It’s worth noting that in many English-speaking cultures “above” and “below” are accepted ways of referring to either further up or further down the page. This way of referencing content is often acceptable as long as the visual order of the page matches the order of the code. To test this out, load up a page and press the tab key. You should see some sort of highlighting progress logically (most commonly left-to-right, top-to-bottom) through the page each time you press tab.

Summary: Keep the reading level low—around a 5th grade level. Avoid jargon and figurative language, define acronyms and unfamiliar words the first time you use them, and use graphics to support explanations of complex topics.

Like writing good copy in general, writing accessible copy is equal parts art and science. There are several rules of thumb—and even digital tools—to help guide you, but common sense and empathy are equally important.

Reading level

A good guideline is to aim your content at a fifth grade reading level. This doesn’t mean talking down to your audience, but it does mean keeping your sentence structure simple and your paragraphs short. This is critical for many users with cognitive and visual disabilities. It also tends to improve the reading experience for everyone, even if they read at a much higher level.

For example:

| "The new 2021 model is an exemplar of supreme power combined with pristine handling and consummate luxury.”

This sentence is dense and wordy. It comes in at an 11th grade reading level. A better way to write the same sentence would be:

| “The new 2021 model gives you power, handling, and luxury in one car.”

This sentence is easier to read and has a 4th grade reading level.

To keep reading level low, use shorter words, sentences, and paragraphs. Use common words where possible and omit needless words.

Jargon

Jargon can include industry terms, terms specific to an organization, technical language, acronyms, abbreviations, and any other words or phrases that are not widely understood. Even common words can become jargon if they have a meaning in a specific context that is different from what they normally mean. For example, an article on marketing might say:

| “With these changes to SEO strategy, you can expect 10-20% YOY organic growth.”

For most audiences, “SEO,” “YOY,” and “organic growth” are all jargon that needs to be explained.

While jargon can be problematic, it can also serve an important purpose. In a scientific discussion, for example, it may be important to distinguish precisely between “weight” and “mass”. The guiding principle, then, is to avoid jargon whenever possible. When you do need to use jargon, make sure you provide a definition for it the first time it is used on a page, unless your audience is expected to already be fully familiar with the terms you’re using. Err on the side of over-explaining, since it is often difficult to predict who will use your content or what they know.

Figurative language

Figurative language (e.g. “time is money”) should be used cautiously if at all. Users with some cognitive and developmental disabilities may have trouble understanding figurative language, as well as those who learned English as a second language or in other cultural contexts. As a rule, avoid figurative language.

Complex topics

Complex topics are—by nature—difficult to understand. Use charts and diagrams to help explain them visually. This helps many users, but especially those who have difficulty processing long or dense sections of text. Just make sure that no information is provided in graphics that isn’t also available in plain text in the body content or as alternative text for the graphic.

Summary: Organize pages using descriptive headings to help all users scan your content; write headings that put the most important words up front.

Headings are an important part of an accessible website. All major screen readers have a mode that allows blind and low vision users to quickly scan through the headings on a page. In practice, this is very similar to how a sighted person might skim the page looking for the information they want. People with difficulty focusing or who read slowly also benefit from the way headings break up the page and act as landmarks.

In order to be compatible with accessibility tools, use heading tagging to mark up headings rather than just making something “look” like a heading with styling – many CMS systems will provide heading options for just this purpose.

Headings should clearly describe the topic or purpose of the content they represent. As much as possible, they should be straight to the point and lead with the most important information.

Imagine someone was reading the headings on a page to you one at a time. The longer you have to listen to each heading before you know if the section contains the information you’re looking for, the less useful the heading is. This heading takes a moment to come to the point:

| “All-New Ways to Stay Connected”

By contrast, this version of the heading puts the main focus up front:

| “Stay Connected: Three New Methods”

Summary: Provide written transcripts for audio and video content.

Audio and video content can be difficult for some users. Those who have low vision or hearing loss—or are blind or deaf—may not be able to perceive audio or video content. Others may have a cognitive impairment that makes the pace of multimedia content challenging. Everyone may at times have a situational disability that affects their experience, like experiencing the content in a non-native language, listening with a large amount of background noise, having forgotten their headphones, or even a limited data plan or poor service.

One of the simplest and most powerful alternatives for multimedia content is a text transcript. The transcript not only lets users experience the content with whatever tools and pacing work for them, but it can also provide a significant boost to SEO by making the multimedia content available to search engine bots.

Text transcripts should be complete and should account for all important audio and visual information, not just speech. For example, videos sometimes include diagrams or other useful visuals that may not be covered in the text.

Summary: Use left-aligned text in most cases. Limit centered text to two lines or fewer—including on mobile devices. Don’t use justified text.

Text alignment has a big impact on readability for most users, but especially those with certain disabilities.

For example, justified text—text that is aligned both left and right, creating clean outside edges but stretching the copy out to fill the space in between—can lead to distracting “rivers” of whitespace within paragraphs. These “rivers” are an annoyance for many users, but cause a serious decrease in readability for some users with dyslexia and other disabilities.

Centered text should be used sparingly, but can be appropriate in some cases. Left-aligned text gives readers a “home base” to go back to every time they finish reading a line of copy, where centered text requires readers to find the starting point of the next line each time. It might not seem like a big deal, but it can have a significant impact on the readability of your content. Throw various vision and cognitive disabilities into the mix, and the experience can be downright painful.

[calm, upbeat music]
[onscreen] How to successfully build and evolve a healthcare digital front door
[voiceover] Hello everyone. First of all, thanks for listening, and thanks for indulging me as I talk about how to think and, more importantly, act towards building your digital frontdoor for healthcare systems.

Summary: Don’t use color differences as the only way to convey an idea. Do use color differences to supplement other methods of conveying meaning or distinction.

For many users, colors may be difficult or impossible to distinguish due to colorblindness or other visual disabilities. For this reason, using color alone to distinguish between two or more different things is not accessible.

However, color is an excellent supplement to other ways of distinguishing between items. For many users, it can act as a quick reference and help them make connections, without taking anything away from users with disabilities that make discerning color difficult.

For CMS admins and content creators, the most common place to encounter this is infographics and charts. In a bar graph, for example, it’s common to have a legend section with labeled boxes colored to correspond to the bars in the graph. Since this isn’t accessible, a better approach might be to use different patterns to show which labels correspond to which bars or to simply label the bars directly without the use of a legend. Color is still a great tool to supplement these accessible methods of labeling a bar graph.

Summary: Make sure any new color combinations have a contrast ratio of at least:

• 3:1 for buttons, form fields, and large text
• 4.5:1 for small text. 7:1 for body copy is recommended

Many CMSs give admins the freedom to create new color combinations. This power must be wielded carefully since it’s one of the easiest ways to introduce poor accessibility without intending to. A lot can be said about color contrast, but we’ll keep it simple here.

The first thing you need to know is that you can’t always trust your eyes. Things that look distinct and legible to someone without a visual disability might be totally unreadable to a person with low vision, or colorblindness, or glare from the sun on their screen.

Since your eyes can’t be relied upon, it’s best to use a color contrast checking tool when you’re trying out a new color combination. Simply drop in the hex codes of the text and background colors you’d like to check, and the tool will let you know if the combination works.

In most contrast checking tools, you’ll see references to large and small text, and a color combination might work for large text but not for small text. This is because large text is inherently easier to read than small text, so the contrast doesn’t need to be quite as high. The WCAG guidelines define large text as 18 pts and up. If the text in question is bolded, 14 pts is the threshold for large text.

You’ll also see two levels of success: AA and AAA. These represent levels of WCAG conformance. Most organizations are striving for AA, and that’s a good standard for most text. Any time you have whole paragraphs, though, you’ll want to make sure you’re at least hitting AAA. Even higher contrast—shoot for a contrast ratio between 15:1 and 19:1— is better.

It’s also worth noting that some color combinations—red with black and red with green in particular—can be challenging for some users.