Making Your WordPress Site Accessible: Definitions, Problems, & Tips
Making your WordPress site accessible is a problem that I knew very little about until I changed careers. Working in web development obviously opened new worlds of knowledge, and going back to blogging afterwards highlighted some interesting problems.
What Is Site Accessibility & Why Does It Matter?
Ok. Normally, I don’t like posts that claim to be about how to do something and then spend the first half defining that goal. That said, in my experience, most bloggers don’t know much about what accessibility is. And good writing rules require defining new terms before using them.
So here goes.
Site Accessibility
When it comes to websites, “accessibility” generally means making the site formatted so that people with visual or auditory disabilities can still use the site.
Why Does Accessibility Matter?
Besides the obvious (being nice to others), there are several reasons why it may matter to you:
- A law requires it. (This may matter most with specific business types or government agencies, but since I’m not a lawyer in any country, I’m not going to try to guess or say when this might apply. Check with a law firm if you really want to know if this applies to you.)
- You’re losing a potential audience if your site is inaccessible. (Everyone wants more likes and followers, right? It doesn’t make sense to chase people away from your site who might enjoy your content.)
How Do I Make My WordPress More Accessible?
Sadly, this is where the interesting problems comes in. There are definitely some steps you can take to make your site more accessible – even if you don’t code at all. There are other aspects, however, that are part of the system and are harder to deal with without knowing more about code.
I’m going to focus on what most bloggers are going to be able to do themselves and settle for pointing out some of the others.
Use Headings Properly
Most how-to guides on blogging tell you to use headings. Generally, they say to do it to improve SEO, but one reason search engines like proper use of headings is that they make the site more accessible. If they’re used properly, that is.
Your first time using headings, it can be tempting to use the ones with the formatting you like best and ignore ones that you don’t like. With a free site, you’re stuck with the theme presets, so that’s an understandable response.
Unfortunately, that is the wrong way to use headings.
How Headings Work
Headings are ways to mark topics and subtopics on the site. When someone uses a screenreader (an app that reads the site aloud), it actually says the heading level before reading each the text, and the person can listen to just the headings before deciding to listen to the paragraphs under them. That lets the listener skip to the topic they want to read, and it tells them that which information belongs with other information.
For example, on this page, “How Headings Work” is a subtopic of “Use Headings Properly.” The screenreader would say “Heading 3 Use Headings Properly” and “Heading 4 How Headings Work,” and the listener would know that the second title falls under the first.
The bigger the number is the more nested the subtopic. Conversely, the smaller the number, the broader the subject.
Rules for Using Headings
- There should only be one Heading 1 on the page. That is the main topic of the page, and every other heading on the page should fall under that topic. Think of this as the title or topic of an outline (You know, the ones you made at school with roman numerals, then, letters, etc.).
- For any other heading, there can be as many on the page as necessary.
- The first subtopic on the page should always be a Heading 2. Because a Heading 2 is a direct subtopic of the Heading 1.
- Each heading is considered a direct subtopic of the last heading before it that is one number smaller. So a Heading 3 is the subtopic of the last Heading 2 on the page above it. A Heading 4 is the subtopic of the last Heading 3 that came before it. And so on.
- Never skip to a bigger number. You can go from a big number to a small number. If you go from a Heading 4 to a Heading 2, there’s already a Heading 2 on the page. That indicates that you’re going to a new main topic instead of another subtopic (Just like in an outline). When you skip from a Heading 3 to a Heading 5, however, you leave a hole. There’s a subtopic level missing, and someone listening is left wondering if they missed something. So don’t do that.
The hierarchy created by these rules is the other reason search engines like headings – they make the topic of the page clearer to the algorithm.
Actually, since the visual formatting of the headings matches this hierarchy, it makes topics on the page and their relationships clearer to everyone visiting the site (even those reading rather than listening). In fact, this helps people skim to find the part they want to read, which helps with reader retention on the page.
Why Your Headings Might Be Broken Anyway
I told you that some of it was built-in, right? Well, there are areas of each page of your site, where the heading used is already decided by your theme. In other words, you don’t get to set or change it unless you have a paid plan and know a bit about code.
If you don’t code, there’s not much you can do about that. Your best options are…
- Look for themes that claim to be accessible. Those should have the right headings preset.
- Inspect a single published blog post’s page and search for h1 and then h2. If they’re used that will tell you to start with Heading 3 in each post. This option does require looking at code, but truly, all you have to do is put “h1” in the search bar under the code and hit enter. If it finds something, you know there’s an Heading 1 on the page. Same for Heading 2.
- Follow the rules in the section above. If there’s an issue with the rest, or you can’t manage the other 2 options in this list, at least, that section of the page will make sense with itself. That’s better than not having proper headings in that section at all.
Don’t Spam Alt Text
Another tip that blog guides give is putting your keywords in the alt text. If those keywords are not a literal description of the image, then, please, do not do that!
Alt text is how screen readers describe images to people who cannot see those images themselves. If the image contains important information for the page (for example, an image that has a quote superimposed over it that the article then talks about), then, the information should be in the alt text in a brief, to-the-point style.
If the image is purely decorative, like most featured images for blog posts, then, the alt text should be empty. If you’ve been blogging for a while, you’ll notice that WordPress has changed their alt text message to match this practice.
Avoid Using “Click Here” and “Read More” Links
People who use screenreaders can go through a list of links on a web page. If the text of the link is “click here,” the person listening has no idea what that link goes to. Worse, if multiple links on the page have “click here” as the text, the list is going to sound like “click here click here click here…”
That’s the opposite of useful and annoying to boot.
If you change the text to what the link is going to (“read more about making your WordPress accessible” for a link to this article after an excerpt, for example. Or “writing prompts” for a link to my new page of writing prompts.), then, the person listening to the list knows what the link is for and can use it out of context.
Hint: It also helps with SEO, especially if keywords to the article are included in some of the links. And if you’re linking to relevant pages, they should.
That said, I know some of the repeated links are generated by your theme (like the “read more” example), but you can definitely change the links in your posts, which will help those pages for sure.
Avoid Low Contrast Text
The contrast level between text color and the color of the background behind it can make the text easier or harder for people to read. People have trended away from black text on a white background because it can seem a bit boring or harsh, but some of the alternatives are too hard to read for many people.
Common areas where contrast problems might crop up are…
- Text over images like the quotes I mentioned above (Images often have texture or light and dark areas, which make the contrast change and be too small in some places.)
- Links (Maybe, you like the color yellow and want it to be the highlight color of your page. Yellow text on a black background could work, but yellow links on a light background will almost always be unreadable.)
You can check the contrast level of your text online to make sure that it’s easy to read. There are other options, too. Just google “check text contrast” and you’ll have plenty of choices.
No Autoplay
Videos that autoplay (like ads) are extremely disorienting for people who experience a site by hearing it read. They don’t know where the video is on the page, so getting to it to stop it can be very hard. Especially since they’d have to hear the screenreader over the ad itself.
No Popup Ads
You know those popup ads for subscriptions that everyone was pushing for the past few years? Those aren’t accessible for a similar reason to the autoplay – they take the listener out of context so that they don’t know where they are on the page anymore.
It’d kind of be like stepping into a department store in sporting goods and then suddenly finding yourself in jewelry. You don’t know how you got there, and you aren’t sure how to get back where you came from.
Where Can I Learn More About Site Accessibility?
Many of the other aspects are for more complicated websites than most bloggers will have (or can change without knowing how to code), but if you want to read more about site accessibility, the Web Accessibility Initiative has detailed guidelines. Those are generally what the people legally required to make their sites accessible would be trying to meet.
And, of course, feel free to post questions in the comments. I’ll be glad to answer any that I can (I can’t claim to be an expert on site accessibility, but I’ll share what knowledge I have).
