React Accessibility: Making Apps for Everyone

Hey there, Fellow Coder! 👋

Let’s talk about something super important but often ignored: Accessibility (or a11y for short). You might think, “My app looks good, it works, isn’t that enough?” Well, imagine building a coffee shop but putting stairs right in front of the door with no ramp. You just blocked a lot of people from getting their caffeine fix! 😱

Making your React app accessible isn’t just about being “nice”. It’s about ensuring everyone, including people with disabilities, can use what you built. Plus, it helps with SEO! Google loves accessible sites.

Let’s look at 3 simple ways to improve accessibility in React.

1. Semantic HTML: The Foundation

The biggest mistake? Using <div> for everything. “I can just style a div to look like a button!” Yes, you can. But a screen reader won’t know it’s a button.

Bad Practice:

// Screen reader says: "group"
<div onClick={submitForm} className="btn-primary">
  Submit
</div>

Good Practice:

// Screen reader says: "button, Submit"
<button onClick={submitForm} className="btn-primary">
  Submit
</button>

By using the correct HTML tag (<button>, <main>, <nav>, <article>), you get accessibility features for free!

2. Alt Text for Images

This is Accessibility 101. Every <img> tag needs an alt prop. This describes the image to users who can’t see it.

Bad Practice:

<img src="logo.png" />

Good Practice:

<img src="logo.png" alt="Company Logo" />

If the image is purely decorative (like a background shape), use an empty string alt="". This tells the screen reader to skip it.

3. Don’t Overuse ARIA

ARIA (Accessible Rich Internet Applications) attributes are powerful, but rule #1 of ARIA is: Don’t use ARIA if you can use native HTML.

Use aria-label when you have a button with only an icon and no text.

Example:

<button aria-label="Close Menu" onClick={closeMenu}>
  <svg>...</svg>
</button>

Without aria-label, a screen reader might just say “button” with no context. With it, it says “Close Menu button”. Much better!

Quick Check: The Keyboard Test ⌨️

Want to test your app? Put your mouse away. Try to navigate your site using only the Tab key.

• Can you reach all the buttons and links?
• Can you see which element is focused (outline)?

If you can’t, you have some work to do!

Closing

Accessibility isn’t a “feature” you add at the end. It’s part of the process. Start small: use semantic HTML, add alt text, and test with your keyboard. Your users (and your SEO ranking) will thank you!

Happy coding! 💻❤️