Julia Undeutsch

Accessibility in React Application

Think React apps can't be accessible? Learn to conquer focus management and non-semantic HTML to build truly inclusive applications.

Accessibility in React Application
#1about 4 minutes

Common accessibility challenges in React SPAs

Single-page applications introduce unique accessibility issues like poor semantics, generic page titles, and difficult focus management.

#2about 8 minutes

Using semantic HTML for a better accessibility tree

Semantic HTML provides inherent meaning and structure, which translates directly to a navigable and understandable accessibility tree for screen reader users.

#3about 2 minutes

Using React Fragments to maintain valid HTML structure

React Fragments allow grouping elements without adding extra nodes to the DOM, preventing invalid HTML structures like a div inside a ul.

#4about 1 minute

Using correct JSX attributes for HTML properties

React uses camelCase for most HTML attributes, so it is important to use `className` instead of `class` and `htmlFor` instead of `for`.

#5about 7 minutes

Implementing effective focus management strategies in React

A CRUD application example demonstrates how to handle focus logically after adding, editing, or deleting items to create a predictable keyboard navigation experience.

#6about 3 minutes

Announcing page changes and live updates to users

Use techniques like updating the document title and implementing ARIA live regions to inform screen reader users about dynamic content changes and notifications.

#7about 3 minutes

A practical guide to testing React components for accessibility

Combine manual keyboard testing, browser extensions like axe DevTools, linters, and automated tests to ensure components are accessible.

#8about 1 minute

Summary of key principles for accessible React apps

A recap of essential practices including using semantic HTML, managing focus, announcing updates, and consistent testing to build accessible applications.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

Organizing a developer conference for 15,000 attendees
01:32 MIN

Organizing a developer conference for 15,000 attendees

Cat Herding with Lions and Tigers - Christian Heilmann

Increasing the value of talk recordings post-event
04:57 MIN

Increasing the value of talk recordings post-event

Cat Herding with Lions and Tigers - Christian Heilmann

Using content channels to build an event community
04:49 MIN

Using content channels to build an event community

Cat Herding with Lions and Tigers - Christian Heilmann

Selecting strategic partners and essential event tools
03:17 MIN

Selecting strategic partners and essential event tools

Cat Herding with Lions and Tigers - Christian Heilmann

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

The only frontend stack that truly matters
11:10 MIN

The only frontend stack that truly matters

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Building a one-time code input with semantic HTML
03:35 MIN

Building a one-time code input with semantic HTML

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Balancing the trade-off between efficiency and resilience
03:38 MIN

Balancing the trade-off between efficiency and resilience

What 2025 Taught Us: A Year-End Special with Hung Lee

Featured Partners

Related Videos

See all videos
WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more1:06:20

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Chris Heilmann, Daniel Cranney & Jan Deppisch

Building Interactive Async UI with React 19 and Ariakit25:22

Building Interactive Async UI with React 19 and Ariakit

Aurora Scharff

Preventing Accessibility Issues Instead Of Fixing Them56:01

Preventing Accessibility Issues Instead Of Fixing Them

Dirk Ginader

Accessibility powered by AI31:30

Accessibility powered by AI

Ramona Domen

Mastering Keyboard Accessibility27:16

Mastering Keyboard Accessibility

Tanja Ulianova

Is This App Accessible? A Live Testing Demo32:00

Is This App Accessible? A Live Testing Demo

Eeva-Jonna Panula

Accessibility Test Driven Development23:33

Accessibility Test Driven Development

Maria Korneeva

The What, Why, Who and How of accessibility on the web29:59

The What, Why, Who and How of accessibility on the web

Konstantin Tieber

Related Articles

View all articles
DC
Daniel Cranney
Web Developer Portfolio Inspiration and Examples - March 2025
Every developer needs a portfolio… of some sort. Whether it’s an all-singing all-dancing portfolio page, a blog, or a simple links page, it’s important to let others know what you have done, what you can do, and how they can contact you. A portfolio ...
Web Developer Portfolio Inspiration and Examples - March 2025
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering
DC
Daniel Cranney
Dev Digest 190: GitHub A11Y action, >12s Sora 2 videos and 42 CSS units!
Inside last week’s Dev Digest 190 . 🙅 Developers don’t trust AI, and that’s a good thing 🤖 Why everyone is talking about AI agents 🔓 Autonomous AI hacking and the future of cyber security 😨 Windows 10 support ends, millions of PC’s fall off a securi...
Dev Digest 190: GitHub A11Y action, >12s Sora 2 videos and 42 CSS units!

From learning to earning

Jobs that call for the skills explored in this talk.