Accessibility Design Guidelines for Inclusivity

What is accessibility and types of accessibility issues.

Why accessibility matters in website design? Top things to consider.

W3C WAI standards for designing for accessibilities.

Accessibility Design Guidelines for Inclusivity

‘Don’t like reading? Click to Listen’

User-centric, clear, and coherent design are some of the most important features your web and mobile applications should offer and so is the accessibility in user interface design. Designing for accessibility enables users with disabilities such as visual or hearing impairments to seamlessly understand, engage and navigate through the website. Therefore, every designer should learn about the significance of accessibility design guidelines. 


What is Accessibility?

According to, ‘Accessibility is the concept of whether a product or service can be used by everyone—however they encounter it. Accessibility laws exist to aid people with disabilities, but designers should try to accommodate all potential users in many contexts of use anyway. To do so has firm benefits—notably better designs for all.’

accessibility design guidelines

Why Accessibility Matters?

Let’s take color blindness, for example. According to color blind awareness, almost 4.5% of the population is color-blind. Meaning it affects around 1 in 12 men and 1 in 200 women worldwide. People affected with this color vision deficiency or CVD can see things clearly just like the rest of us but are unable to distinguish red, green, or blue light, per se. They either don’t see colors clearly or it keeps getting all mixed up. 

Oftentimes designers ignore to even consider designing for such a small group. However colorblind users are also entitled to good design practices like any other human being. So if your website design does not equally appeal to everyone, then it’s probably no good and you are clearly paying no heed to the idea of ‘inclusivity’. Now, how to ensure that your design is adhering to accessibility design guidelines? 


Designing for Accessibility: Top Things to Consider 

The first and foremost step to build an accessible product is to build empathy and install an inclusive design mentality. – says Avinash Kaur, A London-based UX/UI designer in her article: Accessibility design guidelines for UX designers.

Use Bright Color Contrasts

Color contrasts are important for people with low vision, as it enhances their readability ratio. People with visual impairments have decreased sensitivity to certain colors and contrast. According to the World Health Org. (WHO) estimates that there are 217 million people who has moderate to severe vision impairment. So every element on your website should be easily distinguishable from the other.

Be smart about your color contrast choices, use bright colors in place of dull to highlight useful information such as CTA buttons. But try not to rely on color alone because it would make it difficult for people with low visual acuity to understand. Using bright-colored, heavily contrasted bold typefaces can help people with visual disabilities to pick up on meaningful information. You can use the Stark plugin for Sketch to test colors to make sure they have the proper contrast ratio for readability.

One way is to tweak your text placement. You can place light elements against dark backgrounds to make them really pop out. Trello’s color blind-friendly mode is one of the great accessibility design examples. Enable/disable color blind friendly mode on Trello for alternating colors help those with color blindness to differentiate the labels.

Don’t Crowd your Interface 

Another important aspect of accessible design is to steer clear of overcrowded websites. Rather than just throwing the content on the webpage, better to break it down into sections with bulleted lists separated by headings. The use of simple English or language is a plus.

‘People want to be able to skim long blocks of text, regardless of sight or audio, so it’s extremely important to structure your long-form writing with headers, short paragraphs, and other content design best practices.’, suggests the book on design: Writing is designing. 

Companies want to make sure users understand the nitty-gritty about their products, which makes it easier for them to sell. Writing is Designing all about how you can smartly ‘present’ the never-ending details about your products and how you can better write for accessibility such as clarity, the importance of structured messages, and testing the effectiveness of the words.

You can magnify important items on screen for visually impaired people which would make your content easily scannable. All in all, pay close attention to how the visual elements on your websites are positioned or placed. 

Design Focus Indicators 

Focus indicators are visual cues such as underlined content. The line automatically shifts itself to the word you click just as shown on this website.

They facilitate users in navigating through the website and tell them which word is in focus. Focus indicators are mostly useful for people with limited mobility or who are suffering from the carpal tunnel – a condition that causes numbness, tingling, or weakness in the affectee’s hand.

You can build focus indicators according to your brand’s accessibility design guidelines but make sure that useful links, form fields, widgets, buttons, and menu items have them since they are the most important features.

Use Instructions with the Forms

The most common features on websites are forms such as contact us, registeration, log in, feedback, purchasing, etc. Therefore, the importance of creating accessible forms is evident. Every form has the same concept: a couple of text fields followed by a button to perform the action. But when it’s about designing for accessibility, the form should be simple and short.

Forms can be visually complex to use specifically for people with disabilities such as cognitive, people using screen readers, with limited dexterity, etc.  Therefore, only ask what is required and get rid of the information if it’s just optional. Apart from using placeholder text, provide instructions to help users understand how to complete the form. Additionally, if the form is long, divide it into smaller sections and most importantly notify them about the successful completion.


Accessibility Design Standards

The World Wide Web Consortium’s (W3C) commitment to lead the web to its full potential includes promoting a high degree of usability for people with disabilities. The Web Accessibility Initiative (WAI) is an initiative of the W3C.

WAI develops its work through W3C’s consensus-based process, involving different stakeholders in web accessibility. These include industry, disability organizations, government, accessibility research organizations, and more.

For more information, read WAI’s tip on designing for accessibility.

ca flagCanada — Head Office
220 Duncan Mill Road, Toronto, Ontario, Canada M3B 3J5
usa flagUSA
8 The Green Suite # 11684 Dover, DE 19901
my flagMalaysia
Tower A, Level 25, The Vertical, Unit 10, Jalan Kerinchi, Bangsar South, 59200 Kuala Lumpur
pk flagPakistan
605, Block H3, Opposite to Expo Center Gate No 1, Johar Town Lahore