Design For Inclusiveness And Accessibility

Have you ever wondered what inclusiveness and accessibility are and how to put this in mind when designing new products? This article would help explain these two UX terms and enlighten everyone about this.

Accessibility & Inclusiveness

Accessibility describes how many people can use a product and this involves designing for people with various types of disabilities, such as vision, hearing, mobility, cognitive, etc. While Inclusiveness is basically designing a product that everyone can use.

The outcome or end result of a design project is the main aim of accessible design. It is based on guidelines published by various governmental and industry groups, which make sure people with disabilities can effectively access websites and other digital products.

Why Should Products Be Accessible & Inclusive?

As designers, we need to make sure that we create products/experiences that everyone can use and participate in equally. It shows how user-centered our products are and how we place users first.

According to Wikipedia, as of 2020, there are reportedly over 27 million Nigerians living with some form of disability. One billion people, or 15% of the world's population, experience some form of disability according to WHO. Considering the needs of the diverse sparks innovation as everyone can use these products even though they are originally meant for solving problems for users with disabilities.

With accessibility guidelines that are already published and available online, designers can create products to understand these rules and consistently apply them thereby making sure that every user need is understood and catered for. It is always advisable to start building for inclusion and accessibility at the start of your product journey as it would require less time and cost than doing it after. Although, if accessibility wasn't considered at the initial phase of the project, it doesn't stop designers from including it in new versions/updates of their products.

I recently had to teach my team about accessibility and it was a very nice experience. We had designed a product that had low contrast. While trying to fix that issue, we had to carry out tests with diverse users just so we know that our product was good to go. The way we saw the designs wasn't how diverse users saw it and it opened our eyes a lot.

As designers, we need to let go of our biases and try as much as possible to make sure that whatever product we have follows the accessibility guidelines and is usable by everyone.

Designing For Accessibility

Here are some tips to help when designing for accessibility

• Don't depend entirely on color to pass information

This is useful for users who are unable or have difficulty distinguishing one color from another. People who are colorblind, have low vision, or are blind are included.

• Make sure there is enough contrast between the text and the background

The WCAG recommends a contrast ratio of at least 4.5:1 between text and background. The minimum drops to 3:1 if your font is at least 24 px or 19 px bold.

This guideline assists users with low vision, color blindness, or deteriorating vision in seeing and reading texts easily.

This means that the lightest gray you can use on a white background when text is 24 px, 19 px bold, or larger is #959595 while for smaller text, the lightest gray you can use on a white background is #767676. If you have a gray background, the text needs to be darker.

There are some great tools to check for color contrast and my personal favorites are Contrast, Web Aim Contrast Checker and A11y Color Contrast Plugin

• Avoid the use of "hover" in your design

Users who use speech recognition and keyboard-only movements might find this difficult to interact with. Seeing as they can't interact with the option to hover, the product would be useless to them and would be deemed as inaccessible. How can we expect a keyboard-only user to navigate to where a button would be if hovered if they can't see it exists on the page?

• Ensure form fields are properly labeled

Ensure that each field has a descriptive label next to it. Labels in left-to-right languages are typically positioned to the left or above the field, with the exception of checkboxes and radio buttons, which are typically positioned to the right. Make sure there isn't too much space between labels and fields.

• Include Alt-text in media contents

Alt-text is the written copy that appears in place of an image on a webpage if the image fails to load on a user's screen. This text helps screen-reading tools describe images to visually impaired readers.

Thank you for reading my post. If you’d like to see more of my work and connect with me, my contact information is below. Please also let me know what you think in the comments section.

Follow me on Behance

Follow me on Dribble