Accessibility

Accessible Icon Usage in React: ARIA, Roles & Keyboard Support

10 min read

Learn how to make your React icon usage accessible using ARIA attributes, proper roles, and keyboard support for inclusive user experiences.

When building modern React applications, developers often prioritize visual appeal, performance, and modularity—but accessibility is just as critical. Icons, while small and often decorative, play a vital role in user experience. However, if not implemented correctly, they can become a major barrier for users relying on screen readers or other assistive technologies.

This post dives deep into how to make your React icon usage accessible using ARIA attributes, proper roles, and keyboard support. Whether you're using libraries like react-icons, building custom SVG components, or rendering icons conditionally, accessibility should be a first-class concern.

Why Icon Accessibility Matters

Icons are everywhere: buttons, menus, toolbars, labels, inputs, and even as standalone indicators. For sighted users, these visuals convey meaning instantly. But for users who can't see the screen—whether due to blindness, visual impairment, or cognitive differences—the meaning must be communicated through other means.

Poorly implemented icons:

May be skipped by screen readers.
Can confuse users with no descriptive labels.
Might not be reachable or operable via the keyboard.

Good accessibility means:

Inclusive experiences.
Improved usability for all.
Compliance with standards like WCAG and ADA.

Types of Icons and Their Accessibility Needs

Before jumping into code, understand the purpose of the icon. This determines whether it needs an accessible name or should be hidden from assistive tech.

1. Decorative Icons

These icons don't convey any meaningful information and are purely visual (e.g., a chevron icon next to a button).

Solution: Hide them from screen readers.

</svg>

aria-hidden="true": hides the element from screen readers.
focusable="false": prevents keyboard focus in some browsers (notably IE11).

2. Informative or Functional Icons

These icons convey important context or are interactive (like a search icon in a button).

Solution: Provide accessible names and roles.

</button>

Or, if using an inline SVG:

</svg>

ARIA Basics for Icons

ARIA (Accessible Rich Internet Applications) attributes help communicate semantics when native HTML falls short.

Key ARIA attributes for icons:

aria-label: Provides an accessible name.
aria-hidden: Hides elements from assistive technologies.
role: Defines the semantic meaning of an element (e.g., img, button, presentation).

Example 1: Icon with Descriptive Label

</svg>

Example 2: Decorative Icon

</svg>

Using React Icons with Accessibility

If you're using react-icons, which wraps popular icon sets, remember: these icons are mostly SVG elements with no built-in accessibility features. You'll need to manually enhance them.

Best Practice with react-icons

import { FaTrash } from 'react-icons/fa';

function DeleteButton() {

return (

</button>

);

}

Here:

The icon is hidden from screen readers (aria-hidden).
The button gets a descriptive label.
The action is clear for assistive tech users.

Custom SVG Icons as Components

Creating a custom icon component? Build accessibility into the component from day one.

const Icon = ({ label, decorative = false, children }) => (

<svg

role={decorative ? undefined : 'img'}

aria-hidden={decorative}

aria-label={!decorative ? label : undefined}

focusable="false"

width="16"

height="16"

{children}

</svg>

);

Use like:

</Icon>

Or for decorative:

</Icon>

Keyboard Accessibility with Icon Buttons

Icons often appear inside interactive elements like buttons. For proper keyboard support:

Use <button> or <a> when icons trigger actions or link to pages.
Do not use <div> or <span> with onClick unless you replicate all keyboard behaviors.

❌ Bad

</span>

✅ Good

</button>

The good example:

Is keyboard focusable.
Triggers actions on Enter/Space.
Is labeled for screen readers.

Managing Focus & Visibility

Some icons act as toggles (e.g., show/hide password). If the icon's state changes, reflect that in ARIA.

const [visible, setVisible] = useState(false);

<button

onClick={() => setVisible(!visible)}

aria-pressed={visible}

aria-label={visible ? "Hide password" : "Show password"}

{visible ? <FaEyeSlash /> : <FaEye />}

</button>

Here:

aria-pressed communicates the toggle state.
The label changes dynamically.

Additional Tips

Avoid using icons as the only way to convey information.
Pair icons with visible text where possible, or use aria-label for clarity.
Test your components using screen readers like NVDA, VoiceOver, or ChromeVox.
Use tools like axe DevTools or Lighthouse for automated audits.

Accessibility Checklist for React Icons

✅ Does the icon have a clear purpose?
✅ Is it labeled correctly using aria-label or aria-labelledby?
✅ Is the icon hidden if decorative (aria-hidden="true")?
✅ Are interactive icons wrapped in native interactive elements like <button>?
✅ Can keyboard users focus and activate the icon functionality?
✅ Have you tested with a screen reader?

Conclusion

Icons might be tiny components in your UI, but their impact on accessibility is enormous. With just a few lines of code—proper ARIA roles, meaningful labels, and semantic structure—you can make your React icons inclusive and user-friendly for everyone.

When designing for accessibility, remember this: good icons should not only look great but also communicate clearly. With the strategies in this post, your React apps will be a step closer to meeting that standard.

Next Steps:

Audit your current icon components.
Refactor decorative icons to be hidden from screen readers.
Add proper labels to interactive icon buttons.
Test with screen readers and keyboard navigation.

By doing so, you're not just improving your code—you're building a better web.