4 Ways to Make Your WordPress Site More Accessible

Most of the time, my writing focuses on search engine optimization techniques. So, why would I write about accessibility in WordPress?

Because, to a large extent, optimizing a site for search engines and optimizing a site for disability access amount to much the same thing. The same techniques that allow search robots to index a site properly allow screenreaders to correctly describe the content to users with visual disabilities.

Similarly, structuring a page properly makes it machine-friendly, whatever that machine is. Add the kind of common sense techniques that allow users (including users with disabilities) and machines to get straight to meaningful content, and you are moving towards making your site both accessible and search engine friendly.

We all know WordPress is a phenomenal tool that allows people to build blogs and websites with very little programming or coding knowledge. This platform is simple to set up, and provides a solid framework for the themes and plugins that will determine how your content and functionality is presented.

If you want your site to be accessible to individuals with disabilities, you’ll find that basic WordPress has much that is needed to facilitate the development of an accessible website, and it is not hard to take that further through the addition of plugins and good technique.

Before we get started, there are two important caveats to be aware of. First, implementing these four technqiues alone will not make any website totally accessible to the extent of complying with all requirements of WCAG or Section 508, but it will address the most common barriers to web access and deliver much greater accessibility.

Second, it’s important to understand that accessibility can only be achieved through the co-operation of design, development and content authoring practices. A designer may design an accessible theme, a developer might add accessible functionality, but if a content author inserts a meaningful image without an alt tag, the full meaning of the web page will be inaccessible.

With that in mind, here are my four tips for making WordPress sites more accessible.

Label Your Images With Alt Text

It is well documented that the single greatest barrier to web accessibility is using alt text properly to describe images on a web page. If this single point was addressed by everyone who builds websites, it would eradicate the largest number of accessibility complaints.

The fundamental point to understand is that if you are going to put images on your site, it is essential that you label them correctly with alt text. To put that another way, every meaningful image on a web page must have an alt tag.

The information in the alt tag allows users of screen readers (which read web pages aloud to users with visual disabilities), text only browsers and slow connections that won’t load images to understand the information conveyed by images.

If an image does not have meaning, for example it is used purely for decoration, there are two ways to deal with it. If you load it as a background image using CSS, screen readers will ignore it and the image does not require an alt tag (be careful, becuase this also applies to meaningful images: if you load it in background, the screen reader will ignore it). If an image is displayed using HTML but is purely decorative, then use the alt tag but leave it empty. That tells the screen reader that an image is present but has no meaning for the user and can be ignored.

When you do label your images, use descriptive text that will allow people who cannot see to understand what the meaning of the image is. This requires judgement: what meaning is the image meant to convey, and what words will best convey that same meaning. Don’t get caught up in literal descriptions of every visual detail, convey the meaning.

A classic example is an image of a magnifying glass used as a button to start a search. The image has a meaning, so it should be described. Describing it as “a magnifying glass” does not help the user. What they need to know is that clicking on this button will start a search, so alt text of “click here to search” or even just “search” may be most appropriate.

Only images that serve a purpose must be labeled. Examples of these are as follows:

Images that are used as buttons

Images that are used as links

Images that are used for any other controls

Images that directly relate to the content

This technique applies to all websites, of course, not just WordPress sites. WordPress, however, makes it easier than most, firstly by allowing the content author to switch between Visual and HTML views, and secondly by providing a field for alt text whenever an image is inserted using Add Media functionality.

Use Plugins to Enhance Accessibility

WordPress accessibility can be enhanced by using a variety of plugins. These plugins are easy to set up, and they will enable users with a wide range of disabilities to access the site. Here are some plugins I’ve found useful.

The Access Keys plugin allows access keys to be assigned to links and controls on your website. For instance, the home link may be assigned the access key combination alt+h and the search button may be assigned the alt+s key combination. Access keys, such as the examples provided, enable visually impaired users as well as those with mobility issues, to easily access what they want.

Easy Retweet is a plugin that will allow you to add accessible buttons to your page that facilitate sharing your content on Twitter. This way, if individuals with disabilities wish to share your pages with their friends, they can do so without any difficulty.

WP-Polls permits individuals with disabilities to participate in any polls you may have on your site

New plugins are being developed all the time. Use the WordPress dashboard functionality to search for more. Try different plugins and ask your users with disabilities to give you feedback

When using any plugins, make sure the plugins use are compatible with your chosen theme, as well as with one another. If your plugins are not compatible with your theme, they will either not work or will cause more problems for disabled users who try to browse your site. If your plugins are not compatible with one another, your site can be rendered unusable or content may be displayed incorrectly.

Use Headings Properly

When you design pages, it is vital to structure the content using headings in the correct order: <h1>, <h2>, <h3> and so on. When you structure the content using headings, people using screen readers can get a summary of what the pages are about and navigate them more easily. Screen reader users can access the sections of content that they want by pressing the letter “H” to go forward and “shift+H” to go backwards.

