Skip to content

Making Your Written Content Accessible

By Unity Web Agency

Read time: 9 minutes

Now that you understand the essential principles of web accessibility, the concepts tied to it, and how you can measure your success, it’s finally time to start working on the site.

But we’ll be diverting away from discussing proper web development, and we’ll dive more into how to properly structure your website when it comes to content. 

Although the overall design, structure, and usability of your website are of the utmost importance when it comes to web accessibility, the content you use to populate your site comes at a close second.

When it comes to accessibility regarding your website’s content, the first thought is to provide various methods of consuming that content. Developers will offer magnification options or ensure screen readers are able to properly read the text. And although that’s all good and important, it doesn’t contribute to the quality of your site’s content.

Even if your site is fully accessible, it won’t have the same impact if you have bad content. 

This is where proper content structure comes into play. 

Yeah, you’ll still have to create engaging content, but by following proper content structuring you’re able to get your point across in a smoother and more understandable manner. 

It is important to note that this will be the first of several steps you want to follow if you’re looking to create good, accessible content. One doesn’t succeed without the other, so it’s important to incorporate all of these elements as you learn about them.

Here’s what you need to do to structure your content in an accessible manner, all with success criteria provided by the Web Content Accessibility Guidelines (WCAG).

Use a descriptive title for each page

When creating a title for your article and webpage, you want to make sure that it clearly identifies the purpose of the page while being unique. The title should also be short, flow properly, and make sense. 

For example, let’s say we’re creating a web page based on our Simple websites. We wouldn’t want to lead with “websites targeted for mission-driven businesses” or “affordable websites.” The first title is too long, while the second title is vague and could come off as a negative to certain consumers. 

We want to create a title that gets our point across while leaving consumers intrigued. In this case, since our package is actually called “Simple,” we’re happy to use the phrase “Simple Websites.” 

Not only does that showcase our package, but the name of the product leaves consumers wondering what could make our product “Simple.” 

Simple, but effective.

Success Criterion

Use headings with hierarchy

Here’s where a basic understanding of HTML can come in handy.

When it comes to writing within WordPress, a lot of writers can write directly on the backend or copy-and-paste their written content. Although that’s certainly an option, especially with the numerous plugins available, it’s not always the best option.

This is especially true for writers that don’t have different plugins available that can translate your content’s hierarchy. 

If you fall into this category, how exactly can you clearly represent your content’s hierarchy?

Through proper use of HTML tags.  

HTML tags help tell WordPress (or whatever content management system you use) what the hierarchy of your content is. When used properly, WordPress will be able to tell what is the heading, subheading, and paragraph. 

They typically look like this:

H Tags (titles, headings, and subheadings): <h1></h1>, <h2></h2>, <h3></h3>

P Tags (paragraphs): <p></p>

Now, there are a variety of tags you can utilize when trying to incorporate HTML tags into your content, and you can find a comprehensive list here, but what’s important is that you properly utilize H and P tags.

When using H tags, you want to make sure they follow the sequential order that they are in. So if you use an H1 tag, you’ll want to use an H2 tag next. That indicates to WordPress that the H1 tag is the title, while the H2 tag is a subtitle. 

The same goes for P tags. You want to start every paragraph with a P tag, as that tells the system you’re writing a paragraph. 

The big thing to remember is to not skip the order you set your H tags. So for example, if you have an H2 tag listed, you should never skip down to an H4 tag, as this could disrupt how your content is interpreted by WordPress. 

Oh, and make sure you close all your tags. Not doing so could lead to well-structured content looking wonky and disorganized, which is the last thing you or your visitors want to see. 

Success Criteria

Use bulleted or numbered lists for groups of related items

Staying within the context of HTML content formatting, using bulleted or numbered lists is a great way to help consolidate and clear up the points you’re trying to make.

This is best when you are trying to list out multiple items and concepts or if the concepts you’re listing have a long definition or description attached to them. 

And when using lists, make sure you stick to numbers or bullets. Utilizing asterisks or dashes as replacements is not a great form of proper content accessibility. 

As for what HTML you should use, make sure to utilize these two formatting options:

Unorganized lists (bullets): <ul></ul>

Organized lists (numbers): <ol></ol>

Using these HTML codes will tell your system that not only are you trying to format concepts into a list, but you’re differentiating between numbered or bulleted lists. 

And like we mentioned earlier, remember to close the HTML tags you use. If not, any content that comes after that open tag will be listed in bullets or numbers.

Success Criterion

Use descriptive links

Have you ever seen a link, but wondered where exactly that link would take you?

For all you know, that link could be the answer or solution you’re looking for. But if it isn’t clear what the purpose of the link is, odds are people won’t click on it. 

This is where a lot of sites can hurt their accessibilities ratings, as many sites opt for leading, unclear text such as “learn more” or “click here.” Not only is this poor accessibility, but it’s frustrating for users in general. Make sure you share the specific purpose of that link and where it will take people, whether that be by linking the explanation phrase or by providing context prior to the link.

Success Criteria

Do not use only color, shape, size, or location to imply meaning and when providing instructions

When we write content, it can be easy for us to lean on color, shape, size, and location to highlight our point.

“Click the blue button.”

“You can find more information below.”

Although these methods are often used, it doesn’t mean it’s the best or most accessible thing to do when drafting content for your website. For those that are blind or visually impaired, relying solely on color, shape, size, or location to imply meaning or provide instructions is terrible when it comes to web accessibility. 

If you’re trying to direct people towards a specific action, try adding a little more context to your directions. 

“Click the blue button found on the bottom right of your screen.”

“You can find more information highlighted at the bottom of the page.”

Doesn’t sound that much different, right? 

By adding a little more context, this can help make site navigation easier and even improve your click-through rate. 

Success Criteria

Make sure there is enough contrast between text/icon colors and the background

This next tip definitely falls within the meticulous side of content formatting, but it’s still something to keep in mind when optimizing your content for accessibility. 

If text is less than 24px (not bold) or 18px (bold), the contrast ratio must be 4.5:1. If text is at least 24px (not bold) or 18px (bold), the contrast ratio must be 3:1. As for icons, they must have a contrast ratio of at least 3.1. 

So, what exactly does this mean?

This specifically applies to the background of your text and icons. When writing, you want to make sure that the text sticks out and is very easy to read. This same thought goes with the icons you may use on your site.

So for example, let’s say you have a blue background on your website. You don’t want to have the text or icons on your website to be blue or any darker color, right? Doing so will make the texts and icons harder to read, which can lead to a frustrating experience for your users. 

For tips on how to properly do this, our graphic designer — Bud Northern — actually talks about color contrasts on the first blog of his “Personal With Color” series, and it’s a great piece for understanding the tools and concepts for proper contrasting. For additional help, also opt for the Contrast Finder Tool, which is a great resource to ensure your text and icons follow the standards listed earlier. 

Success Criteria

Do not place text content in carousels or sliders

If you’re currently using or thinking about using a carousel or slider to display content other than images:

Don’t. 

Not only is this practicing poor accessibility, but most users find it annoying to use. 

Frankly, this should only be used sparingly. Anything other than using it for photos can make your site harder to use, makes the content more difficult to consume, and increases the likelihood of your audience clicking out of your site. 

And you definitely don’t want any of these situations happening to your site, right?

Success Criteria

And there it is! Your checklist when it comes to creating accessible content.

Have questions for us?

Feel free to reach out and email us at [email protected], as we’re always looking to discuss web accessibility and you can make your content more consumable and inclusive.