Commentary

Designing For Inclusion: Tips For An Accessible Website Design

From business practices and political policies, to school curricula and building designs, inclusivity is permeating many aspects of our lives. With one in four Americans living with some form of disability, these policies are intended to include those who might otherwise be left out or marginalized from areas of daily life.

And in today’s online world, one means of inclusivity that’s more important than ever is accessible website design, especially as 4.6% of disabled Americans suffer from a visual impairment. However, seven websites in 10 still contain “accessibility blocks”  that render them either extremely difficult or impossible for millions of consumers to use, according to a study by an accessibility software company.

If your own brand is guilty of this, you could be losing business to competitors with more inclusive websites. So what exactly can you do to make your own site more accessible?

Have a clear visual hierarchy. Making sure that your site content is presented and organized clearly is crucial for making it easy to digest, and therefore accessible to all. This involves setting out your information using a clear visual hierarchy that takes visitors on a natural, logical journey through the content. In order to do this, many designers implement principles of the Gestalt approach. This is a series of theories related to visual perception, based around the concept that humans will see the whole before the individual parts when looking at a group of objects.

advertisement

advertisement

Make interactive elements and text large enough. According to Google guidelines, touch targets like icons and links should be at least 48x48 pixels to ensure those with impaired vision or motor skills can easily interact with a website.

In addition, padding and spacing should be taken into consideration in order to further simplify interactions, with touch elements recommended to be at least 8 pixels apart. This reduces the possibility of users tapping on the wrong option.

By the same token, text should also be big enough for users to read, so set font size at least 16 pixels — and if smaller text must be used, ensure it’s in upper case. Furthermore, always provide a customizable text option for users to tailor the text size to their liking.

Consider contrast color combinations. The colors you use can also have a huge impact on your site’s accessibility. Using high levels of contrast can be hard to look at, even for those who aren’t visually impaired, while low levels can make it hard to differentiate between various on-page elements, especially for those who are colorblind. It’s recommended that you refer to the W3 guidelines for online accessibility, which stipulate a contrast ratio of at least 4:5:1 in larger elements, and 7:1 in regular ones.

Provide captions for video content. You’ve probably watched a video in a different language with subtitles before, so you’ll know that if these captions weren’t present, you wouldn’t have been able to understand what was being said.

Visitors with hearing impairments who watch videos on your site will face the exact same issue, even if the content is in their mother tongue. As such, you should always include subtitles, as well as full transcripts for any audio material. This can have SEO benefits as well as being good practice for accessibility.

1 comment about "Designing For Inclusion: Tips For An Accessible Website Design".
Check to receive email when comments are posted.
  1. Jonathan Hassell from Hassell Inclusion, October 1, 2020 at 12:41 a.m.

    Great to see digital accessibility getting an article in MediaPost. Many thanks!

    One addition - people who are older, like the baby boomers who are the largest generation in history, also benefit from accessibility. That's another 20% of a website's potential user base.

    For International Day of Older People, we've created a handy downloadable poster to summarise what site creators can do to turn this audience into customers, by caring for their needs in their design - check it out here: https://www.hassellinclusion.com/blog/poster-designing-for-older-people/

Next story loading loading..

Discover Our Publications