Designing for accessibility refers to the practice of creating content that can be used by a wide range of people, including individuals who have visual, motor, auditory, speech, or cognitive disabilities.

There are over 1 billion (15%) people worldwide who have a disability, yet most websites aren’t created with accessibility in mind. In fact, I would go as far as to say that most of you reading this won’t have considered design for people with disabilities at all – am I right?

It’s vital not to underestimate the importance of web accessibility, especially in the wake of the pandemic. While 20 years ago the internet was a place for tech geeks, it is now a primary source of information, entertainment, and communication. It’s used for everything from shopping to sharing moments with friends, reading the news, watching TV, applying for jobs, booking holidays, and more. Yet, for people with disabilities, there are so many barriers in place that make many of these things inaccessible, as many websites don’t consider their needs.

So to help you design for accessibility, we’ve together put some handy suggestions for you to consider in your next creative project:

Colour Contrast

Colour contrast is an often overlooked web accessibility problem. People who have low vision may find it hard to read text from a background colour if it has low contrast. According to the World Health Organization, there are an estimated 217 million people who have moderate to severe vision impairment. So, it is crucially important to consider the sufficient contrast between text and backgrounds.

There are some great tools that can help you find an accessible colour palette for your designs including Color Safe. There is also WebAIM’s Color Contrast Checker, which will let you test the colours you have already chosen.

Make Images & Videos Accessible

Images and videos should feature alt tags, descriptions, and captions for users with screen readers. Just about every CMS makes this extremely easy to do, although many content producers skip this step when publishing web content. When you upload an image in WordPress, for example, you’re presented with fields for title, alt text, and description. All of them should be filled out for every image used.

Some social platforms have taken steps to encourage users to fill out these fields in interesting ways. On LinkedIn, for example, all image posts have a prominent “Add alt text” option that allows you to enter alt text for an image, making it more accessible to everyone who might see your post.

Ensure That Content Can Be Accessed With a Keyboard

Users with mobility disabilities may not be able to use a mouse or trackpad. These people tend to access content through the use of a keyboard instead by pressing the “tab” or “arrow” keys, or through the use of alternative input devices such as single-switch input or mouth stick. As a result, the tab order should match the visual order, so keyboard-only users are able to logically navigate through site content.

Long pages with lots of content should be broken up with anchor links (jump lists), allowing keyboard-only users to skip to relevant portions of the page without having to negotiate through other content. “Skip to main content” should be provided at the top of each page, so keyboard-only users won’t have to tab through the page navigation in order to get the main content.

For pages with local menus and multiple levels and sub-items, the menus should be configured so that all menu items can be accessed with the keyboard. Do not use elements that only activate when a user hovers over items with a mouse, as keyboard-only or screen readers users will not be able to activate them.

Consider Autistic Spectrum Disorders When Choosing Colour Schemes

Around 1 in 160 people has an autistic spectrum disorder, and research has found that the colour yellow can be distressing to some people in that population. Yellow is often associated with sensory overload, so you should consider avoiding the use of yellow, or use it sparingly.

Create Fully Responsive Designs

Over half of all web use is now on smartphones and tablets. The screens of these devices are dramatically smaller than laptops and desktops, and we interact with them in a very different way – using touch rather than a keyboard or mouse.

Rather than “adapting” a desktop design for a mobile device, or vice-versa, you should consider all device form factors in your overall plan for a website’s design. Make sure to consider more extreme cases as well: for example, make sure that your website is still truly responsive to very large screens and very small mobile screens like the iPhone 5. 

Contrary to what you may think, a design that meets the needs of disabled audiences does not make the experience worse for the non-disabled user. In fact, the opposite is true. The experience gets better for everyone. Websites that are designed for high levels of accessibility rate better for things like time to complete a task and have higher perceived aesthetics. Website users also say that accessible sites feel more trustworthy.

So there you have it, some quick tips and food for thought about how you can make your next creative project more accessible.

If you’d like help and support with branding & website design, get in touch – we’d be happy to help.

For more helpful hints and tips check out the rest of our blog.