Designing for Diversity: How to improve diversity in design

How much time in your daily life do you spend online? Especially now that we have been amidst a global pandemic for over two years. How did you go about your Holiday shopping? How do you pay your bills nowadays? On a lazy night, how do you order your food? More people are starting to rely on the internet. They use it for work, school, communication, and much more.

The internet plays an integral part in the lives of many of us. Yet, many do not know that everyone's experience with this resource is different. The number of people who have a disability is around one billion people worldwide. For them, access to the internet and its ease of use is not always promised.

Designing with inclusivity in mind can help to encourage diversity in design. The inclusive design tries to consider diversity, especially accessibility. So, no obstacles should exist in people's way of using digital products and services.

What is an inclusive design?

Inclusive design is when you are designing for as many people as possible. For example, for people with disabilities, a loss of a limb can make it hard for them to use said technology. By recognizing this, you can use inclusivity to overcome their disability.

Acknowledging that exclusion can occur to anyone is essential for inclusive design. The sooner we start to be inclusive and supportive of accessibility in our designs, the faster we shift our mindset. We can go from seeing accessibility as a limitation to seeing it as an opportunity to give a better experience to a more significant number of people.

It is better to design for diversity than design for all.

Many people will ask what the differences between accessible and inclusive design are? Are they not the same thing? What about universal design? The difference is where the focus of the invention is going towards.

The inclusive design does not mean that you are creating for everyone. In inclusive design, you create something that can adapt to everyone's needs. The accessible design focuses on providing for the needs of people with disabilities.

A person that is disabled must be able to gather knowledge in the same way that a non-disabled person does. Although it may not be that simple and accessible, a design must enable equal access to the benefits and opportunities offered by technology and equal treatment when utilizing it.

Universal design is also another term that is often associated with inclusive design. It is the process of designing and composing an environment accessible, understood, and utilized by everyone, regardless of age, size, skill, or disability. An environment should be created to satisfy the demands of everyone who wants to use it.

Universal design generates goods, services, and surroundings that meet everyone's needs by considering the different wants and skills throughout the design process. This is not a need that benefits a small percentage of the population. Everyone benefits when an area is accessible, functional, practical, and enjoyable.

When using universal design, designers might find themselves searching for the "average user". They will fulfill the needs and wishes of that person. While inclusive design challenges designers to think more outside the box. It also encourages them to better engage with their target audience to understand the consumer's actual wants and needs.

What are digital accessibility and the guidelines around it?

Digital accessibility is the idea of creating websites to guarantee that users with different needs may have a seamless and easy online experience.

Since the internet has become an essential part of our everyday lives, it should be accessible to everyone, regardless of their ability. As a result, companies must increasingly consider digital accessibility while designing and providing a digital experience on their websites.

Accessibility is broken down into four basic principles by the Web Content Accessibility Guidelines (WCAG). Four concepts make up the industry-standard rules for web content accessibility. They are Perceivable, Operable, Understandable, and Robust. Here is an explanation of these ideas to help you learn the basics of digital accessibility.

P.O.U.R. principles

Perceivable:

To be perceivable, the interface and its content must be shown to a user to understand. Information that is not delivered in an easily understood way is inaccessible.

This includes giving text to individuals who cannot hear and audio for individuals who cannot see. It does not mean that all text should be read aloud. The information should be readable by screen readers and other assistive technologies.

Ask: Is there anything on the page that a user who is blind, deaf, has limited vision, or is colorblind would find hard to see?

Operable:

When accessing the internet, not everyone uses the traditional keyboard and mouse. Some persons use adaptive devices or alternative technologies to accommodate disabilities or preferences. No matter what type of input device an individual uses, all functions must be functional, especially those connected to navigation or dynamic elements.

Imagine a student who has undergone serious surgery on their hand or arm and cannot use a mouse. This student now must use a keyboard to navigate, and your website should offer keyboard navigation into each drop-down menu. As well as the option to pick a link within a menu or move past the menu and into another aspect of your website.

