Content Accessibility Guide

Accessibility Toolkit

Content Accessibility Guide

In the world of accessibility, it can be hard to know where to start. We’ve got you covered.

Content: The most commonly overlooked part of an accessibility effort, but critically important to the experience of people with disabilities. Content creators, copywriters, and Content Management System (CMS) administrators play a key role in ensuring a better web—and a better world—for all.

Contents

icon of red number one
What is Accessibility?

A quick overview of accessibility from the lens of content creation and management.

icon of red number two
Quick Reference Checklist

A one-page reference to help you make sure your content hits the high points of accessibility.

icon of red three
Planning for Accessibility

A guide to setting your team up for accessibility success.

Guidelines for Accessible Content

Detailed guidelines for creating accessible content, with explanations and background.

icon of red number one

What is Accessibility?

Accessibility is about making content and features accessible to everyone on every device.

Accessibility includes people that are blind or have low vision, are deaf or hard of hearing, have a cognitive impairment or learning disability, motor control difficulties, and other long-term disabilities. It also includes those with short term disabilities like a broken arm or traumatic brain injury, as well as situational disabilities like holding a child with one arm or having glare on their screen. Although accessibility work usually focuses on making sites and apps usable for those with short- and long-term disabilities, it also serves to make these tools more usable and enjoyable for all.

Making a website or app accessible involves a team of designers, developers, and quality assurance engineers working together. Once the site is built and tested, it’s up to content creators and CMS administrators to create and maintain content in an accessible way. By making a few changes to your content methods and process, you can ensure that the content on your platform is usable by everyone.

Most organizations use the Web Accessibility Content Guidelines (WCAG) version 2.1 as their reference when creating an accessible website or mobile app. The WCAG guidelines are dense and can be difficult to understand, so it is useful to have a reference document that is more focused on practical, day-to-day implementation.

Why Accessibility?

The opportunity for positive impact is huge. The Centers for Disease Control and Prevention estimates that 1 out of every 4 adults in the United States has some kind of disability. While not all of these disabilities affect technology use, many do:

  • 10.8% of Americans have “serious difficulty concentrating, remembering, or making decisions”
  • 5.9% experience “deafness or serious difficulty hearing”
  • 4.6% experience “blindness or serious difficulty seeing”

Accessible technology can be a huge boon for people with disabilities, providing equal access to increasingly-digitized goods and services. Accessibility is not just good for users with disabilities, though.

Accessibility Is Good For business

Such a high percentage of technology users have one or more disabilities that making your website or app accessible represents a significant competitive advantage. In the United States alone, just making your content accessible to people who are deaf or hard of hearing expands your potential customer base by up to 19 million people. That number increases as more disability categories are taken into account.

Accessibility Is Good For SEO

Many of the features that make the web accessible are also great for search engines. Alternative text for images, though written for blind and low vision site visitors, also helps search engines who can’t otherwise “see” the image. Similarly, transcripts make audio and video content available both to users with certain disabilities and to search engines. Headings play an important part in helping everyone—site visitors using screen readers, those with cognitive and reading difficulties, and search engines—scan the page, get a sense of what it’s about, and pull out key information.

Accessibility Is Good For Everyone

Long before web accessibility, curb cuts were introduced to help people with physical disabilities—in particular, those in wheelchairs—move more freely on sidewalks. Since then, parents pushing strollers and kids on bikes are among the many people who regularly benefit from the change.

Web accessibility is no different. The steps we take to make technology accessible to more people have the added benefit of making it more accessible to all people. Writing at a low reading level will help those with cognitive difficulties understand what you write, while nearly all visitors will read faster and retain more. Breaking content up with headings helps screen reader users “scan” a page for the content they are looking for, while also making the content more usable for most users in much the same way.

We are all temporarily and situationally disabled from time to time. A broken arm or simply having a hand full might have the same effect, forcing someone to use technology with only one hand, and possibly with their non-dominant hand. Someone in a public place may not be able to hear your content, but could still access it through captions or transcripts. Similarly, poor color contrast doesn’t just affect those with low vision, since direct sunlight on a phone screen can make content hard for anyone to see.

The return on investment in accessibility is clear cut and goes well beyond the benefits to people with disabilities. Time spent on accessibility can make your content easier for everyone to find and use, and ultimately can have a significant impact on the bottom line.


icon of red number two

Quick Reference Checklist

The Core: A and AA Guidelines

