UI Design

How To Design For Accessibility

Accessibility is a term that’s becoming more and more popular within the product design industry, and it’s for a reason. 

In this article, you’ll learn what accessibility is, why it is essential, its types, effects, and a couple of supercharged tricks that will teach you how to design for accessibility!

Person embracing another person and fully accepting them as they are.

What is accessibility

Usually, when thinking about design, aesthetics are one the first things that come into mind, but a proper design will always favor accessibility before looks. 

To design for accessibility means to create a digital product that is inclusive of the needs of all your users, including those with visual, motor, speech, cognitive, or auditory disabilities or who come from different countries and cultures. 

Interaction Design defines accessibility as “the concept of whether everyone can use a product or service; however they encounter it.”

Why accessibility matters 

There are multiple guidelines on how to design for accessibility for users who are deaf or hard of hearing, have low vision, are on the spectrum, or suffer from motor disabilities. 

By learning and utilizing accessibility principles, you’ll enable each user to get the relevant information from your digital product and reach their objective. But, when designing with accessibility in mind, you’re not only helping people with disabilities. Your design will benefit elders with declining sight or someone who recently broke their scrolling arm.

How accessibility impacts users

If you’re still asking yourself why you should design for accessibility, one of the most straightforward answers is because it’s the right thing to do.

Every user deserves equal access to your digital product. 

Accessibility makes your products more usable while presenting the brand as compassionate and dedicated to inclusivity. Designing for accessibility is a win-win situation for both users and your product. 

Good accessibility will make your product more usable for various groups, which could serve as a tactic to make your product more enjoyable for the general population. 

Clean, well-organized products allow everyone to reach their objective more swiftly; such flexibility will help build loyalty.

Types of accessibility

To learn how to design for accessibility, you must understand its types. There are four primary principles of accessibility, and most designers usually know them by their acronym POUR, which stands for:

  • Perceivable
  • Operable
  • Understandable
  • Robust

POUR breaks down web accessibility into these four aspects, which also describe the usual technology challenges people with disabilities face daily.

Perceivable

This means the users identify the content and the elements with their senses. For some, this might be sight, but others perceive things by sound or touch.

Solutions for perceivable difficulties:

  • Text Alternatives: For any non-text content, provide text alternatives in the forms of a large print, braille, speech, symbols, or sometimes even a language that’s easier to comprehend.
  • Adaptable content: Work to develop content that can exist in different forms without compromising information or the structure, such as a more simple layout.
  • Distinguishable content: Simplify the process of seeing and hearing content and separate foreground from background.
A blind woman is holding her fingers on the Braille book
Old man in Hawaiian shirt holding a phone

Examples of people to think about when designing for accessibility – a blind person reading Braille and an older gentleman using a smartphone with one finger.

Operable

To design for accessibility by the operable type, you’ll need to develop solutions for users who can’t use buttons, navigation, or controls. Such solutions include using assistive technology, such as screen readers, voice recognition, or a keyboard. 

For example, some users cannot use a mouse, and some entirely rely on the functionality of a keyboard.

Operable solutions for such difficulties are:

  • Keyboard Accessibility: All functionalities must be accessible with the keyboard. Keyboard accessibility is one of the essential principles of how to design for accessibility on a website because it lowers the gap between the disability types and technologies.
  • Enough Time: Users must have enough time to read and digest content.
  • Seizures: You shouldn’t design content that could trigger a seizure. 
  • Navigable: Find ways to help users navigate, find content, determine where they are, and reach their goals.

Understandable

If you want to design for accessibility by the understandable type, you need to ensure that your users will comprehend the content of your product without difficulties. Your content and open educational resources should follow a consistent format and presentation.

Moreover, they need to have predictable design and usage patterns and have an appropriate tone of voice.

Understandable solutions:

  • Readable: The text must be easy to read and understand – remove unnecessary and hard-to-understand abbreviations, jargon, and symbols.
  • Predictable: Your website or app needs to look and work in ways your users can easily predict
  • Input Assistance: Add helpful suggestions to help your users correct or avoid mistakes.

Robust

To design for accessibility by the robust type, you need to deliver content in a way that is robust enough to be easily interpreted by a wide range of your users. Moreover, users should be free to choose technologies to interact with your product, multimedia, and online documents.

For example, some websites require a particular web browser to run correctly, or some documents are accessible to the reader by a specific operating system. So, if the users don’t have these pre-defined browsers or OS, they won’t be able to experience the website or read the document.

A solution for the Robust type is to maximize compatibility:

  • Ensure your product is easy to access from multiple browsers and devices.
  • Make the most out of assistive technologies.
  • Offer various possibilities for your users to experience your product to the fullest. 
Two hands holding paper in shape of a person in a wheelchair

Designing for accessibility isn’t just about people with physical disabilities. It’s about everyone who might be, even temporarily, impaired to complete their task.

How to design for accessibility – tips & tricks ⚡️

You were wrong if you thought you’d go through this article without getting any supercharged tips on how to design for accessibility!

Let’s review some great suggestions for designing a great product that everyone will love to use.

How to design for users with low vision:

  • Don’t use low color contrasts and small fonts.
  • Make the most of shapes, colors, and text to convey meaning.
  • Sustain from burying the information in the downloadables – put all the data on your website and make it easy to access. 
  • Always follow a linear & logical layout. 

How to make your product accessible for users with dyslexia:

  • Support your text with images and diagrams instead of using chunky blocks of text.
  • Create materials in other formats, such as video or audio. 
  • Keep your content short, sweet, and easy to read, and don’t put too much information on the same page. 
  • Allow users to modify the contrast between the text and the background. 

Optimize your design for users on the spectrum:

  • Avoid using bright contrasting colors – opt for simple and soft palettes instead. 
  • Minimize idioms, metaphors, and jargon – write in a plain, easy-to-digest language. 
  • Use bullets instead of chunking text together.
  • Make your buttons straightforward instead of unpredictable. 

Adjust the design for users with hearing disabilities:

  • If you have video and audio content, make sure to include subtitles.
  • Simplify the wording – people with impaired hearing often have trouble comprehending long and tedious phrases.
  • Combine different types of content – text, images, and videos.

Designing for people with physical or motor disabilities:

  • Create a more extensive clickable section instead of demanding precision
  • Make dynamic content that doesn’t require too much movement
  • Design with mobile and touchscreen in mind
  • Minimize the amount of typing and scrolling – offer shortcuts and automatic inputs. 

So, this is how to design for accessibility!

We hope you managed to bridge the possible gaps in your knowledge about accessibility, its importance, and some of the immediate steps you can take when designing your following product.

If you wish to discuss other helpful ideas on integrating more accessibility into your everyday product designing processes, feel free to reach out to us via our contact form. For more exciting and beneficial product design content, follow us on Instagram.

We look forward to your becoming a part of our ever-growing product design community!

UI DESIGN FOUNDATIONS

Kickstart your career in UI design by building solid UI foundations

Are you a beginner looking to start your journey into UI design? Or perhaps you’ve been self-learning for a while but aren’t quite confident you’ve grasped the basics?

You might like the following
Blog Articles