Julia Undeutsch
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
27:17 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
37:18 MIN
Q&A on practical accessibility challenges
Preventing Accessibility Issues Instead Of Fixing Them
26:50 MIN
Summary of key accessibility best practices
Making Interactions Accessible to All Users
33:42 MIN
Why you should integrate accessibility early
Going on a CODE100 Accessibility Scavenger Hunt
38:02 MIN
Q&A on framework choice and accessibility
Extending HTML with Web Components
11:36 MIN
The accessibility challenges of canvas-based UIs
WeAreDevelopers LIVE - Is Software Ever Truly Accessible?
03:03 MIN
Building with familiar React APIs and real CSS
Lynx: Native for More
22:21 MIN
Summary of benefits from Ariakit and React 19
Building Interactive Async UI with React 19 and Ariakit
Featured Partners
Related Videos
27:16Mastering Keyboard Accessibility
Tanja Ulianova
25:22Building Interactive Async UI with React 19 and Ariakit
Aurora Scharff
56:01Preventing Accessibility Issues Instead Of Fixing Them
Dirk Ginader
31:30Accessibility powered by AI
Ramona Domen
32:00Is This App Accessible? A Live Testing Demo
Eeva-Jonna Panula
35:39Going on a CODE100 Accessibility Scavenger Hunt
Chris Heilmann & Daniel Cranney
31:38Making Interactions Accessible to All Users
Anuradha Kumari
23:33Accessibility Test Driven Development
Maria Korneeva
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
Frontend Web Developer (JavaScript, React)
Die Socialisten
Vienna, Austria
Senior
Jest
React
Redux
JavaScript
Frontend-Focused Fullstack Developer (React / Next.js)
Rocken AG
Remote
€83-111K
NestJS
Next.js
TypeScript
Frontend Web Developer - JavaScript | React | Angular | Vue.js | Bootstrap | Tailwind | HTML | CSS
Tech Solutions Gmbh
GIT
HTML
Vue.js
Web Entwickler:in Next.js / React
NUUK GMBH
Hamburg, Germany
GIT
Next.js
Terraform
TypeScript
Continuous Integration
Accessibility Frontend Developer
Department for Work and Pensions (DWP)
Sheffield, United Kingdom
€44-50K