How to Write Accessible Website Content
Web accessibility standards improve how users interact with your website and ensure everybody has an equal experience. Accessible content, as defined by the Web Content Accessibility Guidelines (WCAG) 2.1, equalizes the playing field for users with visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities.
Online accessibility also achieves a lot more than assisting users who have disabilities. Accessible content also adds descriptive labels to CTAs and buttons, improves the site’s foundational SEO, promotes inclusive design and content layout, and helps people who use digital voice assistants, which are estimated to be in 8 billion devices by 2023.
There are three levels of web accessibility adherence, which provide flexibility based on your situation, user base, and goals.
A: 25 criteria, minimal impact on site design and structure.
AA: A-level requirements, plus 13 additional criteria. Moderate impact on site design and layout, specifically around legibility (color contrast, font type and size, image presentation).
AAA: Strict adherence to all WCAG guidelines. Significant impact on site design and layout. It is often used only by government agencies.
We recommend your website at least be A-level compliant and strive for AA-level. To learn more about each level and what you need to do to achieve them, read our developer’s guide to accessibility.
The technical details of web accessibility are only part of the equation to provide a seamless user experience and make your content easy to understand and engage with. Your users are the variables that determine what accessibility level you need, and how you should create your content.
Below are four concepts and associated techniques to improve user inclusion alongside the technical website accessibility guidelines.
1. Put Yourself in Your User’s Shoes
If you’re not accustomed to making accessible content, empathy can be an often overlooked aspect of content layout and design. When you plan a new landing page, app, call-to-action, interactive component, or blog post, consider when and how users will interact with the content. Use empathy scenarios or an inclusive design empathy generator, as seen in the image below, to broaden your perspective so you don’t forget crucial design elements and accidentally isolate users.
Let’s imagine you operate a reservation-only restaurant. A user, Charlie, wants to make reservations for this evening. Unfortunately, she has laryngitis and can’t talk on the phone or speak loud enough for her digital assistant to make the reservation on her behalf. If your website doesn’t have a chat function or the option to make reservations via text, you’re likely going to lose Charlie’s business. The scenario holds true with users who are mute, deaf, or socially anxious, too.
2. Use Inclusive Language
How you say things holds equal weight to what you say. Certain words, phrases, or expressions can isolate, intimidate, and aggravate users. Although inclusive language isn’t directly related to WCAG accessibility standards, using phrases that reflect respect and dignity makes your copy friendly and welcoming.
Phrases that patronize, reflect bias, or include negative and derogatory terms, influence users’ impressions, attitudes, and actions. To avoid upsetting users or establishing negative associations with your brand, write copy that is neutral, accurate, and references groups with the terms they identify with.
For example, “wheelchair user” is the commonly accepted vernacular for somebody who uses a wheelchair. Phrases like wheelchair-bound or handicapped are disparaging and often inaccurate, as many wheelchair users can leave their chairs for short time spurts.
Inclusive language also avoids technical jargon, slang, or undefined abbreviations. The rule of thumb is to define any lesser-known concepts immediately after the first use and define lesser-known acronyms or abbreviations before first use.
What terms you define depends on who your audience is and how intimately they know your industry and brand.
For example, if your users are U.S.-based, you can get away with not defining NASA. But you should identify its European counterpart, the European Space Agency (ESA), and include any shorthand you’ll use for that organization in parenthesis.
3. Create Descriptive Functions and Labels
Best practices for web design, content strategy, and online accessibility require anchor text, interactive site components, and CTAs to give users explicit expectations of what will happen if they click on a link or button.
This transparency empowers users by removing ambiguity, and it enables users who rely on e-readers or other assistive technology to accurately interact with your website’s content.
Regardless of how somebody accesses your site, they should be able to easily identify labels, images, CTAs, and form functionality. And elements for interactive content, like a form field, should have labels that are implicitly or explicitly associated with each function.
Imagine you have a visually-impaired user with an e-reader who is trying to submit their information via your website’s contact form. If you use the ambiguous CTA label “Submit,” the user may get confused about what part of the form they’re submitting. Is it one entry field or the whole form? If your company has multiple customer service departments, your user might also be worried if their form is being sent to the correct people.
However, the labels “Submit Request” or “Submit Technical Support Ticket” are descriptive and tell the user exactly what action they’re taking.
The Blank Sheet of Paper test is a good method to measure if your labels are descriptive enough and eliminate room for interpretation.
Here’s the test: If you wrote the label on a piece of otherwise blank paper and showed it to a stranger, would they understand what you are talking about? Is it descriptive enough that they would understand the context and have reasonable expectations about what action will happen?
4. Transcribe and Caption Videos and Podcasts
Video and podcast transcripts are great for SEO, and they’re necessary for good WCAG 2.1 levels A and AA adherence.
On the SEO side, search engines index transcripts easier than video or audio, which lets your content rank for related keywords. It’s also significantly easier for other people to link to a transcript than a video by itself. Your outreach campaigns benefit, too, because people are more likely to link to a quote via text than note a specific time in a video or audio file.
Moz, via its Whiteboard Friday series, is the industry leader at using transcripts for SEO and accessibility purposes. We recommend exploring the Whiteboard Friday category for best practice examples.
From an accessibility standpoint, transcripts benefit a wide range of users who engage with your content. This user base includes:
- People who are deaf or hearing-impaired
- Users with time constraints
- Users in either a noisy or quiet environment, where audio can’t be heard or it’s a disruption
- Non-native speakers
- Bandwidth-limited users who may not have the ability to download the whole video or podcast
The second usability and WCAG accessibility consideration is to include in-sync subtitles or closed captioning for all videos. YouTube has a great guide that provides tips for creating a transcript file, and then teaches you how to upload that file to a YouTube video.
Although transcripts can be time-consuming for lengthy videos, they’re a necessary element to providing a good user experience and optimal content accessibility.
A Worthy Investment
Making your website accessible tackles a lot more than simple web design. Accessible content affects every user, and excellent accessibility is good content strategy. By implementing WCAG level A or AA standards, you’re committing to providing users the most inclusive experience you can muster. That effort sets your website apart from any competitor that doesn’t abide by the same commitment to a great, accessible user experience.
The post How to Write Accessible Website Content appeared first on Portent.
