According to a 2017 stats Canada report, nearly 1 in 5 Canadians has a disability—including those that impact vision, hearing, mobility, and cognition. Each of these disabilities can affect how a person interacts with the web. The way you write and organize your content can help everyone—including users with disabilities—have better, more meaningful experiences on the web. There are many things to take into account when creating an accessible web. These suggestions are certainly not comprehensive, but they’re a good start!
When Creating Web Content Make Sure You Write for Humans
Take a moment and consider how would you define good writing for the web. Is it clear? Succinct? Scannable? Action-oriented? Now, think about how you’d define good writing for print. It turns out that good writing is good writing, no matter the medium. The same holds true for accessible web content. When thinking about creating accessible web content, step back and remember: you’re not creating accessible web content. You’re creating good content, and it is good because it is useful and interesting to people of all abilities on all devices.
Organize for Screen Readability
Start by organizing your content into well-defined groups or chunks, using descriptive, properly marked-up headings and lists. While visual styling like bolded text, font size, or colour could communicate hierarchy to a sighted user, someone on a screen reader would miss those cues. Instead, use heading tags like <h1>, <h2>, and <h3>. These make the document’s structure as obvious as possible to someone on a screen reader, as most screen readers have a feature that lists all the headings and describes their hierarchy—akin to scrolling up and down and skimming for highlights.
When thinking about chunking your content, you should also pay attention to heading wording. These headings should accurately describe what’s nested beneath for all users. For instance, “Organize for Screen Readability” is a lot more descriptive than simply “Organization” or “Screen Readers.” If you think you have a paragraph that is too long, or covers many topics, break it into separate paragraphs. You’ll want to start each page and subsection with the most important information.
As we say in journalism, “Don’t bury the lede.” Put your key points first, and you’ll keep your users happy. For this piece, I wanted the biggest takeaway to be that writing accessible web content should not be some intimidating enigma. It is just writing good content for people of all abilities. So, that’s the first subsection.
Use Alt Text for Visual Content
Alternative text attributes describe pictorial content in words and are helpful not just to people using assistive technologies but also to people who may have images turned off on their mobile devices to save data.
Before you add alt text, consider if an image is decorative or informational.
If the Image Is Informational
If the image is important to the context of the page, the alt text should contain a short description of the image, without including the phrases “image of” or “picture of”—assistive technologies already do this. Similarly, if the image is a link, the alt text should describe where the link goes rather than the image itself.
Brazil
If the Image Is Decorative
If the image is purely decorative, add an empty tag (alt=”“) to instruct the screen reader to skip it. If you don’t use an empty tag, the screen reader will read the src attribute, which is often long and confusing.
Below is an example of a decorative image. It’s adorable, but is not informative nor instrumental to your understanding of the content. Thus, you’ll want to use an empty tag so screen readers will skip it. Am I right? I would argue that this is an important place to discuss the equally divine companions of our feline friends.
What about a picture like this?
Here is a picture of Harriet Tubman
Harriet Tubman, who was a slave who escaped to the north but returned to help other African Americans escape slavery. During the Civil War, she operated as a valuable Union spy.
This image illustrates what this person looked like (to those who can visually access it.) How should it be captioned? What should its alt text be?
Keep the Conversation Going
I hope that the suggestions I’ve offered in this post help you create accessible content for your next web project or assess and revise content that already exists. It’s helpful to remember that web accessibility has as much to do with content as it does code and design. If you have any questions or ideas to make web content more accessible, send an email to me@example.com. I’d love to keep this conversation going.