By Char James-Tanny
“Keep out!” “STAY AWAY.” “Do not enter!”
When faced with accessibility issues, these are the messages that people with disabilities (PWD) receive.
- A person in a wheelchair in front of a building with only steps. (“But they’re small steps!”)
- A non-verbal person who uses an iPad to order at Starbucks. (“Can’t you just tell me what you want?”)
- A person who is deaf watching a video without captions.
- A person who is blind watching a video and hearing only music.
- A person who uses the keyboard, not a mouse, only to discover that they can’t navigate through a PDF or web page.
- A person who uses a screen reader to read a PDF or web page, only to discover that there are no headings styles or tags for navigation and no alt text to explain why images are included.
These situations and more happen daily to PWD around the world (and sometimes to people who don’t consider themselves disabled or those who aren’t disabled).
As technical communicators, we can’t make buildings more accessible. Our power is in our documents, whether they are Word or FrameMaker docs, PDFs, web pages, instruction cards, embedded Help in an application, or any other products that we create. We can also influence software and hardware developers to make products more accessible.
Accessibility Means Usability
Accessibility means making products usable by anyone. Curb cuts, introduced in the 1940s, made it possible for WWII veterans to get from the street to the sidewalk. Now curb cuts are used by everyone: people pushing strollers or dragging wheelie suitcases, people with arthritic knees or who have had their knees replaced, and more.
Our goal should be to make our documents usable by everyone. While it’s best to incorporate accessibility from the beginning, that’s usually not possible when introducing accessibility to your co-workers, development teams, and management. Retrofitting accessibility is possible but it takes longer (and costs more) than starting with accessibility in mind.
In addition, anything you do to improve accessibility for PWD also makes the product easier to use by people without disabilities.
The following are some tips for incorporating accessibility in your documents now.
Select Your Color Palette to Meet Contrast Ratios
Contrast ratios are determined by the difference in luminance between two adjacent or overlaid colors. The numbers range from 1 to 21. For example, the contrast ratio for white-on-black is 21 to 1; for black-on-black, 1 to 1; for white-on-white, 21 to 21.
Web Content Accessibility Guidelines (WCAG) define contrast ratios to make sure that people with colorblindness can perceive the content. If you are sighted and have ever viewed a web page that uses light gray text in 9-point Arial on a white background, you might understand why this is important.
WCAG defines the criterion for contrast as 7 to 1 for text and images of text and 4.5 to 1 for large text. (WCAG includes two criteria: Minimum and Enhanced. These ratios meet the definition for enhanced.)
You can calculate the contrast ratios with an equation but it’s easier to use one of the free contrast ratio analyzers. I prefer The Paciello Group’s Colour Contrast Analyser, a free app that I’ve installed on my laptop because it includes a color picker and several options for selecting how the colors are defined:
- Hexadecimal
- RGB (red, green, blue)
- HSL (hue, saturation, lightness)
- HSV (hue, saturation, value; also known as HSB for hue, saturation, brightness)
After you’ve decided the colors that will be included in your document, verify that the contrast ratios meet WCAG guidelines.
Then, update all templates to use the new color combinations.
Note: You might run into issues with your company’s branding department. The fact is that companies have to choose between meeting the branding guidelines and making their products accessible. It’s better for companies to rebrand.
Structure Your Document
Use heading styles or elements when creating your document. Typically, technical communicators do this routinely, but people who don’t understand styles sometimes manually format content to look like a heading. (And then we let the application generate the table of contents for us, based on heading styles.)
Make sure that every document has only one Heading 1, typically the title, which identifies the top level of the document for screen readers. Use other heading styles, as necessary. If your document uses numbered headings, make sure that they are hierarchical.
Screen reader users can pull up a list of headings in the document and skim them like sighted people do. Also, heading styles help people with cognitive issues identify how important the section is.
Also, make sure to use:
- Simple tables, without merged cells, and set the top row to repeat across pages. Screen readers can interpret this information and screen reader users then know which column is being read, based on the header row content.
- List styles so that screen readers accurately report the list. For example, this list would be reported as “list with two items.”
Add “Alt” Text to Images and More
Back in the old days (with slow modems), people would disable images from appearing in their browsers because they took so long to download. “alt” (“alternative”) text let people know what the intent of the image was, and they could decide if they really wanted to look at it.
Now, with faster connection speeds, this purpose is less likely to be needed in most of the world. However, “alt” text helps screen reader users understand what the image is about. You can also add “alt” text to tables and other objects in Microsoft Word.
The “alt” text should describe the intent of what the image is conveying, based on the context of the surrounding text. For example, the alt text for an image of the Mona Lisa needs to align with why the image was used. Is the document describing the Louvre and where this portrait can be found? Is it describing the brush strokes that Leonardo da Vinci used? Is it part of a collection of da Vinci paintings?
If an image is decorative (that is, it makes the page look nice for sighted users but has no other benefit), include blank “alt” text (that is, alt=“”).
If the image cannot be loaded (for example, if the image cannot be found), the “alt” text appears.
Finally, search engines use “alt” text when crawling sites.
Be sure to describe the image in as much detail as possible but keep it short (under 125 characters). If you need to provide more information, include it in the surrounding text. You don’t need to include “image of” as part of the “alt” text.
For example, which sample “alt” text provides a better description?
- Teenage boy.
- Teenage boy with long blond curly hair.
- Teenage boy with long blond curly hair holding a paint roller with dark green paint in front of a wall with both brown and dark green paint on it.
If you are posting to Facebook, Twitter, or other social media platforms, you can add “alt” text. What I usually do is transcribe the images so that people who can’t read them, for whatever reason, know what the content is.
Add Captions to Videos
People who are deaf rely on captions to understand what they’re watching, whether it’s a movie, a tennis match, or the evening news.
People who aren’t deaf but are in situations where they can’t hear are also able to take advantage of this. For example, if I’m watching TV and skimming through Twitter, I might watch a video with captions. (I never watch videos without them, at least in that situation.)
Better yet, add a transcript and audio description so that people can decide what they are most comfortable with. You can find videos on YouTube that include audio description; I’ve included an example from The Lion King in the reference section at the end of the article.
And if you really want to make your videos accessible, add sign language interpreters. See the When Will I Get My Refund explanation from the IRS, which has information that everyone can use. Disney produced Show Yourself (from Frozen 2), which includes both captions and a sign language interpreter.
Write Right…err, Correctly
“We should not write so that it is possible for [the reader] to understand us, but so that it is impossible for him to misunderstand us.”–Marcus Fabius Quintilianus
(c. 35 – c. 100), Book VII, 2, line 24
English can be confusing. We have words with multiple meanings that are, in some cases, pronounced differently.
- The bandage was wound around the wound.
- The farm was used to produce produce.
- The soldier decided to desert his dessert in the desert.
- Follow the following steps.
- After a number of injections, my jaw got number.
What we should do to avoid these issues:
- Maintain consistency.
- Define acronyms, abbreviations, and initialisms.
- Use active voice, present tense, “you,” and “singular they.”
- Avoid idioms and slang.
- Use lists correctly (numbers for tasks or where the order matters; bullets for options where the order is not important).
- Keep sentences between 20 and 30 words and keep paragraphs to one-to-three sentences. Avoid redundancy, such as “actual plan,” “adequate enough,” or “merge together.”
Whenever possible, use a screen reader and listen to what you wrote. Screen readers need context to pronounce words correctly. For example, many websites now include “skip links,” which allow screen readers to jump from the top of the page to the content. This link used to be “skip to content,” except screen readers read it as “con-‘tent.’” Now it’s worded skip to main content,” which pronounces the word correctly.
And after you decide which words you will use for your documents, create a style guide, verify it for accessibility, and make sure that everyone uses it. For example, decide if you will use the verb “follow” or the adjective “following,” but not both. (This results in “Follow these steps,” if the sentence even has to be included.)
Navigate by Keyboard
Make sure that you can navigate PDFs and websites by keyboard. Tab should take you from link to link, in order.
Verify that there aren’t any keyboard traps. A “trap” is when you can use a key to get into a field, but you can’t use a key to get out. This is found more often in applications but can occur in PDFs with form fields.
Spend a part of each day navigating only by keyboard while you’re working. This helps you find instances that don’t work as expected.
And open a PowerPoint deck and try to navigate by keyboard. If the master slides are set up incorrectly, the tab order might jump from the page title to the footer, to the slide number, to an image, and then to the content. The tab order can also get messed up if additional objects were added when the slides were created.
Note: When using keyboard navigation for PowerPoint slides, the tab order will be used, not the visual order. If necessary, rearrange the tab order for the master slides, and then rearrange the tab order for individual slides where more objects were added.
Create Useful Links
Web pages full of links that say “click here” are pretty much useless. People who use screen readers can pull up a list of links, which removes them from the context where they’re used. Sighted people who skim a document or web page must then read the surrounding content to determine where the link goes.
It’s more helpful to create links that indicate exactly where the link will go. Which would you prefer if you only had a list of links?
- “Click here” or “Read about accessibility at Schneider Electric”?
- “Click here” or “Get today’s weather”?
- “Click here” or “Visit the STC Summit page”?
You can help all readers by not creating links that open in a new tab. People can use Ctrl+click to open links in a new tab if they want. If all links open in a new tab, people end up with multiple tabs, and depending on the person’s browser settings, they might not get notified. (Unless I really have to read something on sites that do that, like when my son was in high school, I never visit the site again if links always open in new tabs.)
Opening in new tabs can result in confusion and the Back button or command usually doesn’t return to the previous page.
Creating New Documents
Before you start new documents, be sure to use the same color palette. Create templates for your documents in Microsoft Word and PowerPoint so that the correct colors are used, and the font families and sizes are defined.
Be sure to follow your style guide!
Conclusion
These tips will help you make your current documents and web pages more accessible and help you prepare to create new documents.
CHAR JAMES-TANNY (charjtf@gmail.com) is a principal technical writer for Process Automation Technical Publications at Schneider Electric, where she focuses on moving existing documents from FrameMaker to DITA. She’s also involved in Schneider Electric’s accessibility initiative.
REFERENCES
DisneyMusicVEVO. 2020. “Show Yourself (From “Frozen 2”/American Sign Language Version).” YouTube. Accessed 7 April 2021. https://www.youtube.com/watch?v=5ywnOWWfOWM.
IRSvideosASL. 2021. “ASL: When Will I Get My Refund? (Captions & Audio).” YouTube. Accessed 7 April 2021. https://www.youtube.com/watch?v=LstwbSg2eaY.
Jane Doe. 2016. “Audio Description- Full Clip.” YouTube. Accessed 7 April 2021. https://www.youtube.com/watch?v=7-XOHN2BWG4.
The Paciello Group. n.d. “Colour Contrast Analyser.” Accessed 7 April 2021. https://www.tpgi.com/color-contrast-checker/.
Web Accessibility Initiative. n.d. “Web Content Accessibility Guidelines.” Accessed 7 April 2021. https://www.w3.org/WAI/standards-guidelines/wcag/.