I’ve written before about the importance of web accessibility. Making your website as accessible as possible will allow your website’s message to reach more people. This is especially important if you are selling something!
This article will focus on WordPress accessibility.
Accessible WordPress themes
Ideally, all WordPress site owners would be using an accessible theme. Web developer Morten Rand-Hendriksen certainly thinks so – you can read his thoughts on accessible themes. There are now a number of themes in the WordPress theme repository which are tagged as accessibility-ready, meaning that they have been reviewed by WordPress accessibility experts and have met certain accessibility standards. I intend to review some of these themes in a future post.
However, not everyone will want to or be able to use an accessible theme. So today I will focus on plugins to improve your WordPress site’s accessibility. These plugins will work with any theme.
Searching for WordPress accessibility plugins
I looked for plugins tagged accessible or accessibility. I discounted plugins which hadn’t been updated for 2 years or more, or had mainly bad reviews. I also discounted ones which required specific themes, such as the Genesis Framework.
Overall I tested 12 plugins, which were of varying quality. I tested them using the Responsive theme. These are the four I think are the best.
1. WP Accessibility
WP Accessibility is the best WordPress accessibility plugin in my opinion, and it offers the most features. It’s developed by Joe Dolson, one of the Make WordPress Accessible team. It fixes a number of accessibility issues.
Here are some of the useful things this plugin does:
Removes title attributes from tag clouds and archive links / Remove title attribute from images inserted into post content and featured images
The title attribute of links is redundant in most cases, as the link text will tell you what the link is for. As screen readers may read both, it’s unnecessary words, and the plugin will remove them.
Adds skiplinks to the site
Skiplinks allow visually impaired users using screen readers or people using the keyboard to navigate the page to skip past sections of the page to the part they want. Often it’s to skip past the navigation to the page content.
You need to set the ID of the container to skip to – this requires inspecting the code. In the Responsive theme I set the Skip to Content link to the wrapper div. For the navigation I chose widgets. (Techy note: it should really be the main-nav, but in Responsive theme this has a class, not an ID).
Skiplinks can be set to always visible if you wish. This is what they will look like, on the top of the page:
Otherwise, they will be invisible except by tabbing.
Remove target attribute from links
This setting prevents links opening in new windows, which can disorientate some users.
Force search error on empty search submission
Checking this option does will return a blank result set for an empty search, which is more user friendly than the default (returning every post and page).
Underlining makes links stand out more in some themes. This underlines every link on the site. The only downside is that you might not want all links underlined, e.g. navigation links.
This makes links read out of context more understandable e.g. to visually impaired users. See this in action on my blog page.
Add outline to elements on keyboard focus
This puts a black outline round your links when you use the tab key to navigate the page. You can also see this on my site – try pressing the tab key through the page.
Add Accessibility toolbar with fontsize adjustment and contrast toggle
This adds a toolbar to the left of your screen showing buttons to adjust the text size and switch to a high contrast mode. These will help anyone with visual issues.
You can also enable a shortcode to use in a widget which creates links which do the same.
High contrast mode looks like this in the Responsive theme:
And this is larger text size – note that it doesn’t change the size of the navigation or headings:
There’s also the option to add a grayscale colour mode to the toolbar if you like.
2. WP YouTube Lyte
If you embed YouTube videos on your site, WP YouTube Lyte makes them more accessible.
Videos are inserted into the page by taking the URL and adding a letter v after the http. Or they can be added with a shortcode. Examples are given on the plugin page.
The video will be loaded normally, but for keyboard users, the controls will be highlighted on keyboard focus. In this example, the pause button has a blue border round it:
This plugin also provides a video widget, loads videos faster and offers SEO benefits – what’s not to love?
3. Gravity Forms – WCAG 2.0 form fields
The Gravity Forms – WCAG 2.0 form fields plugin requires the use of Gravity Forms, the popular premium plugin for creating WordPress forms. The full list of accessibility features for the Gravity Forms – WCAG 2.0 form fields plugin is listed on the download page.
If you don’t use Gravity Forms, a free alternative plugin is Contact Form 7. In this case you can you can make the forms generated by the plugin more accessible by following Rian Rietveld’s advice – How to set up an accessible form using Contact Form 7 in WordPress – but you will have to add the necessary code yourself. (Update: Joe Dolson has just released the Contact Form 7: Accessible Defaults plugin which creates an accessible default form for you.)
One feature I like is the improved handling of form validation. If you submit a form incorrectly, it adds a box above the form which shows the validation errors above the form as links, and each link will take you to the form field with the error you need to correct:
4. WP Accessible Twitter Feed
Once you’ve installed the plugin, you need to log into Twitter, go to Twitter Apps and create an application to access the Twitter API (in other words, allow your Twitter account to communicate with the WordPress plugin). Once you have the necessary keys, enter them in Settings > Twitter Feed Auth. Then create your Twitter widget in Appearance > Widgets and add it to a widget area.
The plugin will show your tweets with times, but won’t show reply/retweet/favourite buttons, and hashtags don’t have links.
The widget options are shown here:
Here is a screenshot of the Twitter widget in the sidebar. This is with the standard Responsive styling:
Have you found any other good WordPress accessibility plugins? Please let me know by commenting below or contacting me.