You can label your content using headings one through six. Check how your theme uses headings (for example, your theme may or may not apply <h1> to the site title and that site title may or may not appear on every webpage. Either way, make sure the first heading used is <h1> and the following headings (page title, page sub-sections, paragraph headings) descend in order through to <h6>, where appropriate.

There is some flexibility about the ordering, but the most sensible option is to keep headings in numerical order and don’t mix them up (<h1>, <h4>, <h2>, etc).

<html>
<head>
<title>Must See Horror Movies</title>
</head>
<body>
<h1>Horror Movies of the Decade </h1>
(This is the title of the page that will be assigned a header by default in most WordPress themes.
This header is always assigned to h1. Structure the rest of the content to follow what has been started)
<h2>Horror Movies for 2012</h2>
(The list of 2012 horror movies will go here)
<h3>2012 Cult Movies</h3>
(a sub-list of 2012 movies)
<h3>2012 Sci Fi Horror Movies</h3>
(another sub-list of 2012 movies)
<h2>Horror Movies for 2011</h2>
(The list of 2011 horror movies goes here)
<h2>Horror Movies for 2010</h2>
(The list of 2010 horror movies goes here)
<h2>Horror Movies for 2009</h2>
(The list of 2009 horror movies goes here)
<h2>Horror Movies for 2008</h2>
(The list of 2008 horror movies goes here)
<h4>Why Use Our Horror Movies Reference </h4>
(This gets a new, lower header level due to the fact that this section of the page comes after those
listing the movies, and it is not as important as the movie listings)
</body>
</html>

Use Navigation Links

Finally, you need to have navigation links in your site design. These navigation links will allow users with disabilities to skip past the navigation bar or other menus and search boxes and jump to certain places on the page by clicking these links. Or, the user can quickly jump to desired sections on the site. These links need to appear wherever it is necessary for users to skip to meaningful content. Examples of what these links may say are:

Skip to Main Content

Jump to Navigation Bar

Jump to Search

Some WordPress themes may already provide such links. If this is the case, you will need to check to these links to see if you have to add any of your own. Other themes, however, will not provide navigation links. Thus, you will need to add these links yourself.

Conclusion

I will emphasize again that none of this will guarantee that your website will be 100% accessible.

However, if you employ these four techniques, then you can count on your WordPress site being more accessible than 90% of WordPress sites out there, and that you have addressed the issues that are raised by 90% of people who point out web inaccessibility.

People with disabilities will be able to better access your site, along with all of your other visitors. Since these visitors also include search robots, you can be assured that making your site accessible will also benefit your business model and help maximize your profit making potential.

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

http://sopersports.com/ Sopersports

Thank,s For brilliant post about Plug In, I Always Looking For My Front Page Arrangement which you solve by providing information about AStickyPostOrderER plugin.

http://www.keywordsearchpros.com Eric Blair

You are very welcome! Let us know what other problems or obstacles you have and we’ll write a detailed article on that specific topic.

Deborah

Looks like my comment didn’t get posted. Thank you for the post. Glad to see more posts promoting accessibility and helping developers to learn more about how to make websites more accessible. Not sure you’ve heard of it, but Joe Dolson’s WP Accessibility plugin resolves many issues with WordPress accessibility.

http://www.keywordsearchpros.com Eric Blair

Thank you, Deborah, for the plugin recommendation and your gratitude. Let us know if you have any specific questions on this topic or related topics that you’d like us to research and cover in detail.

Deborah

Eric, there’s a strong community of accessibility professionals/advocates on Twitter. If you’re a Twitter user, check out the hashtag #a11y or #accessibility.

http://www.onsman.com Ricky Onsman

Deborah, there is also a community of web developers and designers right here that is interested in accessibility. Since they’re here, why not address their questions, comments, solutions and misconceptions right here. I’m a long term disability advocate myself: the problem I find is that we end talking amongst ourselves while the people who most need our advice are somewhere else – like SitePoint.

Andrai

A few of the plugins haven’t been updated in 2 years (AStickyPostOrderER, Access Keys, and table of contents). A lot has happened with WordPress since then. Are you sure you want to promote plugins that are outdated or potentially incompatible with newer sites?

I like your post and the promotion of better accessibility, but I think you should devote more research to the plugin recommendations.

http://www.keywordsearchpros.com Eric Blair

Thank you, Andrai. That’s a good point. I’m definitely planning on writing the part two of this post and discuss the new and relatively unfamiliar plugins that have the potential of becoming ‘household names’.

http://news.sutterhealth.org Mike

Read more links are huge since they are repeated so often. In your theme add the title back after the read more link. Like:
<?php the_content("Read More about ” . the_title(”, ”, false)); ?>

The Accessibility plugin above handles this particular issue, but we try to use as few plugins as possible.

http://www.keywordsearchpros.com Eric Blair

Definitely, Mike. The less plugins installed the better. Thank you for the tip on manually fixing the ‘Read More’ link.

http://www.onsman.com Ricky Onsman

That’s a great point about Read More links, Mike: a good example of a small action a dev can take that has a big result for accessibility, generating unique and relevant Read More links to everyone’s benefit.

http://www.webaxe.org/ Web Axe

Good points, but your plugin recommendations need help. Using Access Keys is no longer recommended by experts. AStickyPostOrderER and Table of Contents is more helpful for usability rather than accessibility. I recommend WP Accessibility by Joe Dolson and WP-Accessible Twitter feed by Rian Rietveld. Here’s my recent podcast on the topic: http://www.webaxe.org/podcast-96-wordpress-events/

http://www.keywordsearchpros.com Eric Blair

Thank you for the recommendations. I’ll try the WP Accessibility and WP-Accessible Twitter feed plugins.

http://accessiblejoe.com Joseph Karr O’Connor

Thanks for highlighting the need for accessibility in WordPress themes. I agree with WebAxe, Andrai, and Deborah, and also endorse the Joe Dolson and Rian Rietveld solutions. Much has been accomplished in WordPress 3.5 to make it more accessible. Cities is creating free accessible themes, check it out: http://accessiblejoe.com/cities/

http://www.keywordsearchpros.com Eric Blair

Thank you for the recommendation, Joseph. I will take a deeper look at those plugins. Looking forward to the theme Cities ends up developing.

http://www.novate.co.uk Mark Snape

I’ve been looking for a WordPress plugin for a while that would allow user selected stylesheets.

As an admin, I can easily switch between child themes, but I could do with something that allows the visitor to choose between regular, high-contrast and large font variations, and then set a cookie to remember their choice.

Has anyone come across such a solution?

http://www.wpintergration.com Mudit Singh

Thanks Eric for this great article. Most users are only concerned about how their site looks instead of how their site is made. Adding alt tags to images has additional benefit of making it search engine friendly.

Some of the pulgins you mentioned are outdated but i am glad to hear that you are writing a updated article.

i am looking forward to it.

http://www.keywordsearchpros.com Eric Blair

Thank you, Mudit.

Yes, I’m going to be writing a follow up article. I spend most of my time learning and applying SEO techniques and strategies. This was an attempt to delve into the accessibility/usability side of SEO for a moment.

http://wetherbyweb.com Steve Cooper

Read your article with interest and have added a link to it from my own website. However when looking at two of the plugins there is a warning that they are more than two years old and may have compatibility issues. Have you tested them?

http://www.keywordsearchpros.com Eric Blair

Thank you, Steve. Those plugins worked fine with my wordpress install; however, look out for the follow up article that will go into detail about updated solutions to make it even easier for almost everyone.

http://www.joyofcode.com Bud Kraus

Thanks for a really nice article. My only quibble is with

“If an image is displayed using HTML but is purely decorative, then use the alt tag but leave it empty. That tells the screen reader that an image is present but has no meaning for the user and can be ignored.”

There is no reason to do this practice any more. If the image is decorative it needs to be used as a CSS background image (as you state before this quote).

http://www.keywordsearchpros.com Eric Blair

Exactly, Bud. Thanks for pointing that out. I just wanted to give several options.

http://Audio-accessibility.com Deaf

I’d like to add that not only images need text, but also audio. All video and audio need to be captioned and transcribed. It also benefits seo as search engines are deaf. For more info, read on audio-accessibility.com.

http://www.sixoptics.com sfp

haha, thanks for your article, these are also the ways to seo.

http://www.wpcanvas.com/ WPCanvas

Wow! Good piece of information Eric. We surely use this information for our WordPress projects as we also face accessibility problems in many projects.
Thanks for sharing

http://www.keywordsearchpros.com Eric Blair

Glad to provide useful information, WPCanvas.
Let me know if you’d like me to cover a related topic in my next article.

Chris V

Not wanting to put on a troll suit but i think your headings example isn’t right. Your the way you’ve put it is a sub-heading (or sub sub heading) of Horror Movies for 2008. You shouldn’t skip a heading level and that content shouldn’t be nested under that .

Heading levels represent how the information is structured, not how important it is (accepting that well written plain english articles will generally float the more pertinent information towards the primary heading levels anyway).

It’s the same rationale as IA dividing information into logical segments rather than purely by importance. The UX design should instead direct the traffic.

http://www.keywordsearchpros.com Eric Blair

Thank you Chris,

I’m open to seeing how you would fix it. Feel free to post the corrected version in the comments section.

I guess I looked from the perspective of SEO, assuming that heading levels represent how important it is. However, I’m open to learning, Chris.