Is your website accessible?

Posted on 19/02/2021 by Harry Allen

More and more businesses are shifting to online, which is great, but not if a whole section of the population can't use the website. Accessibility issues are common in a lot of sites, causing a lot of issues that can be solved relatively easily - it doesn't mean you need a whole new website!

Based on the WHO 2011 report on disability, more than 1 billion people in the world have some form of disability. This corresponds to about 15% of the world’s population. This number will only grow as populations are ageing, and older people have a higher risk/proportion of disabilities.

In 2018, the UK government made it law for central government, local government organisations, some charities and other non-government organisations websites to meet the WCAG2.1 guidelines.

Then in 2019, the European accessibility act was formed. Even as far back as 1990 the American Disabilities Act covered issues that are now being addressed in websites. In some situations, companies are now being taken to court and losing, take the Domino’s Pizza case for example.

People wouldn’t hesitate to make sure that a venue was physically accessible, so why is it any different making your website accessible? It has never been more crucial than now as more businesses are turning predominantly online.

Disabled access sign

Purpose

Our goal is to create inclusive websites because accessibility is a human right.

Not only will the site be easier to use for everybody, but we will potentially be bringing the client more leads. Click away pound stated “Failing to provide accessible consumer websites cost UK retailers £11.75 billion in 2016.”

Issues

The main issue is with how we think about inclusivity or even disabilities themselves. I’m a huge fan of Adrian Roselli and his way of approaching this via the selfish accessibility method. Here is a video of Adrian from a recent conference, I highly advise viewing it for a different perspective on disabilities and common issues people may face.

Essentially, he relates common website accessibility issues to everyday situations that everybody experiences, not just people with disabilities. For example the contrast issues he simply explains that this is also an issue if the person is using a laptop in the sun or a brightly lit area. So we can see that it is in our best interest to make sure our site is accessible for the wider population too.

As you can see from his video and the statistics, people with accessibility issues are a lot more common than you may think.

Common accessibility issues

So we’ve decided that making our sites inclusive is a benefit to everybody (I hope!). The first thing that comes into people’s minds when addressing accessibility is that we need to build in additional features or functionality that are going to be costly and timely to implement, or that it’s going to restrict the designs.

In reality this is not the case and a lot of them can be solved very simply with a little thought, planning and using Adrian Roselli’s selfish accessibility method.

Colors and contrast

Approximately 8% (1 in 10) of ALL men in the world are colour blind, so let’s select a colour palette that meets these requirements.
If the client’s website uses colours that are not accessible then ask them if they are happy to potentially be losing 8% of their leads. I’m sure they might rethink the colours if you tell them this.

Whilst selecting these colours, also ensure that you use a good contrast ratio between them, you don’t want your links to be hidden if they are on a low contrast background (laptop in the sun…). This is a 5 minute job using something like the online contrast checker tool or if you want to be specific to your links then use the link checker tool.

Colourful paint

Font size and choice

Does your website contain information that you want people to understand? I would suspect yes. So let’s make sure one of the most important ingredients of your site is digestible for the eyes before they press that back button.

Almost 1 in 10 people who will be viewing your site will have some sort of issue with their eyes (not including colour blindness). At 40 years of age, only half the light gets through to the retina as it did at age 20. For people over 60, this goes down to 20%.

The default browser body font size is usually 16px or 1rem, this is also the bare ‘minimum’ advised font size, but let’s face it this is just too small! The most common argument here is that “People can just zoom in if they want the text larger”. The problem with this is that most people who are affected by this issue probably don’t know how to zoom, so we should not assume this is an option for them.

There is no ‘best’ size or font, but I would recommend a body font size closer to 18px or 1.125rem, with a decently spaced line height, an eligible font and the bare minimum of font libraries included. Webaim has a good article on fonts, and states “Each time you encounter a new typeface, font, or font variation, your mind must build a map or model of the characters and patterns to then more quickly parse words and process meaning. This requires cognitive effort and time. If the typeface is already familiar, this overhead is reduced.”

Gill Andrews has a more comprehensive post on typography mistakes that is well worth the read if you deal with a lot of typography.

Woman using a magnifying glass

Images

Not too much to mention here but to ensure you have an alt tag on your image. Most CMS now have the option to add an image alt tag when you upload it. Make sure you actually describe the image if it’s important. This hubspot article has a good write up on good and bad alt tag usage.

If an image is not important and it’s purely decorative, like a background pattern, then leave the tags empty. Just make sure it is actually empty in the markup like so: alt=”” or it will get flagged as missing an alt tag.

One important thing to remember is that you should not use images for important text (like headings) as they will be unreadable to screen readers and Google. Be careful placing text over images too as it can become unreadable due to the background.

Structure

One thing that normally gets overlooked even if you have followed the basics above, is the actual semantic structure of the page. A lot of people get caught up in the size of a font or heading and use these for styling purposes rather than defining the pages information hierarchy.

Not only will this affect how your content is interpreted by Google, but people using screen readers will use your structural markup as navigation. Yoast has a great article on headings that you should spend a bit of time reading. Some simple advice would be to have one <h1> element on your page and then <h2> for your next important sections. If you have a child of a sub section then use an <h3> and so on:

<h1>Usually your page title</h1>

<p>Some paragraph text here</p>

<h2>The next important section of your page</h2>

<p>Some paragraph text here</p>

<h3>Something not so important but related to the h2 above</h3>

<p>Some paragraph text here</p>

<h2>The next important section of your page</h2>

Roundup

I hope you can see that by following these simple rules above, you will be making your site accessible and a more pleasurable experience for everybody visiting it. Not only this, but you are also improving your standing with Google, so it’s a win-win for everybody.

If you are unsure whether your site fits within these standards or just want help to improve the accessibility of your site, get in touch with us.


Enjoy this article?

Subscribe for weekly insights

Is your website accessible?

Talk to a specialist

Take the first step to helping your business thrive online

Get in touch