An accessible website should cater to users with disabilities, including people with visual, hearing, and motor impairments.
Accessibility is about making your website usable for as many people as possible – no matter who they are or what their background is.
We take care with how your website is presented on different devices and browsers – testing the website with a variety of devices and modern browsers.
During the design phase, care is taken to ensure the design is accessible and that is continued through to the development of the website. We consider such things like:
- sufficient colour contrast for people with visual impairments and dyslexia;
- ensuring that elements are distinguishable not by colour alone, so they are recognisable to people with colour blindness;
- that you can navigate the website without the use of a mouse for those with mobility issues;
- that audio content is transcribed for the hearing impaired (although please note we do not provide the transcription); that the text is appropriately spaced for readability; and
- that interactive elements have appropriate hover and focus states.
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.
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:
- “Accessibility basics for my WordPress website: what is it and why is it important?” is an h1
- “Making websites screen reader friendly” is an h2
- “Semantic HTML” is an h3
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.