Quick-start guide to build an accessible website

During my career as a designer, I have assumed that all users have the same experience as me when using digital products. Until this semester when our team had the opportunity to design products for people with disabilities, realizing that there are users with visual impairment, hearing impairment or a walking and movement disability. After conducting the interviews and secondary research with our target users, we figured out a practice of crafting inclusive experiences for all people. This article will show you how to quickly get up accessibility design for a responsive website.

Image for post
Image for post
Use simple colours followed W3Cs guidelines, the colour contrast ratio should be over 4.5:1.
Image for post
Image for post
Use readable fonts, 18px should be considered as a minimum for all content. Common fonts with regular, medium or bold.
Image for post
Image for post
Use a combination of colours, shapes, text to convey meaning, don’t only rely on colours.
Image for post
Image for post
Use semantic HTML: a logical headline order and structuring elements such as header, footer, ul, p.
Image for post
Image for post
Provide subtitles or transcripts for videos, don’t only display content in audio.
Image for post
Image for post
Build simple, consistent and linear layouts. Avoid complex and cluttered layouts.

This guide aims to help designers who wish to take a first shot on designing inclusive websites for different types of users with a disability. However, you can only reach the minimum standard of usability by using these principles. If you want to create a more accessible experience for your targeted users, conducting further user testing should be your next focus.

Hope it helps!

Written by

UX Designer, Vancouver.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store