TL;DR (Too Long; Didn't Read)
We have audited hundreds of sites. The top accessibility failures that we found are:
- Alt Text
- Color Contrast
- Keyboard Accessibility
- Accessibility Statement
- Link text
1. Alt Text
Almost every site on the internet has this issue, missing or (worse) incorrect Alt Text.
Adding alternative text (Alt Text) for images is the easiest issue to fix, but (unfortunately) the easiest to get wrong.
Like many website accessibility issues, determining appropriate, equivalent, alternative text is often a matter of personal interpretation.
See some more information on the official WebAIM website (Click here to view more Alt Text Information on the WebAIM website)
2. Color Contrast
The colors used on your website tell a story and psychologists have proven that humans interact with colors in a variety of predictable ways.
The colors that you choose for your website can make or break a purchasing decision or be the one thing that prevents someone from viewing your content in the way you intended.
The main failure we see with colors are contrasting backgrounds with text colors and link text colors.
But color contrast is not just an issue for Blind web users, it affects almost ALL web users across the world.
1 in 11 men are diagnosed color blind, 1 in 200 women are diagnosed color blind. Chances are, someone visiting your site in the last 24 hours has color blindness.
75% of people in the USA use a form of vision correction, whether it is eyeglasses or contact lenses (or a combination of both) which makes clear and legible text more important than ever.
3. Keyboard Accessibility
The first thing we check on any site is basic keyboard navigation.
When you first load a site, pressing the tab key should begin navigating through the selectable elements, in the correct order that they appear on the page (left to right, top to bottom).
There should also be some sort of indication as to what is selected, usually in the form of a border around the item that is selected.
Ideally upon your first tab press, there should be an option to skip to content, so that the user can skip your header and/or menu.
4. Accessibility Statement
An accessibility statement is the document on your website that tells people where you are in your accessibility journey.
Ideally, it should include –
- The level of compliance you are aiming for
- The things you have already focussed on to be more accessible
- The areas you have identified for improvement and a timeline for when or how you intend to fix it
- Contact information for your business
- Contact information for complaints, specifically for accessibility
5. Link Text
When you insert a link, button or prompt to navigate elsewhere, you have to ensure that your link text is purposeful. Do not use phrases such as ‘Click Here’ or ‘Read More’ or ‘More Info’.
There are a few different ways of being purposeful. in the case of buttons, it could say ‘Go To Flower Gallery’ instead of a sentence saying click the button to view our gallery, and a button saying click here.
If your link is in a sentence or text block, you should make the sentence a link, instead of just the click here part. Take a look at number 4 in this blog post for an example.
You’ll also notice that the link text is a different contrasting color and is underlined, this is also required for compliance.