Accessible Design: Making Your Website Accessible

Websites are quickly becoming the equivalent of your shopfront. It’s where you get noticed, where you make sales, and sometimes, it’s even where the entire transaction goes down. So, imagine if you had a shopfront but a select portion of the population just couldn’t enter it.
two wireframes showing an example of accessible design and non-accessible design

Sick of reading about and not doing anything?

Websites are quickly becoming the equivalent of your shopfront. It’s where you get noticed, where you make sales, and sometimes, it’s even where the entire transaction goes down. So, imagine if you had a shopfront but a select portion of the population just couldn’t enter it.

There wasn’t enough lighting to see the front entrance, there wasn’t a ramp at the front, and you had to be ~in the know~ to find the front door handle. That’d just be bad business sense, right? Same goes with accessibility in your website design.

What does making your website accessible actually mean?

Making your website accessible means making sure every aspect of your website can be consumed, used, and interacted with by everyone. Rather than just those of us who are typically abled and in the know. It means offering visual cues in lieu of sound for people with hearing difficulties and offering rich alt text or written cues for those using a screen reader due to visual impairment.

website that has only loaded wireframe

Why does it matter?

A wild stat: last year, the Australian Institute of Health and Welfare found that 55 per cent of Aussies have a visual impairment. That’s more than half of us. So, if your website isn’t adequately designed and created to be inclusive and accessible to this portion of the population, you’re kind of losing 55 per cent of your potential sales already. As well as that, it’s 2020. We have a stronger understanding of disability and impairment and how it can affect people’s lives. Making a joint effort to create an accessible world online is just an important thing we should all be doing.

How you can make yours more accessible:

Be careful when selecting colours & fonts

When it comes to ensuring your website design is as, quite literally, easy on the eyes as it can be, it’s important to select the right fonts and colours. More of the population is colourblind than you think. So, while slightly differing colours on top of each other may make a really cool design, they’ll blur together for many users. 

Some fonts are harder to read too, especially with dyslexia. To the angst of many designers, comic sans is actually one of the easier fonts to read. Sans serif fonts (the fonts that don’t have feet) usually offer the easiest reading experience. 

It’s why you’ll find a whole heap of websites utilising these sans serif fonts.

Don’t use colour to explain things. Colour blindness is kind of like a scale. So some with colour blindness won’t be able to distinguish the difference between two shades of green but can easily see the difference between green and red. Others won’t be able to distinguish between the latter two. 

traffic lights

If you’re creating something like an infographic and want to use the classic traffic light example: where green is great, yellow is okay, red is a no-go — this likely won’t make sense to colourblind people. You’ll need to use words screen readers can find to explain the graphic.

Use highly descriptive, specific alt text & transcribe your videos

When designing or creating, remember that not everybody uses a computer how you do and won’t be seeing the content or design. They may be using a screen reader which relies on the information we give it to relay to the website user. Avoid using images that display text too and if you totally, absolutely must do it — be sure to make it obvious in the alt text.

Avoid automatic loading elements

These can be a big issue for those with sight impairments as it can be tricky to navigate to stop these from playing and that can be pretty frustrating. Then there are other disorders like epilepsy, where it can actually pose a real danger to the user if the video or animation playing triggers a seizure. If your website needs to feature automatic content, make sure there are easily accessible play and pause buttons available. 

Tick all those User Experience (UX) boxes

User experience is super duper essential to the experience any of us have using a website but when it comes to those with a visual impairment or any kind of disability, knowing where to find a menu, homepage, contact page, etc is really, really handy. Accessible design and user experience share a lot of concepts really — colour contrast, readable fonts, and not over complicating it are the key points.

example of weak contrast with illegible text next to strong contrast with legible text

Making your website copy inclusive & accessible

Accessibility and inclusivity in your website copy can power up the overall accessibility of your website design. 

Use descriptive anchor text

Screen readers will pick up links, but they can only offer the context you give them. Avoid ‘Click Here’ and opt for what they’re clicking through to (the page title or post name).

Write for everyone

Whether you’re working in B2C or B2B, you should be writing for everyone. That means no big, niche words — if there’s an easier word to understand, use that. 

Using a big fancy word will make you feel good about the word and one or two readers might be like, “Woah they managed to use ‘supercalifragilisticexpialidocious’ in a sentence!!” 

But the rest of the readers who don’t get it may not even continue with the content or assume they don’t get something they otherwise would have

Write from more than one experience

As well as making your website and content accessible, you should try to create an inclusive space too. It’s as easy as writing your copy for more than one experience. Writing button copy that says ‘Read More’ or ‘View Here’ isn’t necessarily descriptive of how everyone will consume that content they’re clicking through to. You could try ‘find that here’ or ‘learn about it here’. Try to avoid implications in your copy like “tradesman”. “Tradesperson” sounds just as good, makes just as much sense, and includes everyone.

Let’s go!