Things Every Designer Should Know About Accessibility

Accessibility enables people with disabilities to see, understand, navigate, interact with, and contribute to the web. Imagine a world where developers know everything there is to know about accessibility. You design and they build it perfectly. In this world, only the design itself can cause difficulty in use by people with disabilities.

Accessibility is not a barrier to innovation

Accessibility won't force you to make a product ugly, boring, or cluttered. It will present a set of constraints to take into account as you design your tool. These constraints will give you new ideas to explore, ideas that will lead to better products for all of your users.

Design for everyone

This may include people who are blind, color blind, have poor vision, people who are deaf or have hearing difficulties, people with temporary or non-mobility impairments, or people with cognitive impairments. Design for young, old, power users, casual users, and those who just love a great experience. Adopt these accessibility guidelines as you would any design constraints. They are part of the challenge of creating amazing products.

Do not use color as the only way to convey information

Think about users who have difficulty or cannot distinguish colors. This includes the color blind (1 in 12 men, 1 in 200 women), the visually impaired (1 in 30 people), and the blind (1 in 188 people). Use color to emphasize or complement what is already visible.

Give visual indications on the focus of the keyboard

Let's take a minute to tell ourselves that the basic stylesheet has been of great use to modern web designers. Without it, it would be much more difficult to create a consistent experience across different media and browsers.

Let's do a quick exercise: open a tab that leads to the website of the company that makes your phone. Press Tab several times to browse the site. Do you see a focus when you move from link to link? Maybe on some links, but not all? Take a minute to think about the effect of this on people who don't use a mouse to browse the web.

If you are on a Mac, you may need to enable Full Keyboard Access first in System Preferences> Keyboard> Shortcuts. It is downstairs. If you remove the default focus, replace it with something better than what your browser offers.

In the example below, the BBC uses a color bar to show which tab is selected.

Twitter uses both the default focus and a bubble to show focus. The icon also changes from gray to green. These are three different visual ways of showing keyboard users that the focus is on this icon. When creating your own focuses, remember to remove the default state anyway, otherwise, you'll see something like below, where Chrome's blue rectangle goes over the menu's blue background. It's ugly, and it's not because of the accessibility.

Be careful with forms

In recent years, we have experienced a de-evolution of forms. Modern designs have taken a more minimalist approach. Today's forms lack two things that are necessary for accessibility: defined boundaries and readable labels.

It is important to give clearly defined limits to the forms, for users with motor disabilities and cognitive disabilities. Knowing the location and size of the target to click on is important for people who use a standard or adaptive mouse. Cognitively disabled users may have difficulty finding and interacting with spaces without specific clues.

Conclusion

At first glance, it might seem that these constraints limit your creativity. If they have the slightest impact on it, it's because they make you forget the limits of your creativity, as you find visually pleasing designs that allow more users to find what they are looking for.