Content is an essential part of any web accessibility strategy. I mean, WCAG literally stands for Web Content Accessibility Guidelines.
Developers and designers can do a lot to make your web properties accessible. But when it comes down to managing the actual content—which includes written and media content—the content strategist has to make sure they are utilizing the resources provided by their development or design teams. For example, I was working on an article recently that included a table with additional aria elements that indicated for screen readers which table boxes were checked and which were not. If I’d forgotten to update those aria labels, screen readers would be clueless as to the content within the table.
Before you begin, make sure you understand inclusive language (my fellow Sparkboxer Catherine recently wrote this amazing piece that can be a great starting point). Let’s go over some common ways to make your content accessible so your whole project can be accessible from the ground up.
Creating Accessible Content
Making sure you’re writing accessibly from the beginning is the first step. Let’s break it down just a bit.
Write Simply and Clearly
The first step to making your content accessible is writing simply and plainly. By prioritizing simple and straightforward writing, you make your content available to everyone—people of all ages and cognitive levels. In most cases, you want to aim for about an 8th-grade reading level. Some general writing best practices include:
Give the most important information first
Write in simple and concise sentences and paragraphs
Make text scannable with headings and bullet points
Avoid misunderstandings by giving plenty of background information or linking to other resources that give extra context
Stay on topic and eliminate unnecessary or distracting information
There are also many writing techniques that make content easier for screen readers to comprehend. But you should not write content that works specifically for screen readers! This can make content harder to understand for other audiences. Instead, prioritize writing content that’s accessible for everyone by:
Avoiding unnecessary capitalization (e.g., “She WAS there.” But acronyms like NASA are fine)
Replacing letters with numbers or symbols (e.g., avoid “a11y”)
Using meaningful text in hyperlinks—more on that next!
Make Link Text Meaningful
When linking from your content, be sure the link text clearly explains where the link will take the user. Avoid linking on phrases such as “click here” or “register here” and instead opt for something like “read more about accessible linking here.” Screen reader users can navigate a page with these links alone, so giving the correct information on the link is crucial. Making sure the link text (also known as anchor text) is related to the link can improve the SEO of your site and of the site you are linking to.
Explore more about anchor text (including its SEO impact) in this article from Wordstream.
Use Emojis Selectively
Emojis are fun! 🙂 They can enhance content and bring attention to important points. The key is they enhance content. Don’t use emojis in place of content since emojis are up to the users’ interpretation and could lead to confusion. Don’t use so many emojis that they distract your audience. Also, make sure to use the emoji character rather than text like “:)” because screen readers often misinterpret the use of excessive punctuation to be “colon right parenthesis.” Emoji labels are typically read correctly by screen readers. Finally, consider using emojis at the beginning or end of a sentence instead of the middle. Consider how it can add an awkward break to a sentence like “I went to work—woman technologist emoji—as a developer today” instead of “I went to work as a developer today—woman technologist emoji.”
Learn more about emoji accessibility best practices here.
Provide Clear Instructions
Sometimes even the smallest piece of content can make the biggest difference. Think carefully about instructions for a sign-up form or an error message on a form field. Providing understandable and concise instructions for users eases confusion. Make sure to explain the information that should be provided on a form entry. If an entry fails, provide a clear explanation for why a form could not be submitted.
Page Elements
Content is not just the words you put on a page. Users also interpret what you write based on organization and formatting. There are many ways to use page elements (such as titles, headings, and navigation) to make content even easier for your users to digest and understand. Having clear page elements helps people with different abilities by creating structure.
Make Page Titles Informational
Try to make your page title distinguishable from other pages by having relevant information in the title. Having an informational title helps users navigate easily to the pages they need—consider the tabs on your browser and having to choose which one you want to go to next. When writing page titles for easy navigation, make sure the page title is before the name of the organization—like putting the most important information first. So for this article, the page title would be “Making Content Accessible by Sparkbox.”
W3C has some more information and examples about page titles.
Use Headings to Group Content
For any webpage, group related content under the same heading. Using headings strategically to group similar pieces of content makes it skimmable, but it also indicates how the information on the page relates. For users who utilize a screen reader, headings are an easy way to navigate through content because many screen readers indicate the structure of the content the user is consuming. It is important to keep headings in order without skipping levels (e.g., each page should have an H1 first, then subheadings are H2s, etc.).
Learn more about headings from W3C.
Breadcrumbs
If your website has a lot of pages—especially a lot of parent and child pages—breadcrumbs can be a helpful navigation tool. Breadcrumbs help all users understand where they are on your site and how they got there. For example, if I am shopping and looking for a planter, I might see breadcrumbs of “Products -> Indoor Decor -> Plants and Plant Accessories,” which act as easy navigation back to previous pages if I get lost.
Learn more about breadcrumbs and coding them correctly here.
Media
Images, videos, gifs—these are fun things to add to any webpage! They make content more engaging and can also emphasize points. We rely on these mediums to make stronger connections and communicate more clearly with our audiences. But they also bring additional challenges to accessibility.
Provide Descriptive Alt Text for Images
If you have worked with web content, you have probably at least heard of alt or “alternative” text. Alt text is a text substitute for non-text elements on a page, such as images, and offers many benefits. Screen readers use alt text to describe images to low-sighted users. If an image does not load, alt text allows all users to understand an image’s content. And it helps with SEO, as screen crawlers use the extra information to better determine page purpose.
When writing alt text, make sure the alt text is descriptive of what information is conveyed with the image. For example, if I give directions about how to wrap a gift, the alt text would not just be “box with paper being wrapped around it.” It would have to be more descriptive: “Paper is under the box with the left and right sides being folded toward the center of the box.”
Not every image needs alt text. If your image or gif does not provide any meaningful content, such as a decorative background, consider using empty alt text (alt=””). This saves your screen reader users time as they navigate the page.
WebAIM has some great information and tips for alt text.
Provide Text Alternatives for Audio Media
Audio media is a great way to convey information, but not all users can use it. Always offer alternatives to listening to content. When publishing audio-only content, publish a transcript. When publishing video or visual content, provide captions. In addition to transcribing the spoken content, make sure to provide context for important sounds. Transcripts and captions help people with a hearing impairment and provide a script for people with cognitive disabilities or people who prefer to read information.
W3C has more information about making audio media accessible.
GIFs and Animations
GIFs and animations engage readers and emphasize information in a fun way. However, they can cause issues for low-sighted users, those with attention disorders, or users who are prone to seizures. In addition to clear alt text, users also need a way to pause the animation or reduce the motion because fast, repetitive motion can trigger seizures for people with certain conditions. To help, make sure all the content does not flash more than three times per second and include a clear way for users to pause, stop, or hide moving content.
Learn more about pausing, stopping, and hiding moving content and the three flashes threshold from W3C.
Conclusion
These are all great ways to help your users and make content more accessible. But there’s so much more to explore! If you want to be sure your users can easily access and understand all of your content, an accessibility audit can help. Even auditing a few pages can give you an idea of what current content practices exist on your site. As you are fixing content errors, make sure to also update your content guidelines to reflect these accessibility best practices you are putting in place.
Ensuring accessibility is not something you can do by yourself, but advocating for accessibility and sharing accessible content best practices can help get everyone on board! Even the smallest changes can make a huge difference for your users.
