Accessible Content: 6 Tips for Inclusive Web Pages [Checklist]

More accessible content can be a huge undertaking when it comes to your nonprofit’s website. But there are also small changes that you can make to pages on your site and to your content creation process that make your website more welcoming for visitors of all abilities.

What Is Accessible Content?

Accessible content is inclusive content. It means that anyone, regardless of their abilities, can consume your content. In practice, this means making sure that people with hearing, visual, mobility or cognitive disabilities can use your website.

In case you missed the boat on this, it’s 2020. You should care about website accessibility standards and make an effort to follow them as you create content.

Creating Accessible Content

While I’m going to cover guidelines that are great for individual pages of content, there are site-wide accessibility standards and guidelines to consider as well. But tackling things on a page-by-page basis is an excellent place to start. I’ve outlined the simple steps you can take to create and format inclusive content that follows web accessibility guidelines.

Make Information Clear and Logical

It just so happens that creating accessible content overlaps with creating good content. Are your points clear or does the content leave visitors with questions? Do your points and the information you include follow a logical progression?

You also want to make sure that the name and placement of the page within your overall website structure is clear and logical based on the content. Otherwise, your visitors might not ever find it, and all this time you’ve spent on content creation will be wasted.

Include Text Alternatives for Non-Text Content

This includes content like images, videos, icons, graphs, sound files, etc. Whether it’s by adding alternative text attributes (or alt text) for images or a transcript for videos, offer a way for those who can’t see or hear the content to still gather its meaning.

A Note on Alt Text

While it is important to describe any images within your page content, there is a difference between images that are informational and those that are purely decorative. If the image is important to the content, the alt text should briefly describe the image. And, if the image is linked, it should note where the link goes, rather than describing the image itself.

Hot tip: try to avoid using phrases like “image of” within alt text. Assistive technologies like screen readers denote that automatically.

If the image is purely decorative, there is no need to include descriptive alt text. You can tell screen readers to skip over it by adding an empty alt tag (alt=””). If you don’t use that empty tag, some screen readers will read the file name instead. Trust us, no one wants to listen to that.

Images With Text

Steer clear of housing text within images whenever you can. Screen readers can’t read images, so they’ll rely on alt text to get the message across. These are also a bummer for people who have turned off images on their phone to save data.

Follow the Heading Hierarchy

Using headings throughout your content makes it easier to scan and follow new ideas as they’re introduced. And the heading styles are not just for looks. They follow a structure that your readers and screen readers have come to learn. Mixing up that structure is unnecessarily confusing for your readers.

On each page, start with Heading Style 2 (H2) and work your way down through the heading styles (H3, H4, etc) until you begin a new topic and begin again with H2. Using this post as an example, the “Creating Accessible Content” is H2 and is followed by “Make Information Clear and Logical” and “Include Text Alternatives for Non-Text Content” in H3 and “A Note on Alt Text” in H4.

Acronyms and Abbreviations

On the off-chance that you have a reader that doesn’t yet know the acronym or abbreviation that you’re using, always spell the whole word or phrase out and include the acronym or abbreviation in parentheses the first time it’s used. After that, you’re all set to go on using the acronym or abbreviation for the following mentions. For example, you would first mention the National Organization for Rare Disorders (NORD) and then refer to NORD for the rest of the page or post.

All Caps and Italics

You might think that using all caps or italics is a great way to draw attention to key pieces of content. But it’s a terrible habit in terms of content accessibility. Some screen readers handle unexpected capitalizations by reading the word letter by letter, making all caps pretty frustrating. And italics are difficult for your readers with cognitive disabilities, like dyslexia, to understand.

In general, try to avoid excessive text formatting whenever possible. If everything is bold, are you really drawing attention to anything?

Linking

Links should be distinguishable from the rest of your content so that users can see and click them. To help those with visual impairments, that means they should be a different color from the text, as well as underlined. This tool can help you find an accessible color for links.

Your links should also make sense out of context. Many people who use screen readers will tab through the links to skim the page content or find a section of your site that they’re looking for. Link text like “click here”, “learn more” or “see details” doesn’t really help those folks find what they’re looking for. As an added bonus, descriptive link text will help other readers better understand where the link is taking them. It’s a win-win.

Inclusive Web Content in Practice

I know it seems pretty daunting to work through your whole site with these guidelines for inclusive content in mind. But would you want something on your nonprofit’s site to frustrate or confuse a donor, volunteer or someone you’re trying to help?

Start by creating any new content with these tips in mind. You can then revisit the existing pages on your site in terms of importance to your organization and supporters. Donate, Volunteer and program or service pages should be first on the list.

Making an effort to work through and upgrade your web content this year? Have a question about whether or not a web page or formatting habit is accessible? Let’s chat in the comments.