Are your web documents accessible for users with disabilities?
Ideally, your website will use HTML whenever possible; as we’ve discussed in other articles, native HTML is widely supported, and it’s excellent for accessibility. PDFs, spreadsheets, and other documents have inherent issues that make them less accessible for people who use assistive technologies.
But some organizations have practical reasons to use web-delivered documents. You might need users to download a PDF to provide a signature, or you might want to upload a PowerPoint presentation immediately after a conference.
When you’re using web documents, you have a responsibility to make those communications as accessible as possible. Here are a few basic rules to help you avoid some of the most common barriers.
1. Think about how color impacts accessibility
Your audience includes people with low vision, color vision deficiency (sometimes incorrectly called “color blindness”), and other conditions that impact perception of color. Think about those users when authoring your documents.
The Web Content Accessibility Guidelines (WCAG) are the international standards for digital accessibility. While WCAG is frequently used to evaluate HTML, it’s applicable to all digital technologies (including web documents).
Here’s what WCAG says about color:
- Color must not be used as the only means of conveying information or prompting an action. For example, if your document contains a graph, data points on the graph shouldn’t be distinguished with color alone — readers should have another way to get that information. Learn more: Use of Color for Accessibility Explained.
- Text must maintain a minimum contrast ratio of 4.5:1 (or 3:1 for large text). Contrast ratio refers to the difference in luminance (brightness) between the text and its background. Learn more: The Basics and Importance of Color Contrast for Web Accessibility.
Keep these concepts in mind when planning your documents. If you’re using any color combination other than black and white, test your color-pairs for contrast accessibility using the a11y® Color Contrast Accessibility Validator or another tool.
You should also make sure that your designers understand how color impacts accessibility. An accessible mindset will help you avoid issues that require remediation and greatly improve the experience for your readers.
Related: Developing the Accessibility Mindset
2. Include alternatives for all non-text content
Text can be adapted to the user’s preferences; non-text content cannot. For example, if a user has vision disabilities, they can use a screen reader to listen to a text-based document. Second-language learners can translate the text to their native language, and people with reading disorders can change the font to improve readability.
WCAG’s very first success criterion requires text alternatives for all non-text content. That’s fully applicable to web documents:
- Images must have descriptive alternative text (also known as alt text).
- Embedded videos should have captions and transcripts.
- Graphs should include alternative text that explains the data.
- Icons and thumbnails that are purely decorative should have blank (or null) alt text. This helps assistive technologies present the content to users. Learn more about null alt text.
- Images that act as hyperlinks should have alternative text that explains what will happen when the user activates the link.
The process for adding alternative text will vary depending on the software you’re using. However, in most applications, adding alternative text is as easy as right-clicking an element and providing a quick description.
Make sure you’re following the best practices of writing alt text. A good rule of thumb: Describe the image with the first words that come to mind.
Related: Examples of Text Alternatives to Non-Text Content
3. Think about the structure of your documents
A clear, logical structure helps people read your content. That structure needs to be presented in a way that different types of technologies can present to users.
In other words, if you’re using subheadings, those headings need to be programmatically determinable — software should be able to identify the heading as a heading. You shouldn’t simply use a larger typeface; proper tagging helps you provide all users with an equivalent experience.
Some quick tips:
- Write descriptive headings and subheadings that provide context. For example, this article uses a subheading to introduce each tip, which helps readers scan the page for the information they want.
- Use subheading levels in a logical order. For example, an H3 subheading should always follow an H2 subheading. To learn more, read: What Are H Tags?
- Using ordered and unordered lists (like this set of bullet points) can help break up content. Make sure your lists have appropriate tags — otherwise, some screen readers may not announce them as lists.
Related: How To Make a PDF Accessible and ADA Compliant
4. Have a process in place to check the accessibility of each document
Digital accessibility becomes much easier when it’s part of your process. You need to test every document against WCAG prior to publishing, especially if the document serves an important purpose (for example, a tax form that users must fill out in order to receive payment).
Some accessibility tests can be performed automatically. For example, in Adobe Acrobat Pro, you can run an accessibility check that tests documents to ensure a logical reading order and clear structure.
However, some accessibility issues can only be resolved with human judgment. For example, alternative text needs to explain the purpose of images on the page. Automated tests can’t determine whether alt text is appropriately descriptive.
To fully conform with non-discrimination laws like the Americans with Disabilities Act (ADA) — and provide readers with the best possible experience — we recommend using a combination of manual and automated tests to check your content for accessibility.
The Bureau of Internet Accessibility can help you create a long-term, self-sustainable strategy for web document testing and remediation. To learn more, send us a message.
