Make Your WordPress Site Accessible With These Themes and Plugins
I think we can all agree that technology has made our lives a lot easier, but what about people who are visually or hearing impaired and those who are color blind?
We spend a lot of time improving our websites, optimizing them for speed and creating quality content, but not enough attention is placed on site accessibility. Have you ever wondered how easy it is for people with disabilities to access your site and then navigate around it?
The importance of creating accessible websites is gaining much-needed traction in the WordPress community thanks to the WordPress Accessibility team. The team has been working with the Theme Review team on the possibility of requiring the accessibility-ready tag for themes hosted on WordPress.org. The Accessibility team hope to announced new guidelines for theme developers in April 2015, which would then be required as of November 2015.
So what does it take to create an accessible website? In this post I’ll go over some of the requirements in the WordPress Codex for meeting accessibility guidelines, as well as themes and plugins for improving your site’s accessibility.
Is Your Site Accessible?
To ensure your website is accessible, there are a number of required and/or recommended criteria you need to meet. All themes and theme updates that use the tag “accessibility-ready” undergo an accessibility audit against a number of guidelines, which you’ll find in the Theme Review Handbook. There are also more details about accessibility in the WordPress Codex.
For now, let’s go over the most important points you need to know now in order to score your site for its accessibility:
- Headings should be used to define a page’s sub-sections and not simply for visual appeal
- you should only have one h1 tag per page
- Links should be descriptive and should make sense out of context (use “Continue Reading [Title of Post]” instead of “Read More”)
- Buttons and (drop down) menus should be selectable and highlight-able with a keyboard well as a mouse
- Your page’s text color must be in high contrast when compared to the background color of the content area
- Text should not refer to interactive elements such as links or buttons by color only
- Your website should include skip links at the very top of each page to allow users direct navigation to content with only a keyboard
- The title attribute for links should only be used if the corresponding text would not be redundant when they are viewed side by side
- Forms must be sufficiently labelled outside the form field and all confirmations and warnings should be easily recognizable
- Images and icons should supplement text and content and should not stand alone without alt tags and very descriptive captions or titles
- Media such as video, audio, sliders or carousels should not start or change action without user interaction by default
- New browser windows or tabs should not be opened automatically, without user interaction
Plugins for Accessibility
There are a couple websites which can help you test for some of these issues such as the Color Contrast Comparison and Tanaguru Contrast Finder sites. These are great, but there are many plugins to help you test your site and also help you achieve accessibility.
Let’s take a look at the most reliable ones.
If you’re forgetful when it comes to adding alt text or captions, this simple plugin could be helpful to you. It shows a bright red border around any image that doesn’t have descriptive text attached to it in a post’s preview. It’s super easy to install and you won’t have to worry about forgetting descriptive image texts ever again.
This is one of the most important tools you need to make your site fully accessible. Accessible Drop Down Menus allows your dynamic drop down menus to be accessible by keyboard and not just via a mouse hover. This is important for those who are visually impaired or for those who don’t use a mouse.
If you’re not convinced this is necessary, try closing your eyes and using your mouse to navigate to the plugins page of WPMU DEV. Difficult, right? That’s why you need this plugin or at least one that’s similar to it.
Skip To creates its own menu that is fully accessible with a keyboard. The menu pops up as soon as someone tabs into the page. The menu drops down when the enter key is pushed then populates with the major sections of the page as marked by headings.
This menu would be the alternative to creating your own skip links making it even easier to get one step closer to a fully accessible site. If you ask me, it’s a done deal. I’m downloading this sucker right away.
Vividly adds the functionality of being able to toggle between stylesheets to one that is in high contrast. In the accessibility-friendly stylesheet, text will be very dark in comparison to the content background to pump up its visibility.
The extra cool thing about this plugin is that it stores a cookie in the visitor’s browser when the high contrast stylesheet is selected. They won’t have to continue making this selection for every page they travel to and will even stay intact when they come back another time.
Vividly installs like a regular plugin, but with slightly more work involved at the end. You need to create a high contrasting stylesheet and upload it to the root of your theme. Finally, you just need to add the toggle button to the top of your theme.
It’s not too complicated and once you’ve done it once, you’re done for good.
Zoom allows your site’s visitors to resize text and other content to suit needs. Anyone viewing a page on your site will be able to toggle the text size, for example, to allow your content to be easily readable and more accessible.
Installation is as easy as any other average plugin out there and a menu will be created after activation in the admin area where you can adjust the settings. A widget can then be placed into a post or page by a shortcode wherever you would like it to appear.
If you’d like more control over the look of the zoom button as well as the individual content sections that are resized, you’ll need the commercial version of this plugin for $19.99. Even without upgrading, this plugin works very well so you don’t need to worry if you’re on a budget.
This is a lightweight plugin that allows you easily toggle between languages in the post or page visual editor. You can easily translate text and links to the five included languages: English, German, Spanish, French and Italian.
This plugin will help you easily reach more people around the globe while also being super easy to install. Once you’ve installed it just like any other plugin, you’re done!
Although I can’t vouch for its accuracy with extreme certainty, it should still be able to help. Even if your sentences end up having a few fragments, it will likely still get the point across well enough for most uses.
This is a fantastic plugin because it adds many accessibility options in a single package. You can disable as many or as few options as you like if your current theme already has the same options included.
You can add skip links, a toolbar to toggle between high contrast, large print and grayscale views of your site, add long descriptions to images, add post titles to the standard “read more” links, and a lot more. While this won’t replace a solid theme that’s built for accessibility, it will certainly help a great deal making this a very valuable plugin.
If the first plugin doesn’t fit well with your workflow or you’re otherwise not a big fan, you can try this one. Alt Checker is a plugin that also checks to make sure you have added alt text to your uploaded images. It’s super easy to install as well. The only major difference between this plugin and the Inaccessibility Checker is that the latter also checks for captions.
This plugin is pretty neat because it produces very unique results when compared to the other plugins on this list. Instead of adding buttons or menus to your site, it will allow users to have instant access to a fully accessible version of your site. By pressing the shift key and “A” at the same time, a user will be redirected to a fully accessible version of the same page.
It’s as easy to install as most other plugins, but you will have quite a bit of added work since you’ll have to make a separate version of your site that’s fully accessible. This doesn’t have to be a difficult task, especially if you have a multisite and our Cloner plugin installed and activated.
You’ll have only four easy steps if you have these. All you’ll have to do is …
- Copy your site with the Cloner plugin
- Adjust the settings of the Universal Accessibility Key plugin to add the main URL of your accessible site
- Add text to the top of your original homepage to mention the instructions for visiting the accessible site
- Then switch the theme of your copied site to one of the accessibility-ready WordPress themes listed below
The only downside to this plugin is it’s in French, so allow me to translate the two sentences in the options for you, which you can access by going to Settings > UAK after this plugin is activated. Here we go:
The user will be redirected to the URL below, where they’ll use the keyboard shortcut Shift + A
URL of the page or accessible site:
Done and done in under five minutes flat and your site will be fully accessible at that. This plugin makes it as easy as possible to help you get a fully accessible site and for that reason, this is the most valuable and best plugin on this list.
Creating an accessible site from scratch can be difficult, but it doesn’t have to be with these fantastic themes.
All of the themes in this list have passed the Theme Review Team’s accessibility audit with flying colors. This means they have at least the minimum requirements to be considered accessible by the visually impaired. If you are a theme developer, WordPress does encourage you to go above and beyond the minimum standards.
Don’t worry, though – even if one of these themes doesn’t surpass the standard, you can pair it with one or more of the plugins above to help you achieve a greater level of accessibility.
14-Glassy is a child theme of Twenty Fourteen, if you can imagine that. The only major difference is that 14-Glassy has been tweaked slightly to have an enhanced readability on mobile devices making it a bit more accessible. If you’re a fan of WordPress’ official Twenty Fourteen theme, then this is the best theme for you.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
Stock is a practical theme. It’s a minimalist theme that has all the necessary components of a well-laid out website. It’s a great theme that’s simple enough in design to be well accepted by those with a visual impairment, while still having a handsome design for everyone else’s viewing pleasure. It also includes post formats and basic styling options.
Bosco is a minimalist theme, but its splash of color makes for a bold and chic design. It’s an excellent theme for photo bloggers or vloggers. If you’re not a fan of the pop of red, you can definitely change that color in the theme options as well as make other basic customizations. With Bosco, you’ll also enjoy the different post formats that are included.
While White Xmas is a beautiful theme for the holidays, you can easily hide all of its winter wonderland designs and replace them with other images and styles for the rest of the year. It has gorgeous calligraphic typography which completes the design and as a whole, this theme seems to tug at the cockles of your heart. It has all the basic styling options you need along with sticky posts and threaded comments.
Simone looks as though it has a narrow content area, but it’s actually very roomy. It has large, clean fonts for an easy reading experience and its menus are fully accessible by keyboard. If you don’t like the sidebar, you can opt for a full-width page template instead. You can change the color scheme, background and all that good stuff. It also has all the major post formats, sticky posts and threaded comments.
Kuorinka is a simple, elegant, yet commanding theme. It’s perfect for business or freelancers who only want to worry about creating one theme that’s fruitful for all users. For such a beautiful theme, it also carries many options for customization from the color schemes to the layout structure. It also includes many post formats, sticky posts and threaded comments.
WPstart is a clean, minimalist with an added touch of flair, added by its customizable header image. Its simple design makes it perfect for screen readers that are used by those who are visually impaired. WPstart also features styling theme options, post formats, sticky posts and threaded comments.
Tikva has a dark background and light-colored text if you’re into that sort of thing. Other than that, it has the same basic layout that most other themes have making it a comparable selection to other minimal themes. You can customize the color scheme and background if it isn’t your sort of thing after all. It also has other flexible theme options, sticky posts and threaded comments.
Drop is a truly exquisite theme modelling after WordPress’ new Twenty Fifteen theme. It looks very polished with its left sidebar content being delicately centered and including a circular featured image. Its content area is large and in charge with bold, clean typography and an apt featured image size. You’ll have no troubles refining the styles of Drop with great theme options and included sticky post and threaded comments features.
Accessible Zen is – you guessed it – accessible, but also very clean with incredibly readable fonts. Simplicity is the name of the game here as your users will have little to no issues easily navigating and reading your content. You can change the colors and has other select theme options. Your content is sure to be the star with post formats, threaded comments and the ability to have sticky posts.
This is a neat and tidy theme that is fully customizable from head to toe – or rather, header to footer. If you want to make even more customizations, it’s the perfect framework to build upon by creating a child theme. It’s also ready for BuddyPress and BBpress, too! It also has concise fonts that are as easy to read as they are functional.
If you’re in need of a theme that has a large call to action (CTA) area, then Cherish has you covered. It also features some pretty fanciful fonts that screen readers won’t have trouble detecting, but are also eye-catching for those with 20 / 20 vision. It’s a minimalist theme that focuses on content with a clean, full-width layout. Sticky posts and threaded comments are also included.
Neighborly is simple, but mighty. You can keep this theme’s style straightforward or you can embellish it with images and color schemes. It’s a clean theme that’s great for posting content with the intention of readability and ease of use. It comes with a simple set of theme options, common post formats, sticky posts and threaded comments.
Last but not least we have the Universal theme that has a rather unique feature to it which makes it shine among other themes. It has extensive in-line documentation on its accessibility features. This can act as a resource in and of itself to help you further understand how to make your site accessible. It has a good number of theme options to help you tweak the style to your liking along with the sticky post feature.
Ensuring your WordPress site is accessible may seem like a lot of work, but the benefits are worth it. Not only will you make your content more available to those with disabilities, but you will be opening up your site to a larger audience.
The plugins and themes in this list provide a great start to get you thinking about how to improve your site’s accessibility.
The Theme Review Team’s accessibility guidelines provide a neat overview of the requirements websites should meet. If your site doesn’t already meet these guidelines, it’s worth thinking about how to put them in place – the accessibility movement in WordPress is gaining traction and you don’t want to be left behind or discriminate against potential readers of customers.
What did you think of these plugins and themes? Do you have any favourites that I’ve missed? Post them in the comments below.