WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
WeAreDevelopers LIVE • Nov 20, 2024

Accessibility in React Application

Julia Undeutsch

Are React applications inherently inaccessible? Discover how to build truly inclusive SPAs using semantic HTML, custom focus management, and ARIA live regions.

Pause
Mute Enter Fullscreen
#1 about 5 min

Addressing accessibility stigmas in single page applications

How typical single page application structures cause accessibility concerns and DOM hierarchy issues.

#2 about 8 min

Implementing semantic HTML structure in React components

Replacing generic nested divs with native HTML elements improves screen reader navigation and code readability.

#3 about 2 min

Preventing invalid DOM hierarchies using React fragments

Using React fragments allows developers to group and render sibling elements without introducing invalid wrappers.

#4 about 1 min

Translating HTML attributes into standard React syntax

Identifying and applying the correct JSX syntax for reserved HTML attributes prevents rendering errors.

#5 about 8 min

Managing keyboard focus flow in interactive CRUD operations

Manual control of focus state ensures keyboard and screen reader users can efficiently operate interactive functionality.

#6 about 3 min

Announcing route changes and live notifications to users

Updating document titles and using ARIA live regions successfully communicates dynamic content changes.

#7 about 4 min

Testing accessibility with manual checks and automated tooling

Combining manual keyboard interaction with automated browser extensions and linting secures application compliance.

#8 about 2 min

Summary of creating inclusive and accessible React applications

Embracing accessibility principles provides a better user experience and helps developers build robust user interfaces.

Matching moments

2:46 min

Implementing low-hanging accessibility fixes in frontend web applications

Ramona Schwering Ramona Schwering · Coffee With Developers

3:51 min

Audience questions on accessibility and framework tradeoffs

Rowdy Rabouw Rowdy Rabouw · WWC 2022

10:20 min

Advocating for semantic HTML over complex framework component workarounds

Chris Heilmann +2 · LIVE

4:49 min

Finding accessibility issues through manual keyboard navigation testing

Emma Dawson Emma Dawson · WWC 2025

3:08 min

Introduction to building accessible web frontends

Konstantin Tieber · WWC 2022

8:18 min

Building interactive accessibility learning resources for web developers

Chris Heilmann +2 · LIVE

More from WeAreDevelopers LIVE

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz thumbnail
5:43
5 days ago

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Node and Package Security thumbnail
1:08:30
5 days ago

WeAreDevelopers LIVE - Node and Package Security

Chris Heilmann, Daniel Cranney, Zbyszek Tenerowicz

WeAreDevelopers LIVE - Streaming HTML thumbnail
1:10:26
12 days ago

WeAreDevelopers LIVE - Streaming HTML

Chris Heilmann, Daniel Cranney, Jad Joubran

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe thumbnail
1:02:34
19 days ago

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe

Chris Heilmann, Daniel Cranney, Justin Halsall, Werner Jeschko, Nicole Jeschko, Mirco Tomić

WeAreDevelopers LIVE - Web Performance in an AI World thumbnail
1:07:59
26 days ago

WeAreDevelopers LIVE - Web Performance in an AI World

Chris Heilmann, Daniel Cranney

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko thumbnail
5:55
about 2 months ago

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Secure-by-Inclusion: Preventing Accessibility Barriers from Becoming Security Vulnerabilities

Radostina (Ina) Tsvetkova

Norwegian Directorate of Labour and Welfare (NAV), Senior Advisor in Digital Accessibility and Inclusive Design

Radostina (Ina) Tsvetkova
Open session

World Congress 2026 North America

Vibe Coding Accessibility

Karl Groves

Focused on actively fixing accessibility

Karl Groves
Open session

World Congress 2026 North America

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

One Repo, One Strategy: Scalable Full-Stack Testing in a Monorepo World

Bartosz Leczycki, Paweł Matynia

Bartosz Leczycki
Paweł Matynia
Open session

World Congress 2026 North America

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect

David Morris

Related videos

Making Interactions Accessible to All Users thumbnail
31:38
WWC 2023 • almost 3 years ago

Making Interactions Accessible to All Users

Anuradha Kumari

The What, Why, Who and How of accessibility on the web thumbnail
29:59
WWC 2022 • about 4 years ago

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

Konstantin Tieber

Accessibility with Web Components thumbnail
25:33
WWC 2023 • almost 3 years ago

Accessibility with Web Components

Manuel Mauky

Mastering Keyboard Accessibility thumbnail
27:16
WWC 2023 • over 2 years ago

Mastering Keyboard Accessibility

Tanja Ulianova

Building Interactive Async UI with React 19 and Ariakit thumbnail
25:22
WWC 2025 • 12 months ago

Building Interactive Async UI with React 19 and Ariakit

Aurora Scharff

Accessibility Test Driven Development thumbnail
23:33
WWC 2025 • 12 months ago

Accessibility Test Driven Development

Maria Korneeva

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.