What is accessibility and why is it important for my WordPress website?
Accessibility is about making your website usable for as many people as possible – no matter who they are or what their background is. In particular, an accessible website should cater to users with disabilities, including people with visual, hearing and motor impairments.
Accessibility is a vast and complex subject. So in this post I’m only going to cover a few accessibility basics that everyone with a WordPress website should be aware of.
There are some useful resources at the end of this post if you’re interested in delving further into website accessibility.
What is accessibility?
A completely accessible website is one that can be used by anyone – regardless of their abilities or disabilities.
Web Content Accessibility Guidelines (also known as WCAG) are freely available online. The latest version is called WCAG 2.0.
These guidelines include testable “success criteria” so people can measure how accessible their website is.
There are three levels of WCAG conformance: A (lowest), AA and AAA (highest).
100% conformance with WCAG 2.0 is incredibly difficult, so AA is considered the worldwide standard for web accessibility.
Accessibility awareness is important
As accessibility is such a broad topic, it’s not something you’ll necessarily have time to become an expert in. And that’s OK.
But accessibility – or the lack of accessibility – is something everyone with a website should at least be aware of.
An awareness of accessibility means you’re one step closer to being more inclusive and opens your website to more people who are interested in your business.
So with all that in mind, here are a few important accessibility features every WordPress website should have.
Ability to Tab between sections of your website
When you’re thinking about a new website, it’s easy to focus on how it looks.
But we should also think about how people will use it. Some people find it difficult to use a mouse. Others, may have only limited use of a keyboard.
One part of improving accessibility is ensuring a keyboard’s Tab button lets users logically navigate a website.
Sometimes the default order of sections isn’t logical. It may take a user unnecessarily long to reach the section they’re interested in using Tab.
But with the addition of some simple code, it’s possible to change the Tab order and ensure users can easily navigate around pages and between different parts of a website efficiently.
Making websites screen reader friendly
People who are blind might use a screen reader to understand the text and layout of a website. A screen reader, describes everything on a page, including images, videos, structure and copy.
There are a number of screen readers to choose from, depending on personal preference and operating system. The majority of screen readers, though, are designed for Microsoft Windows.
In a survey on screen reader usage conducted last year, JAWS, ZoomText, Window-Eyes and NVDA proved to be the most popular.
But while all this technology is readily available, it’s much more effective if a website is properly structured and marked up.
For example, if a page doesn’t have a logical header structure, it will be difficult for a screen reader user to understand the context of each section, making it less accessible.
Easy to make accessibility improvements include using accurate image alt text, descriptive link text and semantic HTML:
Image alt text
An image’s alt (alternative) text and caption are read out by screen readers. This extra information helps people with visual impairment better understand the content on your website.
As a minimum, you should include descriptive alt text for every picture uploaded to your WordPress website.
You can also write a caption to further describe images, but this should be unique from the alt text so as not to bore people using a screen reader.
We’ve covered this in more detail in this past post on optimising image accessibility.
Descriptive link text
Screen readers can pull out a list of links, making it easier for users to skip to the link they need.
So using non-descriptive link text prevents users from understanding what the link is about or where it might take them.
There are a few ways this can be solved. The easiest is to link from the descriptive text you’ve already written. For example, above I linked to a survey using the text “a survey on screen reader usage.”
Alternatively, if you’re linking from an image, you can describe the link in the image alt text.
And lastly, if you’re linking to a file, it’s helpful to specify the type of file (e.g. pdf, Excel etc). This lets a screen reader user knows what program the file will open in.
Semantic HTML
HTML (Hyper Text Markup Language) is used by developers to describe the different elements on a web page. HTML tags sit around different elements on every page of your website, including all headings.
WordPress makes it easy to add semantic HTML without needing to know any code. Any time you edit a post or page on your website, you can just click a button to add a new heading tag, emphasise some text or insert a bulleted list.
But, even with this built-in, it’s still possible to confuse screen reader users by introducing an illogical heading structure on your site.
We’ve written in detail about the correct use of headings on a website. Briefly, there are six different levels of headers, h1, h2, h3, h4, h5 and h6.
Every page should only ever have one h1 – this is the main heading of a page and puts the entire page in context. Often a page will then have multiple h2s to break up sections. Under each h2, you can use h3 and h4s if necessary. But you should avoid skipping heading levels, like jumping from h1 to h4.
On the post you’re reading right now:
Keeping this logical order of headers, makes each section of your website pages easier to follow, removing confusion for a screen reader user.
Accessible colours
People with colour blindness can find it difficult to distinguish between different colours.
There are around 2.7 million people in Britain with colour blindness.
So to make websites more accessible, it’s important to have an acceptable level of colour contrast. WCAG suggest a ratio of at least 4.5:1 – but this requires a formula to figure out.
A simple way to check your website colour choices is to use a tool that calculates the ratio for you. One example of such a tool is the Colour Contrast Check.
All you need to do is enter the foreground and background colour you intend to use. It then automatically works out whether the colours pass the conform with WCAG 2.0.
If your colour choice fails, you can try adjusting the sliders to test more suitable options.
More information about accessibility
If you’d like to learn more about accessibility, there are some thoroughly useful resources online.
Firstly, I recommend checking out Rian Rietveld’s talk from WordCamp Europe 2016. Here, she discussed the current state of WordPress accessibility.
To see some assistive technology in action, including the screen reader, NVDA, watch Graham Armfield’s assistive technology demo, also from WordCamp Europe.
On the World Wide Web Consortium (W3C) website, you can access lots of information about WCAG 2.0.
And lastly, on Twitter, accessibility experts worldwide tweet using the hashtag #A11Y (which is a shortened version of the word accessibility), so you can get involved in the conversation.
I hope after reading this post, you’ll have glimpsed the importance of website accessibility and see the role we can all play in its improvement.
This content was originally published here.