What is Accessibility?
Accessibility on the Web means creating web pages that everyone can use – including those who cannot see, use a mouse or who use special software or hardware. These user groups will visit your site, so you, as the site owner, need to know something about web accessibility.
The Stick
In some countries, web accessibility is mandated by law and this may extend to all web sites — not just the really big, corporate, ones. Whilst the chances of a small site being sued are fairly remote, as a site owner you may still have a legal (as well as ethical) duty to do your best to ensure that your site does not discriminate against disabled users.
The Carrot
Making your site accessible to visitors with permanent (or temporary) disabilities makes good business sense. It not only increases your potential target audience but it can also make your site easier to use for everyone. Sites that are easy to use tend to be popular. Some owners, who invested time and resources in making their site more accessible found that their traffic (and potential income) increased by up to 90%.
There’s one other benefit — one of the most important visitors to your site may be both blind and deaf.
Google.
The Googlebot (and all other other search engine bots, for that matter) cannot see your images or even read your native language as well as you do. If you make your site more accessible to everyone, you will make it more accessible for (and, therefore, more attractive to) Google. And that has to to be a benefit worth investing in.
WordPress, in conjunction with a high quality theme, does some of the work for you but you will still have to take some time & effort when creating your site’s content if you want to reap the maximum benefits. To that end, we’ve detailed some simple steps that you can take to make your site more accessible.
Headings
Headings are more than just big, bold, text. They help to break your pages down into logical sections which, in turn, make your pages easier to read and understand. However, they will only work effectively if you use them properly.There are 6 levels of headings — Heading 1 (h1) to Heading 6 (h6). Heading 1 should be used for the most important heading on the page. Heading 2 is for the most important sub-heading etc. etc. Right down to Heading 6 which defines the least important heading. You should use these Headings in order — as if you were writing the outline for an essay in school. Do not use them just to highlight text in your page (there are better ways of doing that).
Images
Not all of your site’s visitors will be able to see your pages. Some people may use software (called “screen readers”) that reads page content to them instead. They need your help to ‘hear’ your important images. When you insert an image, ask yourself “Would it matter if this image was missing?”.
If the answer is “No”, then all you have to do is make sure that the image has a proper Title — not a meaningless file name like IMG_8607 — and that it doesn’t link to a copy of itself.
If the answer is “Yes — this image is important”, then you need to do just a little bit more work. First, give the image a proper Title. Then complete the Alternate Text field. Use this field to — very briefly — describe your image (e.g. “A chart of WordPress downloads over the past 3 years”). If the image will be used to link to anything other than a bigger version of itself, describe what it will link to (e.g. “Further details of what we can do for you”).
Now, even those who cannot see will understand your image.
Links
The text that you use as a link should describe the page (or site) that it links to — even when the text is read out of context. For example, the phrase “click here” is pretty meaningless all by itself whilst the phrase “Read more client stories” makes sense.
Creating a Readable Page
Sometimes, the simplest thing you can do is to create a more readable page. Reading from a screen is much harder than reading a printed page. Crowded text, a jumble of font styles, lots of different colors and too much information makes a page very difficult to read.
- Don’t try to fill all of the white (empty) space on a page. White space is an important part of good design. It makes the important parts of your pages easier to read. Magazines and newspapers use this technique all of the time. Learn from them.
- Make sure that text is large enough to be read easily.
- Keep menus and sidebars in the same place thoughout the site.
- Keep sentences short and simple.
- Try to avoid abbreviations unless you explain them first.
Testing Your Pages
Once you have created your page, how do you check that it is accessible? Well, there is a simple test that you can carry out yourself that should highlight any areas that still need work.
Imagine reading the page out to someone over the phone.
- Do you need to stop to describe images?
- Do you have to supplement heading or links with extra descriptions?
- Were the pages hard to read aloud?
- Do you get lost/distracted easily?
If the answer to all of the above is “No”, then congratulations! You are well on your way to creating an site that is accessible to everyone.
Going Further
If you would like to learn more about web accessibility in WordPress, you will find a more detailed discussion of the issues — plus links to further resources — in the Codex accessibility page.

Joe Dolson 4:02 pm on September 27, 2012 Permalink |
This looks good. I think that the paragraph on headings could use some tweaking – it gives the impression that headings must always be used in sequence (h1,h2,h3,h4,etc.), rather than in outline format. Certainly the most important thing is that they use headings at all; but I think it’s good to present things in a manner which doesn’t imply a constraint on usage which isn’t actually there.
esmi 6:15 pm on September 27, 2012 Permalink |
Any suggestions on how to differentiate between using in sequence and using in outline? I was hoping the line about doing a school essay would get the message across. The message I really want to get across is that you shouldn’t chose which heading tag to use based on its displayed text size but hierarchically & semantically – without actually using those terms if I could possibly avoid it.
Joe Dolson 6:32 pm on September 27, 2012 Permalink |
I know what you mean. The problem with the doing a school essay analogy is that it depends on how you learned to do a school essay – I learned the 5 paragraph narrative style, for example, which had no headings or subheadings, and therefore is useless in this context. It may be effective to say ‘you should use them as if creating an outline of an essay” perhaps.
esmi 1:05 pm on September 28, 2012 Permalink |
Nice phrasing! I’ve amended the article according. Would it help if I gave concrete examples? I could screenshot the Document Outline of a good & bad sample page from the Web Dev Toolbar.
Ben 9:26 pm on October 1, 2012 Permalink |
But of course, if you need a screenshot to get the message about heading structure across, you’ll still need a good text alternative that does the same job
esmi 10:55 pm on October 1, 2012 Permalink |
Oh – :p
Joe Dolson 10:48 pm on September 29, 2012 Permalink |
Yes, I absolutely think that a concrete example is a good idea. Go for it!
G F Mueden 12:39 pm on October 1, 2012 Permalink |
I think this is good for those using screen readers, but it falls far short in helping those who still use their eyes but not well.
(1) Poor acuity calls for enlargement which drives the copy off the screen unless you use word wrap. Test at 200% and see what happens.
(2) Poor contrast sensitivity calls for choice of font so they can select a bold one. This is usually in Internet Options in the browser.
#3 Poor visual field calls for inimizing the window, pulling in the margins, and having word wrap keep the copy in the narrow column.
esmi 1:02 pm on October 1, 2012 Permalink |
Please bear in mind that this is an introduction to Accessibility in WordPress and primarily deals with the changes a site author can make within a given theme. Color contrasts, for example, are dealt with in the Codex accessibility page.
Point 2 references changes in the user’s browsers, so is well beyond the scope of this document.
I’d also challenge Points 1 & 3 based on feedback from working with pan-disability users. Providing the display generates a horizontal scrollbar when zoom or minimisation is applied, the affected user groups do NOT consider this to be a significant barrier. I’m not saying this is a Good Thing ™ but that it’s not a major issue. There are more problematic areas that should be dealt with first.
joe 9:15 pm on October 1, 2012 Permalink |
Great introduction to accessibility, explained in a very clear way, so as to not overwhelm. Good start. But I think you should still link to further resources, like WCAG 2.0, Understating Guidelines, so people can find more if they want to, for the particular sections. I know you have included that through the Codex link, but that is a few steps away.
esmi 10:53 pm on October 1, 2012 Permalink |
That’s covered in the Codex Accessibility page.