Accessible Design: The Basics to be Inclusive

Accessibility makes both moral and financial sense. Organizations have an ethical duty to include people with disabilities in their digital journeys, and in the digital realm, there are a number of tools to implement and constantly measure the effectiveness of accessibility. Likewise, integrating functionality that serves people with disabilities often benefits users without disabilities too – for example, 80% of people who use subtitles in the UK don’t have a hearing impairment. Steps to make content accessible can therefore optimize experiences for all users in general.

From a business standpoint, being accessible means avoiding expensive retrofitting down the line. Regulations around accessibility are getting stricter, and companies face high fines for not complying with specifications. In 2021, 2,352 accessibility lawsuits were filed against websites, amounting to millions of dollars in penalties for businesses.

Inclusive design simply has to be part of companies’ strategy moving forward. Not only does it ensure that products and services can be leveraged by the most people, but it also fosters greater innovation in development.

What is accessibility?

Accessibility refers to people of all capabilities being able to find, navigate, and use a website, product or service. Accessibility places heavy emphasis on meeting the needs of people with disabilities, however, it also encapsulates better design and functionality for every user.

Currently, accessibility guidelines are provided in The Web Content Accessibility Guidelines – known as WCAG. Meanwhile, Apple has the Human Interface Guidelines and Android has its own best practices. All these sources offer technical parameters to build accessible platforms, focusing on content being perceivable, operable, understandable, and robust.

Why should designs be accessible?

Design can dictate a user’s experience. It changes how they interact with a space, how they maneuver through it, and how they understand it. For any product or service to truly convey its value, design has to be democratized.

At the same time, accessible design and good design are synonymous. Accessibility inherently overlaps with best practices like mobile web design, device independence, multi-modal interaction, usability, and design for SEO. By taking steps to bake accessibility into design, companies equally improve the quality of their design as a whole. It’s win-win.

Accessibility encourages innovation in design, too. Designers are tasked with balancing accessible measures and aesthetics, plus work with diverse people for user testing, and are shown gaps in areas that they otherwise may not have been exposed to. Accessibility ultimately provides a more encompassing perspective of the design process, which opens doors for designers to experiment with more novel solutions.

Types of disability to be aware of

One billion people in the world have a disability (15% of the global population), and yet very few organizations are familiar with some of the most common types of disabilities that their audiences experience. Below are the most prominent types of disability that designers should be building with in mind.

Visual disability

Common visual impairments include a scratched cornea, scratches on the sclera, diabetes-related eye conditions, corneal graft, and dry eyes. Color blindness is also common, with 300 million people suffering from color vision deficiency. More serious visual disabilities are blindness and ocular trauma.

Cognitive and learning disability

Cognitive disabilities can take the form of speech disorders or people with learning difficulties, such as dyslexia and ADHD. These disabilities can affect a person's ability to plan, focus, comprehend, and reason. As many as 3 out of every 100 people have an intellectual disability.

Motor disability

Physical disabilities can impact upper and lower limbs, manual dexterity, and organs in the body. These types of disabilities can be the result of age, disease, or a condition from birth. In the United States, approximately 39 million people have a motor impairment.

Hearing disability

Both people who have partial hearing and people who are deaf have a hearing disability. Deaf people use sign language to communicate – of which, many exist and are as rich and complex as spoken languages. According to the World Health Organization, more than 1.5 billion individuals live with hearing loss, a number that could rise to over 2.5 billion by 2050.

Remember that these are not all the types of disabilities that people experience, and designers should be conducting their own research to better recognize and understand the capabilities of their users.

How to make User Interface design more accessible?

The foundation for accessible design lies with the three c’s: color, contrast, and content. Addressing these elements won’t automatically make a website or app comprehensively accessible, but they are the minimum areas designers should be prioritizing when it comes to boosting inclusivity.

Color contrast

People with difficulties distinguishing colors may not be able to read text that is presented in a different color. Neither will they be able to digest information that is displayed with poor color contrast. As a rule of thumb, designers should use a 4.5:1 ratio for regular text. For images and interactive content, designers can use tools to check the color contrast, for example, Figma plugin and Adobe Color.

Adobe’s Color Oracle chart is especially useful, as it shows how the screen looks for users with Deuteranopia (users who struggle to see red and green), Protanopia (red) and tritanopia (blue).

Clickable areas

Clickable areas are call-to-actions or input fields, essentially any space that users have to manually interact with. For people with a disability, these areas can be particularly challenging if not designed with an accessible focus.

Focus state

Users using keyboard navigation or a screen reader rely on outlines that appear around links, buttons, and input fields to indicate where they are on the page. Known as focus states, companies need to integrate these into their websites and apps to accommodate users with limited mobility, alongside those who prefer alternative navigation.

Hover effect

The hover effect is when users are shown additional information when they place the cursor over part of the screen. Tooltips and hints can then appear and display text for users to understand what action they can take or why they’re being shown something. In processes that have multiple steps, the hover effect is beneficial for users who have a cognitive disability.

Press effect

The press effect is when users click a button and the button changes state to confirm that it has been selected – for example, the button could ripple or the color of the button could change. For all users, the press effect reassures them that they have taken an action.

Labels and instructions

Users need visible labels and instructions to seamlessly digest information and move through flows. Text should be broken down into H1, H2, H3 formats, with fixed action buttons and steps curated in a chronological manner.

Optimize typography

How text is presented is important to make content accessible. Text should be aligned to the left or the right, not justified – this can be poorly rendered on websites, making it hard to read. Line spacing should be at 1.5x the font size, and paragraph spacing should be at least 1.5x the line spacing. Each paragraph should have no more than 80 words, or 40 words if working with Chinese, Japanese, and Korean characters.

Support for shortcut keys

Shortcuts cater to people using the keyboard to move through a page, and also help people with reduced mobility. The tab key should be enabled to allow users to skip to the next UI item. “Cmd + S” or “Ctrl + S” can allow users to save changes, and “Esc” should let users cancel actions or leave the current stage.

Responsive design

Responsive design advocates for design based on users’ behavior and context. For example, the screen size they’re using, the platform, and the orientation. As users alternate between devices, websites and apps need to adapt accordingly for image size, resolution, and scripting abilities. Above all, the design should automatically incorporate users’ preferences.

Conclusions about accessible design

More people are being brought into the technological fold, and designers have an exciting social responsibility to keep them there, as well as maintain their comfort. To learn more about inclusive design and accessibility for your vertical, speak with one of intive’s experts.

Click and check how we can help your company with web application development to be more accessible.