Accessibility is the New Black. How to Create Inclusive Design

In this article, you’ll learn why and how to design an accessible interface, and as a bonus for everyone, you’ll get a little accessibility checklist in poster format. 

Without a clear and user-friendly UI/UX design, there is nowhere to go. Users may leave the site or close the application because of the low level of accessibility of the product.

What is Inclusive Design?

Accessibility is an outcome that can be measured and tested against certain criteria. Accessibility of the web interface means that any users, including people with disabilities, can freely perceive and interact with the interface. Inclusive design is a broader concept. Its essence is to create accessible and ethical products and services. The motto of the Xbox controller perfectly describes the importance of inclusive design: “When we all play, we all win.” Following the requirements of accessibility is exactly what helps to develop more user-friendly products for all users. 

Note the self-service machines at McDonald’s: In the right corner, you will notice an icon that makes the interface collapse into a responsive version (responsive design involves creating applications that can stretch to any screen size). Why is this needed? So that users with various disabilities (not only those with disabilities but also those with temporary injuries, children, or people of short stature) can freely choose and order what they want.

The Books app on iOS lets you read the way you want: choose a font from a range of options and the colors of the pages that are comfortable for your eyesight. This makes the reading experience enjoyable for everyone.

To make the interface as accessible as possible and take into account the needs of different users, you first need to understand the main types of constraints. Everyone faces restrictions. The only difference is whether they are permanent, temporary, or situational.

In the world of web design, Microsoft‘s classification of constraints is considered one of the most popular. So it will be good to refer to it as well:

• Permanent limitation. For example, if the user has various congenital features of vision or hearing.
• Temporary. It could be a broken arm or a cast on the neck, i.e. restrictions that will take some time to remove.
• Situational. For example, an application interface for nurses who greet patients at the reception desk. The limitation is that the clinic is noisy, and the nurse cannot be distracted by extraneous sounds as well. In this case, the designer should emphasize bright, large, and pop-up interface elements.

In one team’s practice, they develop a design app for fence builders. These guys go to the site, take all the necessary measurements, enter them into the app, and calculate and create an approximate design in the app. Often these are people who also work in the shop, sometimes with hand injuries. Their situational limitation is that they may be measuring outside, in glaring sun or rain, or with one hand because they are holding tools with the other. When working in the workshop, noise and vibration complicate the interaction. In this case, they encounter visual and physical situational peculiarities.  Given these limitations, they design the interface with a larger touch area, large open fonts, contrasting colors, prominent margin outlines, and ample space between components.

Let’s look at the different types of constraints in more detail, with examples of accessibility:

• Motor. Complete or partial limitation of motor skills (speed, strength, ability to move, coordination). Microsoft developers have released the Xbox Adaptive Controller, a device that has two huge buttons and a large number of outputs/inputs, where you can connect joysticks, mice, and buttons. Thanks to this, a person can build his own custom device for games. Even the process of communicating with the product is completely inclusive. The developers thought of three prototypes for packaging, tested them with people who have motor disabilities, and chose the most convenient option.
• Visual. This includes congenital or acquired loss or impairment of vision (age-related features, trauma, glaucoma, cataracts, color blindness, etc.). On some government sites, you may notice an eye-shaped button in the upper right corner. When you click on it, the interface becomes black and white and scales significantly.
• Auditory. Any features that make it difficult to hear information. The pioneer with the gold standard of accessibility here is YouTube. The company was the first in the world to subtitle video content.
• Vocal. These can be various types of voice limitations that make it difficult to interact with the interface via voice commands, ranging from accents to angina to congenital muteness. In this comedy video, characters in Scotland cannot use the elevator with voice commands because of their accent. The clip is funny, but the situation is sad.
• Cognitive. Peculiarities and disorders of attention, perception, and processing of information (autism, dyslexia, age-related dementia). This may also include epilepsy, as for this disease requirements are separately spelled out in Web Content Accessibility Guidelines (WCAG)—guidelines for the accessibility of web content. Designing an interface with cognitive features in mind is closely related to basic usability practices. Cognitive features can also be temporary. For example, the effects of alcohol on a person or clinical depression.

A year ago, a famous ideologist of inclusive design held a lecture. He said that when young people design, they don’t think about the fact that their grandparents can use their work. These are the people who no longer have sharp eyesight. So remember: the main tool that each of you will find is empathy, the ability to expand the picture of your user’s vision and to put yourself in the other person’s shoes.

