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. |
The props above are required and mutually exclusive. This means that you must use one of them, and you cannot use both at the same time.
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.