ServicesTechnologyWork

Website accessibility for WordPress

By 20th November 2018 No Comments
WordPress Accessibility WCAG Website

If you’re reading this article, then no doubt you are interested in how to make WordPress websites more accessible for disabled people. Whether you know about the Web Content Accessibility Guidelines (WCAG) already or not, I’ll provide you with a high level overview of what they’re all about and then how you can start to improve your WordPress website so it’s accessible to EVERYONE. I like to think of the WCAG as the wheelchair ramp to the web!

Disabilities can generally be categorised into four broad categories:

  • Visual
  • Audio
  • Motor
  • Cognitive 

The benefit of making your website accessible to people with disabilities is not only the right thing to do on a human level, but also increases your potential market size; allowing you to sell your product or service to more people. As well as that, adhering to WCAG also improves your overall user-experience and search engine optimisation.

For example, adding captions to a video on your website is primarily useful for a deaf visitor, as well as allows people in a loud cafe or silent lecture theatre to watch the video too. Adding alternative text to images not only allows visually disabled people to know what’s in them, it also tells the Google algorithm too, which in turn boosts your website’s position in search results. There are tonnes of improvements you can make which have more than just the associated accessibility benefits.

This leads me into an overview of the principles from the Web Content Accessibility Guidelines.

Perceivable

Information and user interface components of your website must be presentable to users in ways they can perceive.

Example: adding alternative text to images, so screen readers are able to describe what is in the image for a blind visitor.

Operable

User interface components and navigation of your website must be operable.

Example: allowing visitors with motor disabilities to operate your website using a keyboard or mouth stick instead of just a mouse.

Understandable

Information and the operation of user interface of your website must be understandable.

Example: using clear language which can be understood by visitors with cognitive disabilities.

Robust

Content on your website must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

Example: cleaning up your HTML so that assistive technologies such as screen readers are easily able to read the content.

How to start with WordPress website accessibility

Let me start by saying nobody is perfect. As I sit here writing, I am the first to put my hand up and say I could have done a lot more and a lot sooner to make my personal websites more accessible and this is something I am going to change from this point onwards. The mere fact that you’ve read up to this point means that you’ve already taken the first step on the road to accessibility, which I believe is: awareness.

You’re not going to make your website fully AAA accessible (a WCAG standard – you’ve got A which is basic, AA which is good, and AAA which is the dog’s bol…) overnight, however, step by step you’ll quickly find there are adjustments you can make until your website is fully up to scratch. And I’m starting that journey with you now too, so we’re in it together.

Quick WordPress accessibility wins

WP Accessibility Helper

This plugin adds a user-friendly toolbar to your site that lets visitors select different colour contrasts and adjust the font size to their liking – perfect for people with visual disabilities. It doesn’t stop there though, it goes above and beyond with user options for underlining or highlighting links, grayscale images, changing fonts and keyboard navigation etc. The plugin also boasts a DOM scanner that will check your site for various accessibility errors, as well as various other features.

Contact Form 7: Accessible Defaults

This plugin will provide an accessible starting point for those of you using Contact Form 7, most of my websites included. It’s an important tool for those using Contact Form 7 because it isn’t very accessible by default. The plugin adds a selection of accessible form types to use as the basis for your new forms but doesn’t affect pre-existing ones. For existing forms, you’ll have to recreate them using the new templates, but it’s a great starting point if you’re not using a more sophisticated form plugin like Gravity Forms.

Image ALT tags

This tag describes what’s in the image or the function of the image on a page. For example a logo for my website could say: Logo for Lewis Edward – A London based web design and digital marketing consultant. Not only does this describe the image, it also provides a bit of extra information for the visitor as well as search engines. It was originally designed to increase accessibility, as screen readers are unable to interpret a picture without ALT text. If you’re in the habit of using ALT text as just a way to add keywords into your site, you’ll want to amend your process, as it can ruin the experience for people using screen readers and Google has already cottoned on to the keyword crammers.

Content Headers

Many (what I really mean is most) visitors will simply skim through your website content, rather than read it word for word. Content headers will break large text blocks into more readable sections, let users skip to the parts they are most interested in and also help disabled visitors using screen readers to easily determine the context of each section. Using content headers should be a basic for website usability anyway, so if you haven’t already done this then I’d suggest getting started right away. Don’t forget to define each header using H1, H2, H3 etc. as this is best practice for CSS and good SEO.

Test your website’s accessibility

If you’re unsure of the quality of your WordPress accessibility, you can test it using a list of accessibility tools found on the Web Accessibility Initiative website. I’ve not tested these yet, however give them a try and see how your website performs for accessibility. There is also a Google Chrome extension called Web Accessibility Evaluation Tool (WAVE), which is another way to assess your WordPress website’s accessibility.

Final thoughts about WordPress accessibility

Now you’re starting to get familiar with a some of the first easy steps towards making your website more accessible, you’ll find over time you can keep going until it’s AA rated – let’s face it, AAA is going to be tough for most small organisations to attain. As humans we have the ability to empathise with those around us, and whether it’s a seen or unseen disability, it’s only fair that we create a web which is accessible to everyone.

There are so many points I haven’t touched upon in this short article, such as how accessible websites provide disabled people with more opportunities to work in business, as well as a plethora of other great benefits. If you take a minute to think about the many potential benefits to accessibility you’ll know that it should be a no brainer for most organisations. Let’s all, me included, champion web accessibility in our organisations and make a positive impact for the future of the web.

I’d really appreciate it if you’d take a moment to comment below with your thoughts 🙂

Leave a Reply