Web Interface Accessibility Standards

Let’s take a closer look at Web Content Accessibility Guidelines (WCAG)—guidelines for making web content accessible. It’s the most widely used standard in design development. The document details the requirements for site structure and code, images, and sounds, with links to explanations, techniques used, and common errors.

The authors of WCAG distinguish three levels of accessibility:

• A is minimal. Does not affect the visual component of the design, which is especially valuable for image and aesthetic works (such as the awwwards).
• AA is the gold standard. It is often a requirement of international companies.
• AAA is the highest, an “asterisk” case. Worth using when you are sure that the product will be used by a large number of restricted users.

In addition to standards, this document describes 4 principles of online accessibility: perceivable, operable, understandable, and robust. You can read more about what each one means here.

WCAG is not the only standard used to create accessible web interfaces. There are other such documents. For example, in the U.S., federal law Section 508 and the Americans with Disabilities Act (ADA) are a set of rules governing online accessibility. Of today’s international documents, the WAI-ARIA is worth mentioning. These norms appeared in response to the fact that sites began to use interactive elements that are not available to all (for example, drag and drop, complex widgets, and dynamic elements).

How to Create Inclusive Design

Based on the concept of atomic design, here is a checklist that may be useful to you. In the case of the project, the team was aiming for AA compliance. What is the essence of atomic design? It’s about moving from abstract to concrete. They started with tokens (what cannot be divided into smaller particles, e.g.. typography, palettes, iconography, grids), then moved on to atoms (buttons, input fields), then to molecules (drag and drop, file uploader), and so on to organisms (modal windows and tray), and finally to pages.

Statistically, 70% of the body’s sensory receptors are in the eyes. Therefore, vision is considered the main way to interact with the interface and read information. Consequently, it makes sense to start working on accessibility with visual limitations.

Let’s Start With the Palette

There was a task to create a palette for the light and dark theme, taking into account the requirements of accessibility. During the design of the new palette, the team realized that the traditional “stretch” method would not work here and that each color had to be selected manually.

Before they started testing the palette, the system used orange as the CTA accent color. However, after testing the text and the buttons themselves, it was decided to change from orange to purple.

To make sure that the standards are met, you need to test each item on all possible background variants, as well as all the basic states, including disable.

Important note: not all elements have to pass the contrast test. If an element is not important for perception, and a person will not miss anything important without seeing it, feel free to use light colors and shades. For the test, you can temporarily remove such elements from the interface to make sure that they do not affect the overall context.

Don’t Rely on Color Alone

People with visual peculiarities will not be able to distinguish one state of your design from another. You have to be imaginative and think of all the possible identifiers. For example, stripes, check marks, underlines, and circles. Anything that will not “cut” the eye and yet will only improve the perception of the design.

Speaking of the state of error, there is an analogy with a traffic light. When creating an inclusive design, you shouldn’t rely on color. It’s better to use different shapes. Look at the colors in which the same blocks will be seen by a person without visual peculiarities and a person with color blindness.

When you use a form in the design to distinguish between these states, the user is quicker to consider the information about which state they are seeing.

Brush up the Shapes

Let’s say you are working on a Master Data Management product, and 80% of the entire interface is formed. In this case, one of the main patterns of user-system interaction is the ability to enter and change information.

Basic recommendations for making the forms accessible:

• All fields must have readable, fixed labels with meaningful text.
• Field boundaries should be clearly delineated and visible. Do away with the underline as a field indicator (as in older versions of material design).
• Use the placeholder with caution if you want to post important information. It is better to use separate informational banners.
• Important instructions and hints should be visible immediately.
• Groups of fields must be logically grouped and labeled with a title.
• Mandatory fields are clearly highlighted.
• The requirements for the data to be entered should be outlined immediately.
• Make sure there are instructions to help the user correct the error if any occurs.
• When the form opens, the first field must be in focus state so that the user can start entering right away.

Typography and Readability

Accessibility-appropriate typography includes many nuances: semantics, typeface layout and openness, font size, color, and the presence of unique letters so as not to confuse O and 0, for example.

Let’s list the general requirements for accessible typography:

• Use a readable font size. For AA level, this is a minimum of 16px with a contrast of at least 4.5:1 and at least 3:1 for the large text of 24px. Exceptions are logos and decorative text.
• One of the main features of a readable font is recognizable character shapes. To this end, unique characters are used. In addition to zero (0) and O, the number three (3) and the letter Z, and so on, may be similar.
• Depending on the use case, it is worth choosing the right typeface. There is a basic rule of thumb to use sans serif fonts for interfaces and serif fonts for long documents, but this is not an absolute rule. More important is the openness of the characters and the distance between the letters (WCAG standard is 0.12 times the size of the font). To get a basic knowledge of this topic, you can watch a lecture by Alexandra Korolkova, the mother of all Cyrillic fonts.
• Consider the optimal line height. The recommended value from WCAG is line-height 1.5 times the font size, and paragraph spacing twice the font size.
• Don’t make lines too long or too short. 45-75 characters are acceptable, and 66 is optimal.

If you manage to keep all these points in the design of, for example, a supermarket grocery delivery site, you will not only make it possible for people with congenital visual impairments to interact and buy goods, but also help a guy with dyslexia, a girl ordering in the subway, and elderly parents. The result is a win-win situation for everyone.

Layout and Layout Structure

When typing the text of this article in Google Docs, an automated style system is usually used to group the sections. If everything is done correctly, you will see the appropriate hierarchy in the Document Structure menu. Approximately the same principle is used by the HTML tags for the headings of the site and the semantic sections (h1-h6).

Why is this needed? Screen reader programs read and speak text from the screen according to these tags. If the text for titles is in other tags (such as p or div) or the order in which they are used on the page, then the person will hear the information in the wrong order.

Moreover, it allows you to create a correct visual hierarchy and reduce the cognitive load on the person. Observe yourself: when you open a new site, the first thing you look at is large contrasting elements (headers and buttons, for example). Thanks to them, you will quickly find what you need, and perform their tasks. This will have a direct impact on the usability of the site and your user experience.

For the same reason, do not allow cases where “owls are not what they seem,” that is, creating an element that looks like a button does not make it a button. Stick to consistency and highlight interactive elements—buttons, links, icons, text fields, etc.—with special styles and tags.

Duplicate Visual Content With Text

According to Jacob’s Law, users spend most of their time on other websites, not on yours. So there are some patterns and visual techniques that are familiar to everyone and have become standard. For example, everyone knows that the icon with three lines (the burger) opens the menu and that clicking on the gear icon opens the settings. However, to increase accessibility, standards recommend duplicating them with text. If your product uses unique icons with non-standard meanings, you should certainly duplicate them with text.

The MDM system uses icons with meaning, for example, app vision, claim, and device lookup. Try without a caption to guess which icon means what 🙂

Thus, despite the fact that the product is used by people with special professional competencies, it’s better to duplicate the names of icons in the interface:

Use alternative text

There are situations when you can’t duplicate all the icons with text. Then alternative text—a special description of the image, which is read by the screen reader—comes in handy. In this way, the user understands more quickly what is shown in the illustration.

Here are basic requirements for writing alternative text:

• Make sure that the signature does not duplicate the text you have already written.
• Use the phrases “Picture of something,” and “Illustration shows,” because the screen reader reads information without context. It doesn’t understand that you’ve gone from one block to the next.
• Decorative images don’t need a description if they don’t have any meaning. For example, the photo of the cake in the example below does not need alt-text.

Think About the State of Focus and Keyboard Access

It is worth considering how a person can interact with the interface: with a computer mouse or keyboard? Or can he carry out commands by voice and gestures? By the way, the latter has been actively developed recently. Studies show that gesture control reduces cognitive load when driving.

In the case of the project, the team took into account user navigation using the mouse and keyboard. This means that the documentation for the design system provides examples and highlights differences in interaction.

The team starts drawing with small components (atoms, molecules) and then increases to the scale of screens and modal windows.

Write, Abbreviate, and Know the Basics of UX Writing

From the text on the button it should be clear what happens after you click

Same with other labels and titles—if it’s a modal window to create a new user, the title and name of the button should be appropriate. This reduces cognitive load, increases predictability of behavior, and improves the experience of interaction with the screen reader. As a consequence, the usability of all users is improved.

Use simple language and avoid niche terms

