Accessibilty

Accessible icon requirements

When it comes to accessibility, the Web Content Accessibility Guidelines (WCAG) 2.1 provide several guidelines related to icons:

Our default icons have already been designed to meet accessibility requirements for Level AA compliance. However, keep these considerations in mind if you're modifying the Design System or creating a custom component

WCAG guidelines

1.4.1 Non-text Contrast

The visual presentation of user interface components, graphical objects, and icons must have a contrast ratio of at least 3:1 against adjacent color(s).

1.4.3 Content on Hover or Focus (Level AA)

If pointer hover or keyboard focus can trigger additional content to become visible (such as tooltip icons), this additional content should be dismissible, hoverable, and persistent to be accessible.

1.3.3 Sensory Characteristics

Instructions provided for understanding and operating icons must not rely solely on sensory characteristics such as shape, size, visual location, or sound.

2.4.4 Link Purpose (In Context)

If an icon serves as a link, the purpose of the link should be determinable from the icon alone or from the icon and its programmatically associated text.

2.4.7 Focus Visible

If an icon is actionable, it should have a clearly visible focus indicator when it receives keyboard focus.

2.5.5 Target Size

(Level AAA, but recommended for better accessibility at AA)

If an icon is used as a control, the size of the target for pointer inputs should be at least 44 by 44 CSS pixels, unless there's an equivalent link or control on the same page that is easier to use. Note that this guideline is technically Level AAA, but it's highly recommended for better accessibility even at Level AA.

It's also good practice to provide alternative text (alt text) for icons, especially if they convey information or have a function, to make them accessible to screen reader users. This doesn't have a specific WCAG guideline but it's a general best practice for accessibility.

4.1.2 Name, Role, Value

For icons that are interactive or convey information, these icons must be programmatically determined with a name that can be spoken by screen readers, and the role (e.g. button) and current value (e.g. pressed) should be programmatically set.