Ask: Is it possible to use a keyboard to execute all the features on our website? Can the users control the website's interactive parts? Is it simple to do things on the website?

Understandable:

Users may perceive and use a website, but this does not mean that they fully understand it. Websites that are easy to understand use simple, straightforward language and provide simple functionality. When a user performs an action, the link between the action and the outcome should be clear.

The navigation on a website should be the same throughout it. The flow of the form should be clear, and the labels should be evident. If a user must complete a process, sufficient instructions should be provided. Useable websites are automatically more accessible. This is referred to as usability rather than accessibility.

Ask: Is all the content on the website presented straightforwardly? Is it simple to grasp all of the interactions?

Robust:

Your website must be capable of supporting and being accessed on a wide range of devices, including assistive technology. Even as technology and user agents advance, content must remain accessible and interpretable.

Validators for HTML have been around for a long time. Robust is perhaps the most machine verifiable of all the POUR concepts. Many automated accessibility solutions are also available. Of course, since machines do not grasp semantics, they cannot decide whether a specific element should have been utilized. They can only verify the accuracy of what they see with their own eyes.

Ask: Can the website only work with the most recent browsers and operating systems? Is the website built according to the best standards?

Five ways to improve accessibility

1. Check the color contrast on your website.

About 2.2 billion people have moderate to severe vision impairment. Many of us would not think twice about looking at a block of writing on different color backgrounds. Texts lacking contrast from the background can be a headache to read to people. Making your website WCAG 2.0 compliant will make their lives easier and help them engage with your site more freely.

According to the WCAG, the smallest contrast ratio between some text and its background should be 4.5 to 1. For bigger fonts, the ratio drops to 3 to 1, starting at 18pt for 14pt bold. Color Safe is a handy tool for choosing a color palette accessible for your work. You may also use WebAIM's Color Contrast Checker to evaluate your previously selected colors.

2. When displaying valuable information, do not rely on color.

Color is a powerful visual tool in both the actual and digital worlds. It adds presence, conveys attitude, and aids in information separation. Color has design advantages, but it can be inefficient when conveying information.

Never use color as the only visual signal for displaying crucial information. Color differences alone can be hard to distinguish for someone with color blindness. When presenting data to others, use an indicator other than colors, such as text labels or patterns.

3. Make your typography accessible

You might feel that a text size of twelve is suitable for your website's readers. Yet, the readers may disagree. Users might struggle to read such writing, and they may leave your site without returning. As a result, keep in mind that users should always choose the font size. It will make reading a far more pleasurable experience.

For people with disabilities, specific font sizes and styling can be troublesome. Screen readers, for example, frequently neglect stylistic methods like strong and italics, rendering these styles worthless for blind users. If the writing is too small, individuals with limited vision or color blindness might not see it, while others may struggle to understand the italic typeface.

4. Use alternative text for images and non-text content

Alternative text gives way for users who cannot view images to get information. It is helpful in people since it helps the text read aloud with assistive technology such as text to speech, speech input software, and websites that support the speech feature.

If a picture cannot be seen, the alternative text provides the image's description. It is a text-based method of describing vital, helpful information about an image. Because it lends more meaning to the text nearby, it gives our viewers another technique to perceive the image.

5. Create usable focus states.

Focus states are essential for ensuring that the user interface can be navigated without using a mouse and providing that every user has a positive experience. Using a keyboard or voice-activated software or technology, people can browse and engage with a website using a focus state. Most web designers and developers often overlook focus states, which shows that a sizable chunk of the population has a negative experience interacting with these user interfaces.

Takeaway

In web design, diversity is often a challenge for designers. However, it also presents a chance to create better solutions. We can bring new insights, new perspectives, and a more comprehensive range of filters to the table. By recognizing these challenges and working with diversity, the industry could evolve past its old ways.

This new mindset can allow us to impact a new age of acceptance and produce more creative solutions in our products and services. The most important part of diversity and inclusion is getting rid of laziness and ignorance. We can create a better, more inclusive society if we work together.