Most organizations strive for an AA compliance level, which includes both A and AA guidelines. Hitting AA compliance gives a generally good experience for most people with disabilities.

  • Alternative Text (A) — All images and icons that are important to understanding the site have alternative text that conveys their meaning.
  • Accessible Instructions (A) Instructions for using the site are not dependent on visual or spatial cues (e.g. “push the blue button” or “read the description on the right”).
  • Use of Color (A) — Charts, graphs, and other content can be understood without the use of color.
  • Color Contrast (AA) — All text, buttons, and other content have a 3:1 contrast ratio with their backgrounds. Text under 18 pts (or 14 pts bold) has a 4.5:1 contrast ratio.
  • Images of Text (AA) — Text that is meant for users to read is not a part of an image. If it must be included in an image (e.g. text labels in a bar graph), text has sufficient contrast, does not become excessively small on mobile devices, and has a text-based alternative. Logos are exempt from this.
  • Descriptive Headings (AA) — When used, headings are clear and describe their contents.
  • Audio and Video (AA) — Audio and video content have text-based alternatives such as captions and transcripts.

The Extras: AAA Guidelines

The AAA guidelines provide a better experience for users with disabilities and often for all users as well.

  • Reading Level (AAA) — Text is simple and easy to read, and does not exceed target reading level (not more than an 8th grade level; 5th grade level recommended for general audiences).
  • Jargon and Acronyms (AAA) — Jargon and acronyms are defined the first time they are used on each page and avoided where possible.
  • Figurative Language (AAA) — Figurative language is avoided where possible and never essential to understanding site content.
  • Complex Topics (AAA) — Complex topics are supplemented with explanatory graphics.
  • Text Alignment (AAA) — Text that wraps to more than two lines is left aligned, not centered or justified.
  • Heading Usage (AAA) — Headings are used to break up content into small, useful sections.

icon of red three

Planning for Accessibility

Publishing accessible content doesn’t have to be difficult, but it does take a bit of preparation. Here are a few pragmatic steps to take:

  • Decide on your must-haves. The most common approach we see is to pursue WCAG 2.2 AA compliance, which includes everything from the A and AA levels. This is a good standard, but teams often find they can easily add in one or more AAA guidelines with minimal effort, often to the benefit of both SEO and people with disabilities. Whatever you decide, make sure the team has a source of truth for what’s expected of them.
  • Get content teams familiar with the guidelines. Nobody needs to memorize the whole WCAG document, but the team needs a shared, basic understanding. A group training from a reputable organization can be a great way to get started, but make sure you have a plan to account for new team members as well.
  • Include accessibility in your content governance plan. However you maintain the high standards of your content, make sure that checking for accessibility is part of that. This review keeps staff accountable and feedback helps them grow their skill.
  • Budget for multimedia. Audio and video content will need some kind of text-based alternative (more on that below). You’ll need to either plan time to create these or use one of the many high-quality transcription services.
  • Get your basic tools lined up. There are lots of helpful tools to help with content accessibility tasks like assessing reading level or checking for images that are missing alternative text. More on all of this below, but with all automated tools remember that they can fail or miss things. Just because an automated reading-level checker assesses your copy at a 5th grade reading level doesn’t mean it’s easy to understand. Your human skill and intuition are still critical in the process.

Guidelines for Accessible Content

Accessibility doesn’t have to be complicated, but there are a few things you need to understand to make your site content accessible to users with disabilities.

Provide Alternative Text

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.

A pomeranian dog running through the grass.
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.

Employees on office couch with dogs

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.

Example of decorative images with meaningless data visualization-style icons for aesthetic purposes only.

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.

Don’t Put Text in Images

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.

Avoid Visually-Based Instructions

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)

Example of incorrect, visually-based instructions to “click the gray button” and a better approach: “Click the skip button”.

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.

Write Accessible Copy

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.

Use Headings to Organize Content

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”

Provide Alternatives For Multimedia Content

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.

Multimedia content with video transcript example

[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.

Align Text the Right Way

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.

Use Color to Supplement—Not Convey—Meaning

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.

Example of an incorrect way to connect a bar chart with labels using color only and correct ways using patterns or proximity.

Use Accessible Color Combinations

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.

To Review

Accessibility provides many benefits to your audience and your business. Whether it’s a situational, short-term or a long-term disability, investing in accessibility can make it easier for everyone to use your content and can positively impact your business’s bottom line. 

The Nerdery team hopes this guide is useful as you create and maintain accessible content. If you need any additional support, we can help with these services:

  • Experience and Inclusive Design
  • Accessibility Testing
  • Accessibility Training
  • Content Strategy
  • Customer Experience Strategy
  • User Research
  • Digital Team Training

Ready to get started on making your content accessible?