Accessibility on the Web
Published:
You may or may not have read our previous Sprout of Wisdom article on Accessibility what it is and why its important, where we gave a general overview of the how & why it's important to think about when designing and/or creating a website. No worries if you haven't yet, but from that article's feedback and questions, we decided its a subject we should expand on just a little further.
What is a11y
Simply put Web Accessibility or Digital accessibility (commonly abbreviated to a11y), is the practice of making your website or web app usable and inclusive to as many people as possible, especially those with disabilities. Which means we should be making sure accessibility support is just a normal part of building a website. Not just a nice to have feature, or viewing it as yet another task on top of designing. That way all our customers with or without disabilities will benefit from the best content and usability with each and every rollout of new content we do.
Not just a nicety but the law
This is not just our idealistic point of view as from June 2025 the European Accessibility Act (EAA) which was first introduced in 2019 will come into full force. This means that anyone within, or wishing to do business within the EU, will need to be compliant with the law or could face prosecution. It covers a range of products and services, including many types of online experiences such as e-commerce websites and mobile apps.
And if you think it won't matter to you think again. As there will be a complaint process and surveillance monitoring implemented, and any organisations or companies that fail to meet the requirements could face penalties. While these penalties will vary from country to country they may include steep fines of apparently up to three million euros! Plus the removal of products or services from the market, and the suspension of an organisation / company's right to do business.
Europe aren't alone in this with Australia, Canada, Japan and the United Kingdom all having strict digital accessibility laws for both organisations and companies. While in the United States only public sector entities such as airlines, government-funded programs, schools and non-profit organisations need to follow some rules, whilst private sector companies don't.
Now this may all sound a bit heavy handed and serious but in the long run if you comply with the laws within your country and the ones you wish to do business in then surely that extra little bit of thought and work now will be well worth it.
Not sure if you're compliant?
There are many types of accessibility standards so if you are in any doubt as to whether you need to be or are compliant or not then you can't go wrong by evaluating your site against the Web Content Accessibility Guidelines (WCAG), an internationally recognised set of accessibility standards developed through the World Wide Web Consortium (W3C).
Top of the Accessibility issues
From both our long years of experience and feedback received, we've found there's a few core fail areas of website accessibility that crop up the most, so lets take a look at the top offenders.
Can you see the problem?
One of the most common issues on the web today is contrast or should we say lack of it! Which is a major issue when you take into consideration that The World Health Organisation (WHO) says "an estimated 1.3 billion people experience significant disability, that represents 16% of the world’s population, or 1 in 6 of us"! Many of which will be sight or reading impaired of some shape or form, so you can start to see the magnitude of the situation (no pun intended!).
Contrast is not just a disabilities issue as environmental factors can effect anyone of us, such as using a phone, tablet or laptop outside or on a bright sunny day.
So what do we mean by contrast?
Basically it's the ratio / difference between the foreground and background colours of elements on your webpage or app. With the biggest culprit on many websites is difficult to read text. When the contrast between your text and its background colour isn't enough it simply won't stand out and be readable.
This can also happen if the text is over an image where maybe the text colour isn't bold enough at all, or the contrast varies across the background picture which can cause some lettering or words to be okay and others to disappear and be unreadable for many users. Though contrast doesn't just effect text, it can also cause issues with icons, images & diagrams, buttons, links, tick boxes and form elements.
Contrast by Design
We're sad to say it doesn't seem to be only self built websites that fail on contrast, as there are countless "professionally" designed ones too that fall short of WCAG accessibility standards. All because people want to put their ideas of pretty design before practicalities, especially when it comes to choosing their website colours. Though to be fair some may have predefined company brand colours that need incorporating into a design. Which is totally okay, but depending on those brand colours how that is done needs careful consideration, and not a add everywhere attitude.
At the end of the day there's not much point in having recognisable branding if your users can't access and read your website is there.
For Font sake
The next big issue has to be fonts (typeface), ranging from the style, size, kerning, spacing and boldness of them. With so many font styles available you can certainly be spoiled for choice, but many fail to be accessible especially if they are joined up, slanty (like italics) or have extra flourishes. Its not only people with low vision that this effects, but also those with reading, learning, and attention disorders like dyslexia or attention-deficit hyperactivity disorder (ADHD).
So if you really feel you need to incorporate that type of font in your design its best to keep it to short headings or call to action statements. Then choose a web safe font family for your main body of text.
Though for some people even a good clear font can present them a problem as font size does matter, too small and people with low vision or colour blindness maybe unable to read it. Also when there's not enough clear space around text blocks, or when lines of text are centred and have no clean straight starting edge. Some also have difficulties when text is all capitalised, letter spacing or kerning is too tight, as this lessens the definition between letters or words.
Now we're not saying you should never use a stylised font, capitalise or centre your text if the design and flow of the page warrants it. Just that you should be mindful of how they are used and that ideally their use is minimal and only for the odd short line of call out text or heading.
Web builders & Templates
We have to acknowledge that a huge percentage of websites out there are made using templates and web builders such as WordPress & Shopify, now this is an ideal way for many to get their small or start-up business onto the web. But the world of web builders, themes and addins can be a little overwhelming for many. Especially the vast choice of WP themes / addins that are available to buy.
Add to the mix that not all themes / addins are of equal quality especially when it comes to complying with A11y or web standards. As they may contain features that are not needed for your website or out of date libraries (small code files). So how can you be sure to choose a quality theme that does comply with industry standards?
For a start go directly to the WordPress or Shopify stores as their guidelines state that themes / addins downloaded free or sold through them have to comply to the A11y standards, and they do apparently vet them before being added to their stores.
However after you have bought a theme there's nothing to stop you from adding your own custom colours and branding to it. So unless you then do your own accessibility testing you won't know if you still comply with the A11y standards or not.
Testing Testing
The good news is you can test your website for accessibility in seconds without the need for any pricey software, or the need to download and install any either. As you can do all the testing for free from within your web browser using:
- Google Lighthouse
- Google for Developers PageSpeed Insights
- WAVE Web Accessibility Evaluation Tool
- CSS Overview
You can learn about Google Lighthouse & PageSpeed Insights and how to use them in our previous Use Google Lighthouse Sprout of Wisdom.
Another useful online tool is the WAVE Web Accessibility Evaluation Tool which gives you a visual display of your page with the issues or alerts marked clearly on the page and listed in a table to the side. To use this tool follow our link to the page, then add your website URL into the Web page address box (with the blue border) and press enter.
A new feature in the browser devtools alongside Lighthouse is CSS Overview which will help you by identifying potential CSS improvements, such as low contrast issues. To use this feature open the devtools you can find a how to guide on the Use Google Lighthouse Sprout of Wisdom page. Click the CSS overview tab, then click on the blue Capture overview button, it will then show you an overview summary for that page to test the whole website you will need to run the test on each webpage in turn.
We hope you can appreciate that accessibility is a vast but vitally important subject, which we have only highlighted a few parts of but if you wish to delve into the subject further you can check out these articles which we found interesting and useful.
If you have any questions or feedback from this article, or you would like some hands on help? You can reach out to us via our Contact form.