Six tips for designing an accessible website

Today, there are one billion disabled people around the world – 15% of the global population.

This means that a huge proportion of the world wide web is inaccessible to millions of users who have visual, hearing, motor and/or cognitive impairments.

When in the production stage, website designers and agencies might also have to start considering another growing demographic – the aging population.

Loss of sight, fine motor skills and cognitive function can all greatly impact how well the older generation can interact with a website.

It can be incredibly tempting to create websites with unique layouts, personalized fonts and flashy graphics, but doing so means excluding thousands of potential customers.

How is an accessible website beneficial for your brand?

Taking ethics out of the equation, there are two major benefits to creating an accessible website.

First, creating an accessible website will shine a positive light on your brand’s identity and firmly position yourself as a trustworthy company.

From an economic standpoint, brands that take the time to create accessible websites are the ones that are profiting.

Take the US, for example. Around 54 million people are living with some form of disability according to the US Census Bureau.

This community alone represents approximately $1tn in aggregate income, which translates into more than $220bn in discretionary consumer spending power.

Six top tips for creating an accessible website

There’s a great deal of misconception around the difficulty of designing an accessible website.

With a few alterations, creating a disability-friendly website can be simple. Here are six tips for designing a website that’s accessible to all.

1. Ask people with disabilities for help

This is often overlooked by designers, but it’s so important to ask people with disabilities to try out your website. If you understand your users’ needs, you can design a functional website with minimal issues.

You should also include people with disabilities on your marketing team, as they will be able to tell you first-hand what hurdles they run into when navigating websites. With this information, you can eliminate these obstacles before it goes live.

Siteimprove is a great online tool that allows you to check the accessibility of your website.

At Adapt, we have used it to locate and rework website features that are deemed inaccessible. Websites are scored with A, AA, or AAA ratings, with AAA being the highest score. Most digital marketers aspire to have an AA rating.

2. Choose a clear font

Using serif fonts or your own branded fonts can cause a lot of problems for people with dyslexia or visual impairments.

You should try to use sans serif fonts where you can as these fonts are much clearer and stand out on most images and colored backgrounds.

The size of the font is also incredibly important. You should opt for a minimum size of 16 pixels for a serif font and 14 for a sans serif font for easy readability.

To check if your choice of font is meeting the mark, try downloading the WhatFont browser extension.

3. Use alt tags

Most websites that include pictures will use alt tags.

Alt tags are the words you see when you hover your mouse over a picture. They are extremely helpful to those using screen readers.

These tags would be a great addition to your website as you can add detailed descriptions to all of your pictures. However, when writing these descriptions, you need to keep them concise.

4. Create subtitles and transcripts

Adding subtitles to your videos is essential, as they are extremely helpful for people with hearing disabilities or those with ADHD.

Some online platforms including YouTube are programmed with software that adds subtitles automatically. However, if you are producing your own videos, it’s important to take the time to create subtitles.

You should also consider writing transcripts and captioning for your videos, which covers all bases.

5. Links need to be descriptive

On most websites, you’ll notice a great proportion of them use the ‘click here’ button to help you navigate to other pages. While this seems like an effective navigation system, this short description makes life incredibly difficult for those using screen readers.

For those who may not have used screen readers before, these programs scan your website for links to help users with visual impairments navigate around your website.

Short, generalized navigation links are difficult for screen readers to process. So your users may get stuck on one page of your website, which is not good.

Instead of opting for the standardized ‘click here’ link button, it’s worth writing a descriptive link. This will allow the screen reader to process what you’ve written and will allow the user to understand the content of your pages with ease.

For example, it’s better to write ‘to learn more about our job opportunities, check out Adapt’s careers page’, instead of ‘to learn about our job opportunities, click here’.

To help your web links stand out for those with visual impairments, underline them and add color contrast.

The size and range of your links are incredibly important. Ensure the font of the link is a larger size and has a wide range, as this will be helpful for those with mobility difficulties.

6. Seamless navigation is essential

Many people are unable to use a keyboard or mouse to trawl through the web, and instead use speech recognition software, screen readers, head wands, adaptive keyboards and trackball mouses.

These inventions are a great resource to those with visual, hearing or mobility impairments, but they will not work if your website fails to support them.

To ensure your website is easy to navigate for all, program your website to be keyboard-friendly. Adding visual indicators on tabs allows users to know their location on each landing page.

If you have a page that has a lot of content, it’s best to divide it into smaller sections, and the easiest way to do this is to create jump lists.

Another design aspect you need to think about is video. For those of you who already have or are considering adding videos to your website, you need to ensure they don’t play automatically as this can make life difficult for people using screen readers.

In conclusion

Everyone deserves an easy user experience, and right now we are not doing enough to ensure our websites are accessible.

Taking the steps toward reworking the design of your website can seem challenging at first. But by following these six easy steps, you’ll have an accessible website up and running in no time.

Ella Fisher, marketing assistant at Adapt Worldwide.