I recently built a website where good accessibility was a priority. It’s true that this should be a priority for all websites however we still have a long way to go and more work needs to be done for WordPress and the Genesis Framework.
The Accessibility Problems.
After running my site through the Wave Accessibility Evaluation Tool I found the following issues:
- Skipped heading level – Genesis uses the H4 tag for Widget Titles which means that the heading level H2 and H3 are missing. Why is this important? When encountering a lengthy web page, sighted users often scroll the page quickly and look for big, bold text (headings) to get an idea of the structure and content of the page. Screen reader and other assistive technology users also have the ability to navigate web pages by heading structure, assuming true headings are used.
- No skip links present. Why is this important? Each website page usually contains the same header and navigation information on each page and screen readers will cycle through this same content. Skip links allow the user to skip this information and go straight to the main content.
- Missing form labels on my search bar and contact form. Why is this important? Screen readers use form labels to inform the user what information they need to enter into that field.
- No post title associated with ‘Read More’ links. Why is this important? Screen readers will tell the user exactly what they can read more of.
- Font size and Contrast. I wanted to have Accessibility controls on the website that allowed the user to increase the font size and change the contrast if required.
How I addressed these issues.
This plugin has several options to help improve the accessibility of your site. I used it to add my Accessibility Toolbar, that allows users to increase the text size and change the contrast, and to remove all title attributes. I changed the styling of the Accessibility Toolbar because I wanted to display it in the header and I wanted to use Font Awesome Icons and I will be posting a tutorial on how to do this soon.
I used this plugin to add skip links, change H4 widget title tags to H2 tags and add the post title to the ‘Read More’ links. This plugin also adds a form label to the search bar.
I always use the Alt attribute for images which looks like this:
<img src=”cute-kitten.jpg” alt=”Cute Tabby Kitten” />
The Alt title is important for 2 reasons. Firstly, for visually impaired users who will not be able to see the images; their screen reader will use the Alt Title to describe the image to them.
Secondly, for search engines, who also cannot see images and will use this attribute.
After implementing these changes I headed back over to Wave Accessibility Evaluation Tool and re-tested my site. The result? Much better – no errors where reported and the only alert was for Redundant Links where I had the link ‘Read More’ followed by a link to the Post Title which means I have 2 links going to the same place, but I figured that this was better than not including the Post Title with the Read More link.
You can view my site here: http://www.thepds.net
How you can test your site.
As well as using the Wave Accessibility Evaluation Tool you can also use ChromeVox which is a screen reader extension for Chrome. Shut your eyes and listen to the screen reader to see if your website makes sense.
Use the keyboard tab key to navigate through your site and check that all areas are accessible. You can also check that there aren’t any ‘Keyboard Traps’ which is where you can access a feature, such as a form or media player, by keyboard but cannot leave it by keyboard.