mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-11-12 13:38:32 +00:00
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>
52 lines
1.8 KiB
Markdown
52 lines
1.8 KiB
Markdown
---
|
|
title: Accessibility - React
|
|
description: Best practices for accessible icons in your React application.
|
|
---
|
|
<script setup>
|
|
import OverviewLink from '~/.vitepress/theme/components/base/OverviewLink.vue'
|
|
</script>
|
|
|
|
# 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:
|
|
|
|
<OverviewLink href="/how-to/accessibility" title="Accessible Icons" desc="Best practices for accessible icons in your application."/>
|
|
|
|
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.
|
|
|
|
```tsx
|
|
<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.
|
|
|
|
```tsx
|
|
<button aria-label="Go to home">
|
|
<House />
|
|
</button>
|
|
```
|
|
|
|
This ensures assistive technologies describe the interactive element, rather than the decorative graphic inside it.
|