What is Web Accessibility?
While it may not be the most exciting part of building an online business, accessibility helps you to get your website in front of the largest audience possible. By supporting those with accessibility limitations, you’re putting your business right to the front of the queue, since many of your competitors won’t bother.
In addition, Google checks your website for accessibility features when rating it. That means that more accessibility features could be the change that tips your Google search results in your favour.
The Web Accessibility Initiative publish guidance on web accessibility, but if you’d like just a few quick tips that you can implement now, read on!
1: Choosing the right colour scheme
One of the easiest ways to improve your website for those with colour-blindness is to select the correct colours in the first place. WCAG is the most commonly used web accessibility standard, which has the following guidance (from WebAIM):
WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
It’s really easy to check your colour contrast – just head over to a service like Color Safe and enter in the colours from your website. If you don’t meet the standards, Color Safe will help you pick a similar colour which does.
It’s also important to ensure that there’s no important information on your website which relies on colour to be visible. For example, if you have a graph with a key, considering using shading or shapes to differentiate between the different sectors of the graph as well as colour.
Bear in mind that black-on-white and white-on-black are not necessarily good options for accessibility. It is possible for colour contrast to be too high. A subtly off-black colour on white is a more suitable option.
2: Links and Buttons
The way we display our links and buttons changes with design trends, however our ability to read does not. Technically speaking, the default underline style for links is excellent, because it is easily visible, even to many partially sighted viewers.
I realise it could be a hard sell to change the design of your website (and possibly to move away from current design trends), but it’s certainly a best-practice solution. If this isn’t an option, making sure you use a colour which is contrasting to both the regular text and the background in your design, and make the link clear in your content, like the following examples:
To view this document, click here.
Register for our event on this page.
3: Text sizing and spacing
It makes sense to display text at a size which is easily readable. Here’s what the WCAG standard has to say about it:
The intent of this Success Criterion is to ensure that visually rendered text, including text-based controls (text characters that have been displayed so that they can be seen [vs. text characters that are still in data form such as ASCII]) can be scaled successfully so that it can be read directly by people with mild visual disabilities, without requiring the use of assistive technology such as a screen magnifier. Users may benefit from scaling all content on the Web page, but text is most critical.
To view this in full, click here.
This means a bit of a judgement call. At Omni, we generally default to 16pt text, a size which is generally readable. This is also the size used by the website for the WCAG standard itself.
When in doubt, you can even provide an option for the user to change the text scaling to their own comfort.
Implement this today
You can implement these three changes today:
- Ensure that the colour scheme of your website passes the Color Safe test
- Ensure that you notate your links well (as per the examples above) and, if applicable, consider adding text underlines to links
- Ensure that there is no text on your website below 16pt, and considering using a third-party plugin to add text scaling options to your website.