Websites are made for people. But when you fail to take everyone into account, you risk losing those people quickly. Every website needs someone to own accessibility.
There was a point in a previous role when I realised our team was thinking a little selfishly. It wasn’t intentional. It was just a problem in the way they were going about building our website.
We had a UX specialist. We had a design team. We had a product team. We had great content people. It seemed like we had all the right elements for a successful product. And yet, something wasn’t right.
As I worked through the site and tried to put myself in someone else’s shoes, I realised we’d collectively built a website that failed to take into account a portion of our audience that many of us didn’t understand.
We could all see the colours fine, and the text was clear through our eyes, but what about the millions of individuals we could potentially market to that couldn’t see the same way?
No small number
I realised quickly that, in order to help the site achieve its full potential and reach more people, I needed to take on a new role.
I needed to be … the Accessibility Tsar.
Honestly, I didn’t workshop the name when I clearly needed to. But the concept was warranted largely because we weren’t thinking of everyone when we built our site. And there are more people out there in need of accessibility features than you might think.
According to the Global Accessibility Awareness Day foundation, over one billion people around the world have a disability.
Disabilities vary wildly. Some disabilities seriously impact how a great many people use and draw value from the internet in a variety of ways – affecting everything from how they experience your content to how they interact with your website.
For instance, you might think a smaller font size might be justified for certain design purposes – such as within a complex site menu. But some disabilities make it difficult to see what should be clicked.
Worse, if a site has colours that clash without any discernible difference in contrast, you’re basically screaming to customers with low vision or colour blindness that they’re not worth considering.
Accessibility for all
Frustratingly, issues like the above and many more are all remarkably common. In my work as a holistic SEO, I regularly see websites where accessibility simply falls by the wayside.
However website accessibility is something that can be measured, particularly as some factors can also impact SEO rankings. Even if we were to ignore the human aspects of accessibility – and websites should always be built for people first – the potential SEO ramifications mean that accessibility is vital for any business to consider.
A simple glance at Google’s PageSpeed Insights tool (also found in Chrome as part of Lighthouse) reveals how the search engine processes accessibility as part of its ranking signals. The tool grades elements within the page – correct heading structures, colour contrast, alternative text for images that make sense when read aloud by a screen reader, and more – to arrive at an accessibility score.
It’s a clear sign that accessibility matters. And this is just one of the ways you can back up your proposal that your website needs an Accessibility Authority, Clarity Clairvoyant or whatever name you can think of.
Much of the accessibility argument is centred around colour and contrast, so ensuring your text is legible and clear without obvious colour problems is a serious part.
But there are other attributes webpages need. ARIAs (Accessible Rich Internet Applications) specify what each element represents on the page, rather than them simply existing as text or links. Alt tags allow screen readers to describe images and other visual content to blind and low vision users, as well as anyone else who needs to listen to their web browser rather than simply view it. A scalable viewport makes it easier for users to zoom into or move around a webpage on a smaller screen, instead of struggling to read or interact with tiny fonts and buttons.
Tools to help nail accessibility
Not all developers and designers are familiar with the various accessibility practices – let alone work towards accessibility by default. And sometimes accessibility falls through the cracks because each person thinks writing those image descriptions or checking those colour contrasts is someone else’s responsibility.
This is another reason why every website, every business, needs someone to champion accessibility – identifying issues, delegating tasks and redefining workflows as necessary.
Thankfully, there are quite a few handy websites and tools to reduce the guesswork and help you determine what needs to happen.
Here are five tools we use for accessibility at Pounce.
WCAG Color Contrast Checker
Enter your colour hex codes into the WCAG Color Contrast Checker to check the contrast ratio. Or install the Chrome extension to test your preliminary designs in the browser to get a better idea of what works and what doesn’t.
The Web Content Accessibility Guidelines (WCAG) should be a first stop for any designer or developer unsure if their designs are going to pass muster. Quickly check foreground and background colours as well as text sizes, and find out whether or not your designs pass the mid-range accessibility requirements (AA) or the more difficult low accessibility setting (AAA).
A11y Colour Contrast Checker for Figma
Designers and developers can also check accessibility ratios for colour and contrast while working within Figma, too.
The A11y Colour Contrast Checker plugin makes life a little easier, allowing you to check compliance with AA and AAA requirements in the design stage, arresting any problems before the build begins.
Google PageSpeed Insights
After rollout, Google should clearly be one of your first points of call; not only because it’s the biggest search engine, but also because it correlates accessibility with search indexation – and has tools to help you check your own pages.
While it only works for published pages, PageSpeed Insights can check the structure of your page to determine whether your ARIA elements are valid, whether the individual parts of your page have valid names and alternative attributes, and that old chestnut of contrast ratios for foreground and background colours.
This stuff matters, and can determine whether someone stays on your website or hits the road, Jack.
WAVE Chrome Extension
You can also check accessibility from inside your browser using the Web Accessibility Evaluation Tool or “WAVE”. It’s easy to use, and is available for Chrome, Firefox and Microsoft Edge, allowing you to judge structural problems, ARIA elements, contrast and more from within one easy interface.
BrowserStack
One final service worth checking out not only ensures accessibility is catered for, but also lets you check whether your website renders as intended across various platforms.
Few developers or designers will have every possible browser variation installed to test your website in every possible scenario. However, BrowserStack can help test and debug accessibility and design issues without needing to use your audience as a QA testing team.
Results others can see
Once your work is done, you might not be able to see a difference to your own experience of the website – but that is somewhat the point.
Improved accessibility isn’t necessarily something you’ll be able to experience first hand but rather something that a demographic of your audience and visitors will appreciate. While they’re often underrepresented, these users are very much there – and most sites they visit still don’t cater to their needs.
Fortunately yours will, potentially giving you an edge that can not only improve your search rankings but also your conversions and bottom-line results.
