- 1 WordPress and Accessibility
- 2 Use Headings Correctly
- 3 Describe Images
- 4 Describe Links
- 5 Create a Readable Page
- 6 Use Color Wisely
- 7 Validate!
- 8 Make WordPress Accessible
- 9 Resources
Accessibility in web design means creating web pages that everyone can use. Those who cannot see or use a mouse. Deaf users whose first language is sign language and not your native spoken language. People who use special assistive software or hardware to access the Web. These people need access to web pages, and as a web site owner, you need to know about accessibility.
WordPress and Accessibility
WordPress - with a high quality theme - works right out of the box to help you keep your site accessible. A great deal of the work is done for you but you still have to take the time and patience to maintain those accessibility standards when creating your content.
Use Headings Correctly
Headings are more than just big, bold, text. They help to break your pages down into logical sub-sections which, in turn, makes your pages easier to read and understand. However, they will only work effectively if you use them properly.
Heading structure also plays an important part of search engine optimization. Search engine spiders check for heading tags as they index your pages, so your heading structure (and the content beneath each heading) may affect your search engine ranking.
Read just the headings of your pages out loud. Do they describe the content that they precede? Do they break the page down logically? If you were back in school, what would your English teacher think of the page? ;-)
In the simplest of examples, web users who have a visual impairment may use software that "speaks" page content to them. In this situation, they rely upon your help to "hear" your content - including any informative images. Therefore, when you include a graphic or photograph, it may be appropriate to provide an alternative description in the alt part of the <img> tag. This description will be used in place of the image.
...and the most wonderful thing appeared: <img scr="ball.jpg" alt="a beautiful red and blue ball" />.
Those who rely on screen reading software might hear, "and the most wonderful thing appeared: image - a beautiful red and blue ball."
In some cases the image is purely decorative. In these cases an alternative description is not necessary. You should always include the alt attribute, but in these cases, you can simply leave it empty.
...and the ball bounced higher and higher as <img scr="ball.jpg" alt="" /> the child bounced it....
Those who rely on screen readers might hear, "and the ball bounced higher and higher as the child bounced it."
Some people use the alt attribute to add keywords to their pages in the belief that this will improve their search engine ranking. That is not the primary purpose of the attribute and, in reality, it offers little or no real SEO benefits. But using the alt (or the title) attribute in this way will create significant problems for users who actually rely upon them.
To test whether your images are informative or purely decorative, imagine reading the page out to someone over the phone. Did you stop to describe an image? If "yes", then this image needs an alternative description. If "no", then the image can be used with a null (alt="") attribute.
Link text should describe the resource that it links to - even when the text is read out of context. Some assistive software scans a page for links and presents them to the user as a simple list. In these situations, all the links will be read out of context. So it is important the text used in a link is descriptive.
To read more client success stories, <a href="http://example.com/client-stories/">click here</a>
The phrase "click here" will not make any sense when read out of context.
Read <a href="http://example.com/client-stories/">more client success stories</a>
The phrase "more client success stories" is understandable - even when read by itself.
This is one accessible design technique that will improve your SEO. Google pays close attention to the text that you use for links.
To test whether you have good link texts, imagine reading just the text from all links in your page content to someone over a phone. Do they still make sense?
Create 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, lots of images, a jumble of font styles, and too much information makes a page very difficult to read.
While developing your WordPress site, take extra time to pay attention to the white space or "empty" space around the different elements on the page. Make sure the fonts are large enough to be readable. Position navigation elements in logical places.
Also bear in mind that some your visitors may have dyslexia or may not use the same first language as you do. Keep sentences short and simple. Try to avoid abbreviations unless you explain them first.
Is your page still readable when you increase the text size using the browser's zoom functionality? Do any of the non-text elements on the page create a distraction? If there are any animations or other movement on the page, consider removing these elements.
See the Testing Readability Resources for a list of online testing tools.
Use Color Wisely
Color choices also affect people's ability to "see" a page. Approximately 10% of all internet users have problems seeing colors, especially those suffering from color blindness. Visitors with a visual impairment may prefer higher contrast pages whilst those with reading difficulties may need a lower contrast. Try to strike a reasonable balance and avoid extremes.
You don't have to design your site around these issues, but being better informed makes for a more accessible site.
Testing Color Choices
If you find that your eyes are becoming tired when reading your own pages, consider lowering the text:background contrast. If you have to squint or strain to read text, increase the text:background contrast slightly.
See the Testing Color Resources section for some free color testing tools.
It's nice when you design your website to work in Firefox, but when viewed with Internet Explorer or Safari, things may look different. Page content may be scrambled, hidden or even lost. Not all browsers display all pages exactly the same way. But they can display most valid pages effectively and pleasingly. Don't aim for pixel perfection. Instead aim for "looking good" in each of your test browsers.
Check your website's code through validation tests. Validation represents the best way of ensuring that your pages are displayed to their best advantage across a whole range of web software.
Make WordPress Accessible
Make WordPress Accessible is the official blog for the WordPress accessibility group - dedicated to improving accessibility in core WordPress and related projects. Our aim to provide accessibility suggestions, feedback and assistance to WordPress core, theme and plugin developers.
Anyone can join in the discussions. Just log into the blog using your WordPress.org username and password. You can also follow discussions via email or subscribe to feeds for both posts and comments.
We look forward to seeing you soon.
- W3C Web Accessibility Initiative 'How To Meet WCAG2.0' Quick Reference
- Make WordPress Accessible
- Accessites.org (general articles on accessibility)
- Accessibility Forum
- Evaluation, Repair, and Transformation Tools for Web Content Accessibility