Insights

9 Steps to Accessible Content and Design

Using NoCoffee Vision Simulator, a designer can see how a website looks with macular degeneration and other vision disabilities

For too long, people have assumed that accessible designs are reliant on developers. And that’s not totally wrong - there is a lot of development work that makes websites and apps compliant. For example, you need a developer to use accessible code, set up the proper document structure, and make sure the app or site is compatible with various assistive technology.

But there’s also a lot you can do as a designer or content creator. Specifically, you can follow these 9 Web Content Accessibility Guidelines (WCAG) to create accessible content and design.

Accessibility as a Designer

1. Are the colors suffcient contrast?

Contrast is the design issue we run into most when assessing client websites. Contrast is the difference in the color and brightness of the foreground (such as text) compared to the background. 

The WCAG asks for a contrast ration of 4.5:1 for AA, which is considered the standard. Tools like Colour Contrast Analyzer can help measure this, because eyeballing it is usually not a good enough gauge (also, the contrast needs differ depending on the size of the text!). 

One thing to watch out for is over contrast. Black on white, for example, is actually not as easy to read as something with slightly less contrast. For some people with dyslexia, black on white is so stark that it makes the letters more difficult to parse.

2. Is text an appropriate size and font?

While there’s no one font type or size that WCAG offers, most readability measures suggest that 16pt font is a good starting point. Smaller than that, and text becomes too blurry to read for people with macular degeneration or other eye conditions.

On a related note, ask your developers to ensure your site allow for text resize. Many people who need a slightly larger text press ctrl+plus to make the font larger in the browser. This will always make the font larger, but if the developer hasn’t planned for it, the formatting on the site may break.

3. Are you using more than just color to convey information?

Green means good, or go ahead, and red means bad, or stop, right? Not always. As many as 8% of men have red-green colorblindness. That’s about 1 out of 12 people! Plus, other cultures don’t always recognize green as go and red as stop. In fact, in China, they call their “green” lights blue - and they look more blue than green!

That doesn’t mean you can’t use colors to highlight when form fields (for example) need attention. But add an icon or a descriptive error message in addition to the colors, and you’ll help a lot more people. (Plus, icons can have alt-text! More on that below.)

Accessibility as a Content Creator

4. Do you have alt-text for images?

If there’s one piece of advice people hear about accessibility, it seems to be “add alt-text.” Alt-text is words attached to an image. You can see them if you hover over an image, and a screen-reader reads it aloud. It’s great for situations where an image can’t load, or where the person using the website can’t see the image.

But not all alt-text is created equal. For example “cash” is not a great alt-tag, even if the image is of a stack of money. What’s more useful is to describe the purpose of the image, such as “a stack of cash, representing the challenges of today’s economy.” Keep in mind that charts and graphs need alt-text as well, and it should explain what the chart or graph shows!

5. Do videos and images have alternative content?

As with images, we want to ensure that our videos, podcasts, and other multimedia has an accessible version for audiences who might not be able to see it, hear it or even understand it in some cases. And this is huge - after all, YouTube is 10% of the internet. Half the country regularly listen to podcasts. That’s a lot of content to think about!

The key to creating captions, transcripts, or sign language options for videos is to create it at the same time as the multimedia piece. Trying to create it after the fact is far more difficult, and expensive.

6. Does the content work regardless of formatting?

On the development side, making content work across multiple styles means ensuring the content is prioritized. But there’s work to be done on the content creator’s side as well. For example, if there’s an image or diagram alongside the text, make sure to describe the diagram in the text itself, in case it appears far below the text in a mobile view. 

Format-agnostic content also means choosing words carefully. Where we might once have written “Click” as a verb, now someone would be clicking on a desktop, tapping on mobile or tablet, and saying “select” for Voice UI. Choose language that is usable in any format.

7. Do your links make sense independent of context?

Imagine your homepage describes the brilliance of your breast cancer researchers. Below an image of researchers hard at work, and a headline like “We have the best breast cancer specialists in the state. Want to meet our specialists?” you have a button that says “Click Here.” Now imagine a screenreader skimming the page for calls to action, much in the same way your eyes might scan the page. All that they see is “Click Here.”

“Click Here” is about the least helpful link text you can use. It’s up there with “Read More” and “Learn More.” Since people can ask screenreaders to scan the calls to action (CTAs) on a page, you want CTAs that make sense without context. In our example, “Meet our Specialists” would be a great link, that works contextually as well as alone. Other useful CTAs might be “Download Accessibility PDF” (instead of “Download”) or “View Our Articles” (in place of “View More”).

8. What’s the readability level?

If someone can’t read and understand what’s on your app or site, there’s no point to the content at all. Readability level has many measurements, but one of the best and most popular is the Flesch-Kincaid Scale. The Flesch-Kincaid Scale assigns a grade level to text, based on the length of sentences, the complexity of the words, and other elements.

And while you might think we all read at a 12th grade reading level, that’s just not true. You probably read Shakespeare in 12th grade - but you couldn’t scan it for information! Most of us read at a 7-8 grade reading level, and when it comes to complex topics like finance or healthcare we read at closer to a 6th grade reading level. You can check readability with tools like Readable and Hemmingway Editor.

9. Are error messages clear and helpful?

Lastly, you can write fantastic, clear, and helpful error messages. When someone reaches an error message, they’re already at a disadvantage. Something has not gone according to plan. And while you may not be able to tell them exactly what (either because the system doesn’t know, or more likely due to compliance concerns), you can always tell someone what to do next.

Ideally, you can tell them exactly what went wrong, such as “your password must have numbers in it”. But sometimes that puts you at a security risk, and you need to simply tell them “your password or username doesn’t match.” But there’s still more! Let them know where to go to reset the password, and who to contact for help.

We Are All Responsible for Accessibility

An accessible website needs accessible code, certainly. But without accessible design and content, it won’t pass WCAG AA, and it certainly won’t help your audience. When you design and write for accessibility, you’re creating a better experience for everyone.

Postscript: a selection of some of our favorite tools and resources

Accessible personas from Whitney Quesenbery help teams gain an understanding of the accessibilty needs of diverse audiences

Contributed by
Name
James Christie
Job Title
Director, Experience Design
Name
Marli Mesibov
Job Title
VP, Content Strategy