Accessibility enables people with disabilities to perceive, understand, navigate, interact with, and contribute to the web. Imagine a world where developers know everything there is to know about accessibility. You design it and they build it… perfectly. In this world, only the design itself can cause people with disabilities to have trouble using a product.

These guidelines will cover the major things you need to know in order for your products to be “design-ready” to meet the minimum of standards in Section 508 and the Web Content Accessibility Guidelines 2.0. The rest will be up to development and quality testing.

1. Accessibility is not a barrier to innovation.

Accessibility will not force you to make a product that is ugly, boring, or cluttered. It will introduce a set of constraints to incorporate as you consider your design. These design constraints will give you new ideas to explore that will lead to better products for all of your users.

As you read through these guidelines, consider that we don’t want to design for our design peers.

Design for the diverse set of users who will interact with your products.

clear_and_sharp_eyes-wallpaper-1600x1200

Design for everyone.

Eager to escape the tech bubble for a weekend, Designer Dude and his circle of start-up friends went to Yosemite, where he spent most of his time dribbbling on a slackline near their basecamp

Design for everyone.

This can include people who are blind, color blind, or have low vision, those who are Deaf or have hearing difficulties, people with mobility impairments which may be temporary or permanent, or people with cognitive disabilities. Design for people who are young, old, power users, casual users, and those who just enjoy a quality experience.

Embrace these accessibility guidelines as you would any set of design constraints. They are part of the challenge of creating amazing products.

2. Don’t use color as the only visual means of conveying information.

This helps users who are unable to, or have difficulty with, distinguishing one color from another. This includes people who are color blind (1 in 12 men, 1 in 200 women), have low vision (1 in 30 people), or are blind (1 in 188 people).

Use color to highlight or complement what is already visible.

Fields in an error state

How many fields are in an error state?

Most who see this in grayscale say the answer is one, the “human verification” field. That is because the triangle with the exclamation mark inside indicates that something is amiss.

Now look at this same screen in color. How many fields are in an error state?

Turning on the color reveals a different story altogether.

With color the answer becomes, “all four”.

There are many acceptable ways to make this form visually accessible. You could put the red triangle icon in all of the error fields. You could use text to indicate and explain why a given field is in error. You could use tooltips, thick borders, bold text, underlines, italics, etc. The choices are infinite, but the only rule is to use more than color alone.

How would you design this signup form so that color isn’t the only visual means of showing a field with an error?

Update: It turns out that the accessibility issue described above in the PayPal example is caused by the LastPass plugin in my browser. Thanks to Tony Amidei (@subface) from PayPal for pointing this out to me. As designed, the triangle icons should always appear on fields in an error state.

3. Ensure sufficient contrast between text and its background.

According to the WCAG, the contrast ratio between text and a text’s background should be at least 4.5 to 1. If your font is at least 24 px or 19 px bold, the minimum drops to 3 to 1.

This means that when text is 24 px, 19 px bold, or larger, the lightest gray you can use on a white background is #959595.

#959595 text on a white background.

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.

#767676 text on a white background.

There are some great tools that can help you find an accessible color palette for your designs including Color Safe. There is also WebAIM’s Color Contrast Checker, which will let you test colors you have already chosen.

4. Provide visual focus indication for keyboard focus.

Let’s take a moment to give thanks for the reset style sheet and all of the utility it has given the modern web designer. Without reset style sheets, it would be much more difficult to create a consistent experience across different devices and browsers.

:focus {outline: 0;}

This single line of CSS makes it nearly impossible for a sighted user to use a website with just a keyboard. Fortunately, since the initial CSS resets were released, many popular ones including Eric Meyer’s have been updated to remove un-styling of the :focus pseudo-class.

Continue reading on medium.com

1 Comment
  1. Vlad Mustiata 4 years ago

    Wow! This article is unreal. You’re so good mr. Ses!

Leave a reply

Your email address will not be published. Required fields are marked *

*

Log in with your credentials

Forgot your details?