How to make sure your content is accessible

Accessible websites aren’t just a nice thing; they’re basically requirements for being on the web these days.

But converting an entire site to be accessibility ready can be a challenge and time consuming, especially if it wasn’t built right. And if you’re not a developer, it takes time and money to find someone to make it right. What can you do right now to make sure your site is at least somewhat accessible?

The answer is to at least make sure your content is accessible. And really, it’s an ongoing thing even after the rest of the site (the header, footer, sidebar, etc.) is accessibility ready.

Here are some ways to make sure your content (i.e. post and page content) is accessible even if the rest of the site may not be yet.

Add alt tags to images

The easiest thing you can do right now to make your site accessible to add alternative text to all of your images. Alternative text serves two purposes on the webpage. First, if an image link is broken, the alt text will show up in place of the image. Second, screen readers use that text to read the description of the image to visually impaired users.

And adding that alternative text is super easy. In HTML, all you need to do is add the alt=”{your text here}” attribute to any img tag. And most content management systems, like WordPress, off easy ways to enter in alternative text.

I will admit that I’ve fallen short of this here on this website. Part of the reason this site isn’t completely accessible is because I forgot to add alt text when I uploaded an image. But I’m working on fixing that. And you should too.

Make sure link colors have right contrast and context

Next, you should make sure that people know that links are actually links. That means making sure they have the right contrast with the text around them and the background.

You can accomplish this in two main ways: first, you can use color to denote a link. Second, you can use text-decoration: underline to show an underline for all links.

Also, make sure you’re using descriptive text for your links. That means not using “Read More” or “Learn More”. Instead, aim for “Read more about making your site accessible” or “Learn more about what I do”. That way when people are using screen readers, they can have a better understanding of what that link is for and where it will take them.

You can still display “Read More” by hiding the rest of it with a screen-reader-text span or something similar.

Again, I’m working on this myself.

Use the correct headings

Another quick fix to make your content accessible is to make sure you’re using the correct headings. If your website is built to the web standards, your page or post title will be wrapped in an H1 tag. So, any subheadings in your posts or pages should be wrapped in an H2 tag. And any sub-subheadings should be wrapped in an H3 tag. And so on and so forth.

Screen readers and other assistive technology rely heavily on that heading hierarchy. Plus, even for people who can see the screen, it makes it easier to read and figure what a post is about.

So help everyone read what you’ve written with correct subheading levels.

Watch what you embed

Finally, a great thing to do to keep your site accessible is to watch what you embed. When you embed a tweet or a YouTube video, you’re adding some complexity to your posts and with it a change that it’s not accessible to some users.

I know for a fact that on its own, YouTube’s embed code is not accessible. It uses an iFrame with no title tag, meaning screen readers have no way to describe what’s going on with this element. This includes if you put a YouTube video into a WordPress post through the old oEmbed or the YouTube block. You can kind of fix it by pasting the iFrame code you can get and manually adding the title tag.

But it just goes to show you that you need to be careful with what you put in your content. Unfortunately, not everything out there is accessible. Of course, you might really need to put that video or tweet in your post, and that’s okay. But just know that embeds might not meet the level of accessibility you need or want.

Use the NC State Accessibility Helper plugin

The amazing folks over at the NC State Office of Informational Technology have put together a great plugin that will help you make sure your posts and pages are accessible.

The plugin allows you to check the content for any of the major accessibility problems with a click of a button. It works both with the old editor and the new Gutenberg editor, although you have to go all the way to the bottom to see it in the new editor.

It will take you to a screen like the post preview screen and highlight accessibility problems on the page. It’s a great tool and the folks over at NC State are doing amazing things for WordPress in higher education. Even if you’re not in higher education, this tool can really help you out to catch those errors.

So if you’re trying to get your website more accessible in a quick way, check and change your content. After all, it’s the most important part of your website.