It is important to use simple and clear words. The user may not understand the meaning of a saying, an idiom, or a technical term. Keep in mind that the computer skills of your target audience may also vary. Today, the term “digital diversity” is increasingly being talked about. In short, it is about accessibility and equality of all people in the use of digital products, regardless of their level of computer literacy and education. It also means accessibility in mastering the necessary digital skills by all segments of the population.

Watch the order of the text

The screen reader moves across the screen from left to right, top to bottom. All of the elements the user needs to perform the task must be placed before the interactive elements. As in the example below, the Terms and Conditions section has been moved above the button, because in the first case the user may reach the Submit button and think it is the end of the screen.

Auditing and Testing

To understand whether your site or design meets the basics of accessibility, an accessibility test is performed. To begin with, let’s distinguish between two areas of an accessibility audit: the existing product or the design. The list of criteria for both is identical, but the techniques are different.

You can test the finished site in two ways: manually or with automated tools.

A manual site audit begins with the compilation of relevant criteria for your product. If very superficial, it will be: 

• Low-performance simulation. To check how the site displays on devices with a slow internet connection, set Slow 3G mode in the Inspect console and see how the product loads and works. Is the user getting the necessary feedback from the system at this time, and is the skeleton or looper working?

Facebook handles weak signal situations with a neural network that analyzes each photo and assigns it alternative text such as “girl with a bouquet of flowers” or “cup of coffee.”

• Contrast testing. In addition to automated programs, you can test the readability of the text manually. An old monitor might come in handy for such purposes. You can use it to check the visibility of important interface elements.
• Install a screen reader. If you really want to walk in your user’s shoes – install a screen reader and use it to go through the basic user flow of your user. But if you can, it’s better to do this type of testing with real users (read the article about why blindfolding and sitting in a wheelchair is a bad idea). As in other cases, the main axiom of UX works here: “You are not your user.”
• Put down the mouse, and take hold of the keyboard. The principle is the same as the previous one, but now try to perform user tasks from the keyboard. It may turn out that many interface items are inaccessible with this type of interaction.

There is an enormous amount of software for automated testing. Try different programs and choose the one that is more convenient for you.

Below you can find three services that work on the same principle: you enter the address of the site and get the analysis. They were chosen because they produce results in languages that designers can understand:

• TENON is an automated assistant for availability testing.
• WAVE, from the WebAim service, checks the page according to the WCAG standard.
• MAUVE allows you to configure analysis parameters such as compliance level, resolution, and standard version. In addition to the compressed summary, it allows you to download a presentation-ready PDF with graphs.

And here you can find a list of 159 similar services for all tastes.

In the design phase, only the contrast can be tested automatically. You can use the Stark plugin for Figma, Adobe XD, and Sketch.

Explain to the Customer the Importance of Accessible Design

There may be several reasons why businesses should implement accessibility standards:

• The legal side. This is required by the law of the country where your customer is located and where the product is sold. The court cases of Netflix and Apple, who missed accessibility requirements in some of their products, are not unheard of.
• Ethical. You need to ensure equal and full access to the product for all users. People live in a wonderful time when the words diversity, inclusivity, feminism, and eco-friendly are in the news every day. This is a new reality, in which the life and comfort of each person and society as a whole become valued.
• Economic. Tell the client about the numbers. For example, starting at age 30, a person’s vision decreases, and by the age of 60, it significantly deteriorates. Gather statistics about the number of people with disabilities among potential users.
• Improving usability. As it was said at the beginning of this article, “When we all play, everyone wins.” After all, the most basic accessibility requirements are the same as the same usability heuristics, and implementing them will improve the user experience for everyone.

To make the customer hear you, refer to user needs and implement inclusive design principles yourself if possible. As the saying goes, “volunteer as tribute.” Implementing basic accessibility requirements won’t make critical design changes, but it will change the interaction experience for many users.

When talking about visual design changes, and getting carried away with accessibility requirements, there’s a risk of overdoing it. This is what the WCAG standards page looks like—100% accessibility, 0% aesthetics:

Many organizations, while prioritizing accessibility, forget about the emotional and aesthetic components of design. As 83-year-old Don Norman points out in his article, when companies create things specifically for older people, ugly things come out that scream, “I’m old and can’t function!” Affordable design, however, does not equal ugly design.

Conclusion

By going through these steps, you’ll be able to develop a modern and truly accessible design. And to check now whether your design or website is inclusive and what you can improve on, here is the accessibility checklist. Follow these steps, and you’ll be able to create more inclusive products.