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.
Access Keys
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
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.
AStickyPostOrderER
AstickyPostOrderER lets you choose the order in which your content is displayed. You can choose to display content from oldest to newest or in the reverse order.
Hackadelic SEO Table of Contents
The Hackadelic SEO Table of Contents plugin enables you to provide a table of contents for either your posts or your pages. This will make your content easy to find.
WP-Polls
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.
Eric BlairEric Blair writes about search engine optimization at Keyword Search Pros.
