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.

Remote

Name of

Name of

Remote
Intermediate
PHP
Java
+1

Matching moments

The importance of web accessibility as a core developer craft
07:01 MIN

The importance of web accessibility as a core developer craft

WAD Live 22/01/2025: Exploring AI, Web Development, and Accessibility in Tech with Stefan Judis

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Summary of key accessibility best practices
00:59 MIN

Summary of key accessibility best practices

Making Interactions Accessible to All Users

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Q&A on practical accessibility challenges
18:43 MIN

Q&A on practical accessibility challenges

Preventing Accessibility Issues Instead Of Fixing Them

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Why you should integrate accessibility early
01:57 MIN

Why you should integrate accessibility early

Going on a CODE100 Accessibility Scavenger Hunt

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
The accessibility challenges of canvas-based UIs
04:08 MIN

The accessibility challenges of canvas-based UIs

WeAreDevelopers LIVE - Is Software Ever Truly Accessible?

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Q&A on framework choice and accessibility
03:52 MIN

Q&A on framework choice and accessibility

Extending HTML with Web Components

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Building with familiar React APIs and real CSS
01:58 MIN

Building with familiar React APIs and real CSS

Lynx: Native for More

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Summary of benefits from Ariakit and React 19
03:01 MIN

Summary of benefits from Ariakit and React 19

Building Interactive Async UI with React 19 and Ariakit

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.

Featured Partners

Related Videos

See all videos
Mastering Keyboard Accessibility27:16

Mastering Keyboard Accessibility

Tanja Ulianova

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

Is This App Accessible? A Live Testing Demo32:00

Is This App Accessible? A Live Testing Demo

Eeva-Jonna Panula

Making Interactions Accessible to All Users31:38

Making Interactions Accessible to All Users

Anuradha Kumari

Accessibility with Web Components25:33

Accessibility with Web Components

Manuel Mauky

ARIA: the good parts55:32

ARIA: the good parts

Hidde de Vries

Data Mining Accessibility56:00

Data Mining Accessibility

Karl Groves

Related Articles

View all articles

From learning to earning

Jobs that call for the skills explored in this talk.

Frontend Developer

Frontend Developer

JO Media Software Solutions GmBh
Brunn am Gebirge, Austria

Senior
CSS
Angular
JavaScript
TypeScript