Writing accessible copy
How to satisfy accessibility criteria with UX copywriting.
As a UX designer, I’m often asked to work on a small UX copy. To write button text, link text, headings with thoughtful consideration of the users. As a real passionate about copy, I’m often asked to write full pieces of information.
Recently, working on some accessibility stuff, I was confronted with a question:
How to satisfy accessibility criteria with UX copywriting?
I made an experiment with a piece of text, using a “readability analyzer” I was very happy to see that almost 85% of the general public was supposed to understand my copy. I could have just stop there and defined that my job was perfectly done.
But I felt like this perfect grade didn’t fit with the overall experience I wanted to provide to my users. My job was to focus on accessibility. And the “readability analyzer” didn’t provide me with any tips about it…
✔ Yes, my text was readable and understandable
✔ Yes, my pages appear and operate in predictable ways
Does this mean the experience was the best possible or the most accessible?
Readability
Readability refers to the ease with which a text can be read and understood.
Using readability tools to analyze your content gives you a readability score to assess whether your text is written at an appropriate level for your intended audience. For example, an 8th-grade level will be readable by around 85% of the general public (that was my score 😎).
It’s interesting to see that there is no direct correspondence between an individual’s level of education and their ability to read your text at a particular grade level. But it’s not enough to be sure that you provide the best experience to your users with your copy.
There are so many other factors that influence the overall reading experience and understandability of a text (in general… not only regarding accessibility). And that’s where exactly, I’m trying to structure UX copy guidelines to help us meet accessibility criteria: organization of information, graphic design, typesetting, visuals, and cultural relevance, alt text…. all components of the overall experience and more.
The best way to write UX copy is to think about the result, not the flow.
The thing to remember about copywriting is that your users are going to scan very quickly your page to get what they need. Even when they are using a screen-reader or a keyboard! And you have to help them to be as effective as possible.
The main idea is to think about what happens when a user selects a button, rather than focusing on the fact that you want him to select that button.
And for that, we need structure:
- Use readable and predictable language
- Build a strong page structure
- Use visual cues without excluding users with visual impairments
- Value your images
1. Use readable and predictable language
We want to write clear and consistent content that users can understand quickly. And we want to be sure we provide the right context.
→ Being consistent means using the same words to describe actions throughout the site.
Navigation and all repeatable elements should appear consistently throughout your pages. For example, you’ll want to make sure that “Save” or “Edit” mean always the same thing.
→ Always label correctly buttons and links to provide context.
Terms like “click here” or “more” and “read more” can become unusable if out of context. Try using more specific words that indicate the function of the button. Some people navigate using only a list of all buttons or links of the page. When using this mode, the terms indicate what will happen if navigated to or activated. Help the users navigate around your page and know what to expect when they select a link: give the context of use.
→ Avoid using verbs like “Click”
That make assumptions about how a user is navigating. Users who are navigating with a keyboard or on a smartphone aren’t going to be clicking anything. Instead, a verb like “Select” is general enough to include users who are clicking, tapping, pressing, or navigating the web in ways you haven’t even considered yet.
→ Use plain language and avoid figures of speech, idioms, and complicated metaphors.
A 8th-grade should be able to understand your content, even if you use specific terminology or concepts that are new.
→ Specify the language(s) of the page.
Setting the language of your site allows assistive technology interacts with your content correctly. Assistive technology will read foreign languages, but they need to know when the main language of the page and when the content’s language differs from the page’s default.
→ Provide meanings of unusual words and pronunciations of difficult words.
You can use the title attribute to provide the meaning of abbreviations and unusual words. Always give the context of use and tell the user the purpose of these words.
→ PDF and all linked documents need to be accessible.
If you provide links to PDF documents, ensure the PDF document is natively accessible (that’s rarely the case) or inform the user that the link will open a document. Any changes of context should happen only on request by the user. Things like redirects, popups and other similar interactions should be communicated beforehand. Explain the process, provide context and additional off-screen text, using a title or ARIA attributes.
2. Build a strong page structure
Structure your pages: organize all the information using h1→ h6, headers, navigation, landmark…etc
→ A header typically contains banner and primary navigation.
The header can be easily targeted with a “skip link”. Screen reader users may have to hear all the menu items on every single page before they get to the page content. Same for keyboard users who would have to tab through all the menu items on every page. The “skip to main content” link can save them a lot of nuisance!
→ Create blocks of information.
Organize your content into chunks. Each block should have a header and landmark. The header markd the start and the end of different chunks of content and give them a hierarchy. Landmark regions help communicate the layout and important areas of a page and can allow quick access to these regions.
→ Don’t forget the Footer. It can be valuable.
The <footer> element is a semantic way to group footer information like extensive navigation, copyright and legal information. It's an important part of the page structure that helps screen readers to understand the overall navigation.
3. Use visual signs without excluding users with visual impairments
As designers, we need to be mindful enough to avoid thinking and writing only in visual terms. It’s like this example of a link that uses only colour, that colourblind users or somebody with low vision might not be able to distinguish. To avoid this issue you can easily provide an underlined link to contrast more. With copy, it’s the same process for finding easy to implement solutions to avoid big issues.
→ Avoid using directional language.
Above, below, left, right… Far more often than you might think, these words are meaningless and misinterpreted by the users (and not just those who are blind or visually impaired). Users with screen readers won’t have right or left as a reference.
→ Provide context even for errors and messaging in general.
A user might not be able to submit forms or tell what the error is on a form and how to fix it when they go to submit it if you use only colours. Try to provide enough explanation and description to make sure your users can avoid these errors in the first place and if not make sure your users can easily repair them.
4. Value your images
Images are big barriers for accessibility. We tend to sacrifice this part without recognizing that, sure it takes time but, in itself, it’s not complicated to make an image accessible.
It is often easier to describe an image, how it is composed and how it is used, than to find the right word to apply to an action button.
Ok, but where to start to create a good alt text?
Essentially:
Good alt text allow us to describe what’s on the page to someone else.
- Ask yourself what the image is supposed to communicate? If the image is just decorative, leave the alt tag blank so screen-readers will know that they can skip it.
- Don’t start with “image of…”. Using the alt tag implied that an image should be there.
- Icons need alt text too if you want them to be read by screen-reader. If not, you need to use a specific label to prevent the icon from being read (
aria-hidden="true") - Avoid using many keywords as possible. Instead, create a clear description.
- Avoid describing the gender, age, or race of people in images, unless it’s necessary to understand the image’s content.
What about multimedia?
All multimedia (anything using audio and video) need appropriate captioning and audio description.
You may know that captions and subtitles are very similar. They both appear as text on the bottom of your screen. But they’re designed for two different purposes:
- Subtitles provide a translation for a dialogue on a video — the spoken words of characters, narrators and other vocal participants.
- Closed captions, on the other hand, not only supplement for dialogue but other relevant parts of the soundtrack — describing background noises, phones ringing and other audio cues that need description.
In terms of accessibility, it’s important to note the difference in the audience. Subtitles assume the audience can hear the audio, meanwhile, Closed captioning assumes the audience cannot hear the audio and needs a text description of what they would otherwise be hearing. We can easily recognize that this distinction between the two is very important: in situations where subtitles are sufficient, closed captions can be distracting and potentially frustrating for viewers. And in situations where captions are needed, using only subtitles can be potentially alienating your viewers.
Choosing between the two solutions can be tricky and depends on your users. In terms of “pure” accessibility, every video should come with both solutions, subtitles and closed captions.
So, we want to write clear content that users can understand quickly. We want to give a clear structure to navigate through the information we provide. We want to be mindful enough to avoid thinking and writing only in visual terms, and we want to provide context everywhere for everything.
These guidelines appear to be great in general and not only when you want to meet some accessibility criteria. They can prevent us to make assumptions about how a user is navigating. Help us avoid the use of words, meaningless out of there context.
It’s a real reflection about the overall experience we want to offer to our users, and not only those who are blind or visually impaired.
Designing for accessibility is something that I’m improving everyday. And I used to think that it was very hard to meet the level of AA of the Web Content Accessibility Guidelines. It takes time but it can be a real upgrade in the ways we are designing. As UX designers, I think it’s our duty to consider the overall experience through different perspectives.
Resources
Readability analyzer:
https://datayze.com/readability-analyzer.php
Accessibility checker:
https://a11ygator.chialab.io/
https://wave.webaim.org/
https://contrast-finder.tanaguru.com/
Accessibility cheatsheet:
https://www.ibm.com/able/guidelines/ci162/accessibility_checklist.html
https://accessibility.18f.gov/
Accessibility checklist:
https://a11yengineer.com/
https://gerireid.com/wcag-for-designers.html
Inclusive Components: A blog trying to be a pattern library, with a focus on inclusive design.
Contrast color: Great contrast color checker
