Accessibility
beta

The main thing that designers should be concerned with regarding accessibility, is contrast ratios. This refers to the degree of contrast when text appears over a background. The RGB values of the background color and the text are divided up, run through a formula, and the resulting ratio must be greater than or equal to 4.5:1 for normal text, and 3:1 for large text (at least 14pt bold or 18pt normal.)

Note: This contrast requirement applies to text only, not icons, images, etc.

Resources

The text is not compliant.

Contrast ratio: 1.9:1

clear
The text is compliant!

Contrast ratio: 5.4:1

done

Icons should be labeled wherever they are used, either with a browser tooltip or with a written text label.

In addition, you shouldn’t use color alone as an idiciation of status or change. since those who are colorblind will not be able to see the difference. See the examples below for the correct usage.

Symbol Status
PMDV
LMST
clear
Symbol Status
PMDV
Stopped
LMST
Active
done

Our products should provide equal access for users with mouse and/or touch access, and keyboard-only users. Mouse/touch users access the UI by clicking/tapping on elements directly, while keyboard-only users access the UI by using the tab key to focus on elements sequentially.

When the keyboard user hits the tab key, the browser will jump to the next focusable element. Focusable elements are things like buttons and links, that are intended to be used interactively. Non-focusable elements are things that are not intended to be interacted with, like headers, divs, or spans.

Best practice is to use focusable elements for interactive controls, and lay them out logically. This means that elements should focus from left-to-right, top-to-bottom.

noncompliant keyboard accessibility
clear
compliant keyboard accessibility
done