When building a WordPress website, you probably already have a laundry list of things that need to be done.
Layout optimization, social icons, Google Analytics, SEO settings — to name just a few. Not to mention, content creation when the site has gone online.
Probably the last thing you want is to add more to the list. However, here is an important one, web accessibility.
What’s that you ask?
Making your site accessible means setting it up in a way that anyone can use it, regardless of limitations like visual, aural, or other cognitive impairment, learning disabilities, limited movement, speech disabilities, photosensitivity and other things that makes them surf the web in a different way.
Why should you care?
Because (a) you are not a careless jerk and you care about others, I assume, and (b) because your audience is the life blood of your website, so why would you ignore a large part of it? After all, isn’t the goal of websites to appeal to as many people as possible?
In order to achieve this, we will look at what web accessibility exactly is and how to implement it on our WordPress website.
What Are Web Accessibility Guidelines?
The principles of what makes websites accessible for all types of visitors is formulated in the Web Content Accessibility Guidelines (WCAG). Your website needs to be:
- Perceivable – Meaning it presents info and content in a way users can perceive it.
- Operable – The interface components need to work under many different circumstances for many different users.
- Understandable – Users must be able to understand all content.
- Robust – That means the site is readable and understandable by many different user agents, including assistive technologies.
How does it work in practical terms? That’s what we are getting to now.
How to Make a Website Accessible
Let’s go over some key components of an accessible website first. After that we will look at some tools that allow us to implement them.
Provide Text Alternatives for All Non-Text Content
Supplementing your written content with visuals is a great way to make it more appealing. However, not every visitor is able to see images and graphics.
To improve their experience, it is vital to include title tags and ALT descriptions when you do post visual content. In WordPress it is incredibly easy to do so and excuses are therefore invalid.
If you are not sure how it works, have a look at the SEO In-Depth: Image Optimization article. As you can guess from the title, providing descriptions and ALT tags also has positive effects on SEO, so you kill two birds with one stone.
One more thing: Text in image form, such as banners, can also not be deciphered by screen readers and therefore should be avoided or come with an alternative.
Use Clean, Structured Content And HTML
Having a solid structure on the front end and back end of your site is important for both human readers the machines that may assist them.
Using HTML elements like semantic heading tags, bulleted lists, alt tags, meta descriptions, and more to organize your content not only makes your content look better but also tells assistive technology what and where everything is.
Providing a clear navigation, contextual linking and creating a sitemap is also helpful. The latter can be read by screen readers and used for navigation purposes.
However, it’s not just about the technical stuff in the background. You probably already know that you should write for your readers first and search engines second to make your content more accessible in general.
An added benefit of this practice in terms of web accessibility is that concise and easy-to-read writing is also easier to process for screen readers and represent in a computer voice.
Offer Keyboard Support and Input Assistance
Another important way to help all types of users get the most out of your website more accessible is to ensure that it can be used with a keyboard only instead of a mouse or trackpad.
That means being able to access your links via the tab button and getting rid of keyboard traps that can not be navigated away from without another device.
A measure that goes in the same direction is to provide spell check suggestions or autocorrect and other error prevention systems. Being able to reverse, double check or confirm submitted data — especially for legal or financial information — goes a long way.
Implement ARIA landmarks
In case you didn’t know, ARIA stands for Accessible Rich Internet Applications.
The term describes markers inside HTML documents that provide assistive technology with important information to easier navigate sites and pages.
For example, you can mark off page sections to enable users to skip the header and navigation of your site and jump straight to the main content.
Provide Good Contrast, Use Simple Styles
A design with good contrast makes your content easier to consume and ensure site elements are clearly discernible from one another.
You can either go with a high-contrast style from the get-go or offer an alternative for those who want or need it.
For that purpose, some websites have a button to toggle different designs like a simplified site version without or only limited CSS or the possibility to increase font size.
Plugins are very helpful in this regard, more on that below.
Avoid Seizure-Inducing Elements
For some users, flashing content and fast graphics can induce seizures, therefore, it’s a good idea to avoid this stuff to begin with.
If you absolutely need it, make sure the flashing is below a threshold of three times per second.
Then again, it’s not the 90s and we are not on Myspace, so you should steer clear of manically flashing GIFs anyway.
Offer Alternatives for Time-Sensitive Content
People follow content in different paces. Certain types of time-sensitive media and web content can therefore be not as accessible to everyone.
For that reason, it can be a good idea to provide an alternative for timed content like quizzes. Make media replayable as often as needed and offer text transcripts or closed captions for video.
Another good idea is to avoid auto-scrolling altogether or provide an alternative form of display.
Finally, a quick note on infinite scrolling, which is provided by some themes: this feature can throw off screen readers, so think twice about using it.
WordPress Tools for Web Accessibility
While the above info is enough to build an accessible website manually, there is no need to do so, thanks to a number of available tools that we will go over now.
First of all, a growing number of certified-accessible WordPress themes enable us to address this issue from the very beginning.
What it means is that the themes are built with W3C-validated code and contain accessibility features that abide by WCAG standards.
While they work well out of the box, accessibility-ready themes can also serve as a parent theme for your own customizations and represent a good basis for building an accessible website.
Twenty Sixteen is the latest WordPress default theme and you can find an extensive description and test right here on Torque.
The theme provides a clear, modern layout without a lot of frill. It is also responsive and built with clean HTML, making it a prime candidate for assistive devices.
Apart from that Twenty Sixteen is also a great parent theme. Definitely worth checking out.
This theme by Marten Rand-Hendriksen was built specifically with accessibility in mind.
Its responsiveness as well as large images and typography make it easy to read on any kind of device.
Plus, it comes with keyboard-accessible navigation so users can get around your site without a mouse or similar device.
A simple and responsive theme build with HTML5 and CSS3, WPstart puts a premium on customizability.
It offers custom backgrounds and headers, drop-down menus, post formats, multisite support and more.
The theme is also fast and certified accessibility ready.
Author is a free theme designed for reading. Clear contrasts, a fluid layout and focus on content are just a few of its accessibility-centered features.
Thanks to minified and concatenated scripts and style sheets Author also loads fast, is responsive and a joy to look at.
Another responsive theme that makes accessibility a priority.
Unlimited comes with a minimal, clean and high-contrast design, large featured images and a fluid layout.
It is also translation ready and uses Open Sans, Google’s multi-language free font.
To make it usable for the largest number of people, the theme contains skip links, screen reader text and keyboard navigation.
It also comes with four high-contrast color schemes that meet the Level AA requirements of the WCAG.
However, Utility Pro is a premium theme and therefore not free of charge.
In case you aren’t aware of it, Accessibility Ready is a valid tag inside the WordPress theme directory, making it easy to find themes like the above.
To get started with your search, all you need to do is follow this link.
While themes are a great tool for introducing more accessibility into your site, what if you are satisfied with your existing one and are dreading changing it?
In those cases we can use a number of plugins that allow us to make any WordPress website more accessible. Here are a few of them.
This plugin is maintained by the WordPress team for accessibility, yes, there is a dedicated team for this issue, and is therefore the plugin for all things that have to do with web accessibility.
It does several things. For one, the plugin fixes common issues inside the WordPress code to make the platform play nice with assistive devices.
Besides that, it also adds features like link skipping, long image descriptions, enforces ALT tags and adds a toolbar for toggling higher contrast, large print or grayscale views of your theme.
You can find the plugin’s documentation and further features in the Make WordPress section, where you may also get involved and contribute.
This plugin helps you create better accessibility for the Genesis framework and is best used in conjunction with WP Accessibility.
Because the latter plugin doesn’t completely gel with the Genesis framework, Genesis Accessible makes up for that.
Among others, it does the following:
- Removes the title attribute from links
- Adds skiplinks and CSS for skiplinks
- Adds keyboard accessibility to drop-down menus
- Removes Genesis widgets that aren’t very accessible
- Adds post titles to “read more” links
To make sure your content is easy to read for everyone, this plugin adds a sidebar widget that enables users to increase your site’s text size.
It appears to be actively developed and has been updated very recently. Plus, there are future plans to enable text color switching as well.
As the name suggests, this plugin can enable zoom for pre-defined areas of your site to make it them easier to read.
It currently has 40 different zoom styles available and you can view a demo of how it works here.
As mentioned earlier, some websites allow you to switch their design at the touch of a button. Now yours can be one of them.
The Stylesheet Switcher plugin adds a list of style sheets to the front end of your site so users can choose between different looks.
That way you can offer a reduced design or one with higher contrast. In fact, you are able to offer as many styles as you want which users can choose either via drop-down menu or icons.
A simple, cross-browser, accessible mp3-audio player, EsAudioPlayer can be used to add sound files to your site in order to welcome visitors via speech.
It also enables you to add audio commentary to images and other graphics as well as slide shows. Plus, the player’s controls are compatible with the use via text browsers.
This plugin is a text-to-speech solution for WordPress that uses Google to provide site translations for 50+ languages. It enables you to listen to any text on a website, including menus.
Furthermore, GSpeech can play pre-recorded greetings with customized messages for different user levels.
A free version is available, however, for advanced features you will be asked to purchase a Pro license starting at $39.
That’s right, SEO plugins also improve accessibility.
How? By reminding you to set proper ALT tags, headings and other elements that make your content easier to understand and more accessible for everyone.
Yoast SEO in particular gives you lots of input how to improve your content. Use it.
As mentioned earlier, sitemaps can be an important accessibility factor for screen readers.
In case you aren’t using a plugin like Yoast SEO, which can set a sitemap up for you, this plugin can also do the same.
In case you want to get a benchmark for the web accessibility of your or your client’s site, look no further than the Web Accessibility Evaluation Tool, aka Wave Tool.
After simply putting in a URL, the service checks numerous indicators of accessibility like header tags, alt tags, text size, contrast and more.
It also provides you with detailed feedback on how your site fares and possible areas of improvement with a live view of the page you put in.
Another solution in plugin form is Access Monitor, which can run continuous and automatic tests on your site. However, it is a premium service (though with a free trial available).
For additional tools, check the list in the Make WordPress Accessible section.
How Accessible is Your WordPress Site?
To be honest, accessibility is still pretty much a niche thing on the web. For example, I first really looked into the topic while putting together this article.
However, I think we can all agree that it shouldn’t be.
Not only because as website creators, we should all do our best to include everyone as much as we can, making our websites accessible to more people is also in our own best interest.
After all, implementing accessibility factors is just another step toward reaching more people with our content.
Plus, it’s a good investment into the future since some countries have begun passing legislation that require business websites to adhere to these standards.
As you can see, there are plenty of good reasons to care about making your WordPress site more accessible besides the fact that it’s also pretty easy. Many things are just good web design.
If you are still intimidated, it’s important to realize that accessibility is a process and not an all-or-nothing- deal. You can start with small steps in the right direction.
Here’s to a more accessible web in 2016!
How are you making your site more accessible? Share your thoughts (and resources) on the subject in the comments below!