What does it mean when something is accessible?
In architecture and design, we often think about physical accommodations. For example, adding ramps and elevators for those who aren’t able to use stairs. Integrating textured sidewalks at intersections for the visually impaired.
In a digital setting, this could mean providing subtitles on movies and TV for the hearing impaired. Or voice to text/type options that make typing accessible for those unable to use a keyboard.
Although these accommodations are intended to benefit a specific population, everyone benefits from increased accessibility. I often use subtitles when the kids are napping so I don’t wake them up. And who doesn’t prefer a gentle ramp over a set of stairs?
Website accessibility works much the same way. It’s meant for a targeted audience, but it benefits all people. Developers around the globe use the Web Content Accessibility Guidelines (WCAG) as their reference for best practices.
New guidelines such as “Clear words” and “Captions”, from the WCAG 3.0 working draft, will help all visitors digest and understand your content, even if the added information isn’t strictly necessary to accommodate their abilities. The web was originally designed to welcome people of all capabilities and backgrounds, to make information free and accessible to everyone.
Let’s walk through the essentials in the WCAG 3.0 working draft and explore how you can apply them to your website experience.
Text alternatives
Just given the title “text alternatives” it’s easy to think of providing text or captions alongside images. Web browsers accommodate this with the “alt” attribute of an image tag, which developers and content administrators fill in to provide descriptive text of an image.
That’s low-hanging fruit—but making use of those attributes will also help your SEO because it provides search engines with that extra bit of data to add context to your images.
Text alternatives, however, has a second meaning: you should provide alternatives to text as well. Accordingly, the new guidelines recommend that you add illustrative images where text-only content might be difficult to understand.
Adding an appropriate graphic to a complex topic adds clarity, making the content more accessible. It’s also common sense—a picture’s worth a thousand words, after all.
That doesn’t mean simply add pictures to your content, however. If your images are working, it’s offering an alternative way to provide clarity to the writing.
Clear words
This recommendation is simple. Make your content easy to understand.
Clarity is the foundation of great communications. Revise and edit content so it’s clear, purposeful, and actionable.
And we’ve known for decades that Clear Writing Means Clear Thinking. Note the publish date on that article: January of 1973.
Captions
Providing captions for audio content—including audio visual content—is a clear win for those who are hard of hearing. It’s also helpful in noisy environments where you can’t hear the audio or when you don’t want to be disruptive.
Captions can also provide search engines with additional data about the contents of the audio or video. You might even consider posting the transcript of a video on the page where the video is hosted. This is another way for your audience to consume the information.
Transcripts or captions are especially helpful in a training scenario. Seeing the text allows users to skip ahead to elements that are most relevant.
Captioning services have become more affordable. You can also use automated captioning from services like YouTube—but be aware that YouTube’s AI-based voice recognition does not always translate perfectly. It can be downright bad at times. We recommend giving it a thorough review and proofing before publishing.
Structured content
WCAG 2.1 recommended several technical standards regarding headings in content, but WCAG 3.0 takes a step back. Instead, we’re encouraged to think about the intentionality of headings and how content is generally structured.
Headings play an important role in giving content structure and context. Headings and other elements like callouts or asides impact how people understand and navigate website content.
Imagine scrolling through two different web pages. The first has a large heading at the top and several paragraphs of copy. The second has the same large heading and copy, but the copy is outlined with subheadings. In addition, one paragraph is styled as an aside, with a background and a graphic.
The second page is more approachable and consumable because it’s organized and structured.
Visual contrast of text
Visual contrast recommendations already exist in WCAG 2.1, but version 3.0 recommendations update the calculations based on newer color perception research.
The purpose of the guideline, however, remains the same: make sure text and background colors have enough contrast to be easily readable. You don’t have to go as extreme as full black (#000000) on full white (#ffffff), but you should really avoid a light gray on a medium white—that text just isn’t going to be readable for a segment of your audience.
Bear in mind, color blindness can also render several colors differently to people who may be missing shades of red, blue, or green. Fortunately, there are great tools like the WebAIM color checker for assessing color choices; run your color palette through these tools to assess how your colors interact and work—or don’t work—for text and backgrounds.
There are also more comprehensive accessibility tools like SiteImprove and Monsido, which provide accessibility reporting along many WCAG 2.1, and we expect these tools will adopt the 3.0 guidelines as they mature.
Error prevention
The final addition to WCAG 3.0 follows the path of usability for your website or application: helping users avoid making errors. This is an area where the current draft is a little light still, as the working group establishes the initial guidelines.
Error prevention in broad strokes is the idea that when you need your user to take an action, you’re guiding them on the best way to do that without making a mistake or causing an issue. For example, if you’ve ever submitted a form on a website only to have that website tell you that an error occurred due to the information you provided, that’s an accessibility failure. Most users will assume the form is broken and not try again.
If, instead, you guide the user on the information the form needs, you can largely prevent errors. You can do this with help text, breaking up complex forms into smaller step-by-step wizards, or even providing a walkthrough video or animated gif that shows the user entry experience.
Providing intelligence in your forms is also a good form of accessibility. For example, auto-filling the city and state when the user provides their zip code is an accessibility improvement that helps users avoid giving mismatching entries and causing a data error.
Accessibility is at the heart of user experience.
Walking through this early look at the draft WCAG 3.0 guidelines, we can see how, as the standard matures, the idea of accessibility itself encompasses more today than it once did. While prior standards focused on technical compatibility and implementations, many of the above draft guidelines focus on user experience. Making your website easier to use and understand is just plain good UX.
Ultimately, that’s why we make accessibility one of the six fundamentals in developing and maintaining a great website.
Designing your website to be accessible to all is vital, but many of us take it for granted. We easily navigate online environments without even thinking about clicks or visual/audio cues. But it’s not that way for everyone.
Without accessibility features, those with auditory, visual, or physical impairments can’t experience and engage with the digital world. They miss out and, therefore, you miss out on a potential customer.
By applying WCAG guidelines to your organization’s website, you’re helping make digital access equitable. It’s not only the right thing to do, but it just might improve your business too.