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
Created by Rian Rietveld, the WP Accessible Twitter Feed makes an accessible Twitter feed widget to your site, compliant with WCAG 2.0.
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.
Thanks for this article – very helpful.
I have successfully been using Mike Challis’ Fast Secure Contact Form https://wordpress.org/plugins/si-contact-form/ for years which uses 508/WCAG2 valid code. It has lots of options – one of which, the CAPTCHA is set on as default – boo! But that can all be removed with the click of a switch.
Also, word of warning…despite the “accessibility-ready” – buyer beware. I purchased a theme that was the “pro” version of the accessibility-ready version only to learn it wasn’t. The developer, instead of rising to the occasion and making them all accessible, chose not to.
You will also want to warn people to beware plugins as the majority are NOT accessible.
Thanks for mentioning Fast Secure Contact Form, John. I have heard of it but I haven’t used it, and I was unaware of its accessibility options.
It’s a bit worrying that a pro accessibility-ready theme is not accessible. That rather devalues the label. Perhaps paid versions should not be permitted to use that term unless they too have been peer reviewed.
As far as I know there are no standards yet for plugin accessibility, but I think it’s something that the Make WordPress Accessible team want to address.
was not aware of youtube plugin & contact form7…will check them out. thanks for this post.
It’s very important to improve wordpress accessibility . This is why one has to go under some of rules with his or her site . These plugins shared here will be more and more effective to improve wordpress accessibility hopefully .
We are working on a tool that helps website owners assess the accessibility and Section 508 compliance of their website. It’s called 508Q and we would really appreciate any feedback on the usefulness of the tool and how it could be improved.
That sounds interesting, Blake. How would I test a site with your tool?
🙂 the website is https://www.508Q.com and you just stick in a domain name and it will give you a score. I am interested in knowing if the report is useful, accurate, misleading, etc., and any suggestions for improvement. Thanks in advance.
I just tried it. It identified 1 error I knew was there. Another error I was sure was not there, but need to check further (skip links are supposed to there, maybe I did them wrong.). And another series of errors I was deliberately doing – the errors relate to my navigation bar. They are all similar to this:
Organizational Membership
So it is to some degree helpful. But I am confused as I have a program that deliberately strips link titles to make the site accessible.
My understanding it’s not recommended to use title attributes because of they aren’t 100% supported by screen readers and browsers. Thoughts?
Thanks for commenting, Patty.
WordPress used to add title attributes to links, but this was removed in WordPress 4.2.
Now, instead of showing a title, editing a link shows the Link text.
You can see what the old interface used to look like in this post, which explains why titles aren’t good for accessibility: I thought title text improved accessibility. I was wrong
Thanks for this article – very helpful