Content & Structure Swaps

Content Structure for Accessibility

Natalie: So first up, let’s talk about the content swaps. So first, we’ll talk about how we structure our content. So I’ve got a slide here. It’s got lots of text and it’s not very big, but don’t worry about reading it.

This, this slide is all about the feeling of being presented with a wall of text. Uh, so let’s go. If I’m looking for something specific in this information here, it’s difficult for me to find it. There’s no guideposts, there’s no way for me to figure out what’s being presented here and where I might find it in the document.

So instead of presenting a wall of text to people, you instead want to break up your text with headings, lists, and short paragraphs. So this slide also has quite a bit of text on it, and don’t worry about reading it at all, but just notice how different this feels. It’s generally the same information that was presented on the last slide.

But now we can see that we have headings that are larger than the rest of the [00:01:00] text that help me to figure out what exactly is being talked about here. Things are presented in numbered lists and in bulleted lists that are easy to scan. And so if I’m looking for something in particular, I have a good idea of which section of the content to go to.

I also, just at a glance, can get a really good feel for exactly what this page is talking about and what content I’ll find here.

Effective Use of Headings

Natalie: Next, let’s talk about headings. So here we have the WordPress block editor, and I have a paragraph. And I have styled it to be bold, and I have also made the font size large to create a heading. There are some issues with styling paragraphs like this when we actually need a heading. So instead of doing this, what we actually want to do is use heading tags.

So there is a separate type of block in the WordPress block editor just for [00:02:00] headings. And we can see that this here is a heading level 2. Now visually, the two options look almost identical to one another. They’re both just larger, bold text that stands out from the rest. The difference is when somebody is accessing our page using assistive technology.

The assistive technology can recognize something that actually is marked as a heading, as a heading, and use it to help somebody navigate through our content and find their way.

Using Color and Contrast

Natalie: Next, we’ll talk about how to use color effectively. So, instead of using color alone to convey meaning, we’ll use So this is something that we see very commonly, we use red for error messages or when something has gone wrong and green for success messages or when something has gone well. However, red green color blindness is the most common form of [00:03:00] color blindness and impacts almost 10 percent of men.

So if I can’t see red and green or can’t tell the difference between them, I can’t tell which of these might be a success message and which one might be an error message. So instead of using just color to convey meaning, it’s better to use color along with icons or shapes and text to convey that meaning.

So in this case, I’ve added an icon and the word error in front of the error message, and a checkmark and the word success in front of the success message. Even when I can’t perceive red and green from one another, I can still tell which message is an error and which message is success.

Alright, next we’ll move along to text contrast. So, it’s become very trendy on the web to have very low [00:04:00] contrast, just barely there text. But, instead of doing that, we want to make sure that our text is high contrast and easy to see. This helps people who have vision impairment. It helps people who are outside on a sunny day trying to read our website.

And it’s just generally a lot friendlier. So it’s nice to be kind to the people who are using your website and make it easy for them to read your content.

Link Styling and Text Alternatives

Natalie: When we’re styling our links, there is another trend that’s across the web I see all the time, where people want their links to kind of blend in with their text. And so they make them just barely a different color and remove the underline on them. So, again, I have a slide with a wall of text on it. Don’t worry about reading it.

I just wanted to point out, I’ll highlight them, how difficult it might be to recognize nested inside those paragraphs. [00:05:00] So instead of removing that underline, you want to go ahead and use the underline on links that is there by default. That helps people to recognize the links and see them easily.

There’s a tendency to think, oh, it looks more tidy without those. They are really important and really helpful for communicating where to find the links. I’ll highlight them, but you probably didn’t need the highlight. You can probably see those links standing out.

And continuing with links. When we are linking to other pages on our website, we want to use, uh, helpful text. So, there’s a real tendency to do things like this, to say, to download the documents, click here. Or to view our About page, click here. The click here is a holdover from the very earliest days of the web in the early to mid 1990s, when people didn’t realize how hypertext documents [00:06:00] work and didn’t know that you could click links.

But people know now, so we can stop telling them. We don’t have to keep saying click here. And you can see that if I’m just scanning this page, and I just see click here, click here, I can’t tell what those links do. If I use helpful and descriptive link text instead, so that the linked words are download the documents, or to learn more about us, visit our about page, and about page is linked.

Now I can tell at a glance what each of those links does. And this is also helpful for assistive technology. Assistive technology users can pull out a list of all the links on the page, and if all they say is click here, click here, click here, it’s not a helpful feature for them at all. If they see download the document about page, learn more about elephants, or whatever it happens to be, then they understand what all of those different links are.

And when we use multimedia on our website, which of [00:07:00] course we have generally three texts of multimedia that we add to websites. Images, audio, and video, uh, and it’s fine to include multimedia content, but we don’t want to only add multimedia content. We want to make sure that we’re adding text alternatives for people who cannot perceive or process information that’s presented in visual or audio formats.

So for images, we want to include alt text or captions. For audio, we want to be sure to include a text transcript. that includes all of the text in the spoken audio. And for video, we could include a transcript similar to the audio one that includes all of the text spoken, or we could include captions on the video.