4 keys to inclusive web design
Create a clear visual hierarchy, use large text on each page, and always include captions.
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.
Make interactive elements and use large text. According to Google guidelines, touch targets like icons and links should be at least 48×48 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.
Edward James is CEO of Go Up, Ltd. Read more of his writing on SEO at Media Post.
I think one of the things people miss a lot is captions for video content. I think search engines are so sophisticated now that keyword centric captions (around the wording of course) have an effect further down the line. Because adding video to your pages increases time on page and therefore overall engagement score