Accessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/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.
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.
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.
The heading structure of an example page
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).
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.
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.
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.
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.
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.
