Icons

If the icon is purely decorative and does not convey any meaning (for instance, if adjacent text already provides all the necessary information/context), it is hidden from screen readers.

If the icon does convey meaning, the component exposes a role="img" so that its purpose will be described by assistive technologies, and the component's aria-label contains the accessible name / text alternative for the icon.

The accessible name or decision to make it decorative should be included in the design annotation.

Unless the icon is purely decorative, it must have a contrast ratio of at least 3:1 against the background color.

Built-in accessibility features

If the author does not include an aria-label, the component is assumed to be decorative, and will automatically be given an aria-hidden="true" attribute.

If the author includes an aria-label, the component exposes a role="img", and the aria-label attribute is passed to the rendered component.

Implementation requirements

• If the icon is decorative, omit the aria-label attribute.
• If the icon is used to convey information or meaning, make sure to add an appropriate aria-label that provides the text equivalent for the icon.

Authors can choose the color used for the icon, so it is important to ensure that it has a contrast ratio of at least 3:1 against the background color. It is recommended to use our functional foreground colors.

How to test the component

Integration tests

• The icon has a contrast ratio of at least 3:1 against the background color.

Component tests

• If the icon has been given an aria-label attribute, the <svg> has a role="img" and the aria-label is exposed
• If no aria-label attribute has been given, the icon is presentational and the <svg> is hidden from screen readers using aria-hidden="true".