KarsaandEric Fennis
e4be16acd5
* fix(docs): replace missing LucideIcon icon names in guides * feat(docs): add How to use Lucide icons section to resources * feat(docs): update accessibility guide links * fix(docs): fix dead link in guide.md * fix(docs): fix color in example image * fix(docs): fix overlay color in example images * fix(how-to): added caution guidance type & rework some guidance rules relating to compact interfaces * fix(how-to): replaced caution items, what the heck, when did I reorder these 😅 * fix(how-to): fix colors --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
1.8 KiB
title, description
| title | description |
|---|---|
| Accessibility - React | Best practices for accessible icons in your React application. |
Accessibility
Lucide icons ship with aria-hidden="true" by default. In almost all cases this is exactly what you want.
Should icons be accessible?
Most of the time, icons are used purely for decoration or visual reinforcement. Exposing decorative icons to assistive technologies can create unnecessary noise for screen reader users.
For a broader explanation of this, and other best practices on how to use icons accessibly in your application, please refer to our detailed guide on accessibility:
Only if an icon conveys essential meaning on its own should it be made accessible. The sections below explain how to do that in React.
Making an icon accessible
To expose an icon to assistive technologies, provide an accessible name by passing a title element as a child or passing the aria-label prop to the icon component.
This removes the aria-hidden attribute and makes the icon visible to screen readers.
<House>
<title>This is my house</title>
</House>
// or
<House aria-label="This is my house" />
Choose a label that clearly describes the meaning of the icon or the action it represents in the context of your application.
Accessible icon buttons
When an icon is used inside a button, the accessible label should usually be applied to the button itself, and not the icon.
<button aria-label="Go to home">
<House />
</button>
This ensures assistive technologies describe the interactive element, rather than the decorative graphic inside it.