Accessibility
Icon
The Icon component has been designed with accessibility in mind.
It renders an SVG element that can either be decorative or convey important information. For that reason, it is important to provide the necessary context for screen readers.
The following props can be used:
| Name | Type | Description |
|---|---|---|
| ariaLabel | string | The text that describes the icon, announced by screen readers. |
| ariaHidden | boolean | If set to true, screen readers will completely ignore the icon. |
All the props above are optional, but important to use to ensure the best experience for all users.
The ariaLabel prop should ideally be translated and be more than just the name of the icon. It is especially important when the icon is used alone and conveys information by itself.
The ariaHidden prop is useful when the icon is already labeled by surrounding content, and it would be redundant to announce it again.
Not using ariaLabel nor ariaHidden will have screen readers announce the icon as just an image, without any more context, which can be confusing for users of assistive technologies.