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 · World Congress 2022

10:20 min

Advocating for semantic HTML over complex framework component workarounds

Chris Heilmann Chris Heilmann +2 · LIVE

4:49 min

Finding accessibility issues through manual keyboard navigation testing

Emma Dawson Emma Dawson · World Congress 2025

3:08 min

Introduction to building accessible web frontends

Konstantin Tieber · World Congress 2022

8:18 min

Building interactive accessibility learning resources for web developers

Chris Heilmann Chris Heilmann +2 · LIVE

More from WeAreDevelopers LIVE

WeAreDevelopers LIVE - Read more, Prompt Less thumbnail
1:01:30
5 days ago

WeAreDevelopers LIVE - Read more, Prompt Less

Chris Heilmann, Daniel Cranney, Luise Freese

WeAreDevelopers LIVE - Tech Education in Two Languages thumbnail
1:00:18
12 days ago

WeAreDevelopers LIVE - Tech Education in Two Languages

Daniel Cranney, Roxy Rodriguez-Becker

WeAreDevelopers LIVE - Playing in Production thumbnail
1:06:40
19 days ago

WeAreDevelopers LIVE - Playing in Production

Andrew MacLean, Daniel Cranney, Christian Heilmann

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
about 1 month ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
about 1 month ago

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along

Chris Heilmann, Daniel Cranney, Krzysztof Cieślak

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak thumbnail
4:23
about 1 month ago

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

React Under Fire: Rendering Performance for Streaming Agent UIs

  • Abhirupa Mitra

    Slack

    Senior Member of Technical Staff

Open session

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs

  • Vidhya Krishnamoorthy

    Morgan Stanley

    VP, Software Engineering Manager

Open session

From Profiler to Production: Measuring What Actually Matters in React & React Native

  • Andrei Tazetdinov

    Dynatrace

    React Native Developer

Open session

Build a Zero-Cost AI Agent in Your Browser

  • Aishwarya Mathuria

    Adobe

    Computer Scientist

  • Nishant Thakur

    Adobe

    Senior Computer Scientist

Open session

Supply Chain Security for the Everyday Engineer

  • Pradumna Saraf

    Kestra Technologies

    Quality Assurance Engineer

Open session

How We Cut Our API's p99 Latency from Minutes to Under a Second

  • Deepak Agrawal

    Atlassian

    Principal Software Engineer

Related videos

Making Interactions Accessible to All Users thumbnail
31:38
World Congress 2023 • about 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
World Congress 2022 • over 4 years ago

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

Konstantin Tieber

Accessibility with Web Components thumbnail
25:33
World Congress 2023 • about 3 years ago

Accessibility with Web Components

Manuel Mauky

The Cake Is a Lie... And So Is Your Login’s Accessibility thumbnail
30:52
World Congress 2025 • about 1 year ago

The Cake Is a Lie... And So Is Your Login’s Accessibility

Ramona Schwering

Mastering Keyboard Accessibility thumbnail
27:16
World Congress 2023 • almost 3 years ago

Mastering Keyboard Accessibility

Tanja Ulianova

Building Interactive Async UI with React 19 and Ariakit thumbnail
25:22
World Congress 2025 • about 1 year ago

Building Interactive Async UI with React 19 and Ariakit

Aurora Scharff

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.