Expert summary! 8 principles to help you quickly improve page usability

Editor's note: Whether designing a website or an app, ensuring product accessibility during UI design is easier said than done. Logically, there is no upper limit to the level of polishing and optimization of details, but there is a lower limit in terms of ensuring basic accessibility and usability. This article from senior designer Brianna Koch summarizes 8 basic directions and principles for accessibility optimization:

Four years ago, when I just started advocating for designing accessible web pages and products, I encountered many obstacles. Many of my colleagues and friends believed that accessible and well-accessible design was too idealistic. They believed that instead of spending time optimizing product accessibility, they could spend more time exploring user value or increasing revenue for the company. They even believed that accessible design was in direct conflict with these.

I find that this idea often stems from a misunderstanding. Many people think that designing for accessibility means building advanced, specialized features, when in fact accessibility design requires reasonable optimization in everyday design.

This article will help you sort out 8 common design principles and techniques for accessibility.

Small decisions with big impacts

Many UX/product designers’ daily work is a series of small decisions stacked together, which can eventually accumulate to build a large product. However, the problems caused by many small decisions accumulate together and form a huge obstacle, thus blocking some specific users.

What we need to do is to know where the pitfalls are and how to get around them when making specific decisions. In other words, we need to make the right small decisions to improve user usability.

These minor issues usually affect every user, but for users with physical or cognitive disabilities, the impact can be greater.

Make the right choice

I have compiled 8 design principles that will help us further improve the accessibility of our products. Using them well can not only improve accessibility, but also affect the usability of the entire product.

The W3C website has more detailed guidelines for usability design of web content, but the 8 principles I summarized are a more accessible starting point.

Next, let’s take a closer look.

1. Always provide users with a large target area

If the area or interactive element set for the user is too small, and there is no prompt to trigger the hover effect, the overall accessibility will be much worse.

Using a cursor to interact on a large screen usually requires precise operations. If the target area is small and there is no hover-trigger interaction to assist, it will be very troublesome or even a huge challenge for users with mobility impairments.

By providing a larger target interaction area, you can rely less on surprise operations to locate and interact with page elements more conveniently.

When facing the cursor and interactive targets, everyone will more or less overestimate or underestimate the efficiency of their own interactive operations. However, most healthy users will quickly make fine adjustments and corrections in the process to reach the interactive target as quickly as possible. This problem will be magnified for users with behavioral and cognitive disorders. By expanding interactive elements and targets, as well as hovering effects, we can allow users to reach the target element as quickly as possible and reduce uncertainty. These changes can make everyone faster, more confident, and more accurate.

2. Use high-contrast colors

According to W3C regulations, a color contrast ratio higher than 4.5:1 can provide clearer outlines and make it easier for users to distinguish the boundaries of different elements and controls. There are many tools to ensure the correct color contrast, such as WebAIM, a color contrast detection tool.

Users with poor eyesight, color blindness, and low contrast sensitivity will experience more difficulty reading and viewing low color contrast content. Increasing contrast has a direct effect on reducing visual fatigue.

3. Don’t rely solely on color to convey meaning

Likewise, using color alone to convey meanings such as "prohibited" or "done" may not be clear enough in many cases, or even unrecognizable to certain users.

We cannot assume that everyone has a strong and clear color perception ability. Your users may be color-weak, color-blind, have low vision, or even be completely blind. They may even be using a screen reader to read the UI interface. At this time, color is completely ineffective. Use clearer text and symbols to assist color in conveying information. Even when you remove color, the content and text in the UI interface can still work. This is the most important thing.

Colors need to be explained. The meaning of colors themselves is acquired and partly established by convention, but not everyone has a clear enough understanding of them. In different cultures and scenarios, they may even represent completely opposite meanings.

Therefore, it is necessary to add additional explanations to the colors to make the information conveyed by the UI clearer and more intuitive.

4. Add more instructive text labels to links and buttons

The corresponding text on buttons and links should not be simple "yes", "confirm", "cancel". In many contexts, these words can be understood in many ways and may lead to misunderstandings. The ideal situation is to use more clear directions to help users understand the actual function and direction of the button.

This can solve some basic cognitive problems. But the more important point is that with clear direction and descriptive text, visually impaired users who use screen readers don’t have to guess. Using non-descriptive text such as "click here" on a link or "done" on a button is too troublesome for such users to guess what they actually mean. So, this is the core meaning of modifying link text and button labels.

In addition, the color contrast of buttons and link texts should be controlled to ensure that users can immediately notice them when they scan quickly. Therefore, the core of improving accessibility lies in modifying the text to descriptive and optimizing its color contrast.

5. Use meaningful titles and structure

For users, there is a threshold for the readability of long texts, while structured texts are much better in this regard.

Even if there is not much text, the paragraphs are clearly divided, and the subheadings with clear topic summaries always allow users to immediately grasp the core information of the paragraph, so that they will not lose sight of the content when reading. Using a systematic subheading system is also clearer for visually impaired users who use screen readers, allowing them to locate different content more quickly. At the same time, it is worth mentioning that in order to better fit the use of screen readers, the title and the text must be distinguished by different tags, so that it will work.

Similarly, in addition to being summary-oriented, it is also best to use descriptive sentences in the title to help users understand the function of the content and ensure that the relevance between the title and the content is high enough.

6. Use placeholders to demonstrate form content

The form is also one of the most important interface components. In order to keep the interface clean and tidy, it is common to use placeholders to describe the form content. Currently, in many designs, brief text is used to identify what needs to be filled in, such as "email" or "telephone number", but in fact, there are detailed format requirements for filling in these form fields.

When the user starts typing, the placeholder disappears, and the user may forget what to enter or what style to use. Before starting to enter, the user may only take a quick glance for a few tenths of a second and not remember what to fill in. For users with dyslexia, they may not be able to understand the corresponding format of the text for a while.

In order to reduce cognitive load, it is best to directly use placeholders of the corresponding field format to display them directly to users, and inform users of the specific input field through specific text outside the field input box. In this way, there will be no problem of unclear what to fill in before, during, or after input.

7. Help users with clear error messages

When filling in form fields, even with guidance and instructions, there is still a high probability that users will fill in the wrong fields. At this time, error prompts are very important.

However, there are still many things to pay attention to when writing user error prompts. Users will definitely make mistakes when filling out forms. At this time, first of all, make sure that the color contrast of the error prompt is strong enough for users to locate it. At the same time, it is also necessary to take into account users with cognitive impairments and use the simplest possible words to tell users how to solve these errors without them having to guess.

8. Use high-contrast focus indicators

Although most users use the mouse and touchpad for control, there are still some users who are used to using the keyboard. Some people do this for faster operation, while others do it out of habit. When entering multiple fields in a form, using the keyboard Tab key to quickly switch is indeed faster than using the mouse to interact.

When users use the keyboard to quickly switch, the focus indicators of the selected buttons and input boxes need to use the clearest colors possible. Only in this way can users clearly know which control is selected without feeling confused or unclear.

Conclusion

Making control interfaces accessible to a wider range of users has more lasting value for the product itself.