React Accessibility

React fully supports building accessible websites, often by using standard HTML techniques. More info

Articles & Tutorials

Accessible components with Reakit (blog.logrocket.com)
Oct 05, 2020
The most common thing in a React application is the reusability of components. We have been using and reusing the same components in different parts of an application and this is one of the most fantastic features that we have in React applications.
  • Leonardo Maldonado
A Guide to Accessible Interactive Components using React Libraries (a11ywithlindsey.com)
May 29, 2020
I’ve wanted to write this blog post ever since I wrote a11y and JS - A Seemingly Unconventional Romance. I love JavaScript, and my job is to code in React. I often observe folks (rightly) critique that React Apps are inaccessible.
  • Lindsey Kopacz
React Native Accessibility: What, Why, and How? (callstack.com)
May 19, 2020
What is accessibility, why do you need it, and how to implement it in your app?
  • Luke Walczak
Build an Accessible React Component: Part 1 - Breadcrumbs (ashleemboyer.com)
Apr 25, 2020
This past Tuesday, the first stream in a series for building accessible React components, we spun the wheel and it chose the breadcrumb component for us! While the component was extremely straightforward, I think it was a great one to kick off the series.
  • Ashlee Boyer
Act now to make your React website accessible (blog.logrocket.com)
Jan 27, 2020
I am going to outline some simple steps that you can do to make your React website more accessible.
  • Paul Cowan
Build more accessible forms with React Icons (blog.logrocket.com)
Jan 24, 2020
The goal of this post is to help you understand how to build more accessible React forms by using the popular react-icons library and the very accessible React components made available by the ReachUI library.
  • Peter Ekene Eze
Debunking the Myth: Accessibility and React (deque.com)
Jan 09, 2020
JavaScript frameworks are becoming the norm for creating powerful, fast, and adaptive web sites. One of the most popular frameworks is React.
  • Mark Steadman
How to build an accessible date picker component in React (blog.logrocket.com)
Dec 30, 2019
In this article, we will be building an accessible date picker component that leverages the accessibility guidelines.
  • Jeremy Kithome
Making React Apps More Accessible (alligator.io)
Aug 14, 2019
Spending some time making your React app accessible can help ensure a wider range of people can use all the amazing interfaces you’re building. Thankfully, improving how accessible an app is often requires only minor changes to your components.
  • Jess Mitchell
The Myth of Inaccessible React (mediacurrent.com)
Jun 05, 2019
There's a somewhat common misperception that JavaScript frameworks and web accessibility don't mix. React, being one of the largest JavaScript libraries, is often the target.
  • Ben Robertson
React and Accessibility (aditus.io)
May 18, 2019
Slides from the React Zurich Meetup.
  • João Figueiredo
Accessibility is not a “React Problem” (netlify.com)
Feb 25, 2019
Every few months, it seems like there’s a revival of the Twitter War™ about JavaScript libraries and accessibility. React is a common target, with developers naming a litany of issues.
  • Leslie Cohn-Wein
Achieving Accessibility in React Applications (blog.bitsrc.io)
Feb 14, 2019
How to make sure everyone get the right experience in your app
  • Nwose Lotanna
Please stop building inaccessible forms (and how to fix them) (blog.kentcdodds.com)
Feb 04, 2019
I regularly find inaccessible forms. In this post we’ll check out one of the common accessibility problems and fix it.
Getting Started with Web Accessibility in React (blog.usejournal.com)
Jan 02, 2018
When designing shiny new web applications using React, it’s easy to forget about the accessibility of what you are developing, or even failing to consider what native features React provides to help make the web more accessible. I am going to cover some basic features that React enables and/or supports, as well as some basic implementations.
  • Emily Mears
Accessible Web Apps with React, TypeScript, and AllyJS (css-tricks.com)
Nov 16, 2017
This article will focus on Ally.js, a library simplifying certain accessibility features, functions, and behaviors.
  • Daniel Yuschick

Video Guides & Talks

Accessibility 360 - Web to Mobile (youtube.com)
May 30, 2019
In this talk, we will talk about why you should care about a11y, how you can make your react native apps accessible, accessibility standards your app falls into, common patterns to follow, how voice over works and also some suggestions to make this native world a better and inclusive place for everyone.
  • Ankita Kulkarni
12 Tips For More Accessible React Apps (youtube.com)
May 01, 2019
If you want to improve the accessibility of your React apps but you don't know how or where to start, this talk is just what you need. Manuel shares 12 tips that will help you build web sites and applications that can be used by anyone. Each tip fits on one slide and you'll be able to put them into practice right away without having to learn anything fundamentally new.
  • Manuel Matuzović
Make Your React Native Apps Accessible (youtube.com)
Apr 24, 2019
In this talk, I will show you why accessibility matters, what those rules are, accessibility standards your app falls into, common patterns to follow and how to get over your fear of voice-over.
  • Ankita Kulkarni
Improve a11y and usability of an icon component (youtube.com)
Nov 16, 2018
Someone wanted my feedback on an icon component. Here it is!
downshift: Making Downshift more accessible (youtube.com)
Aug 07, 2017
Here I work on some feedback I got from Marcy Sutton on the accessibility of downshift.

Courses & Video Series

Beautiful and Accessible Drag and Drop with react-beautiful-dnd (egghead.io)
Jul 28, 2018
In this course, we will create a highly interactive task management application from scratch
  • Alex Reardon
React: Components, Context, and Accessibility (lynda.com)
Jul 17, 2018
Learn about the enhancements found in React 16 and how to leverage key features to build better React apps

Podcast Episodes

Get Access with Aaron Cannon (reactpodcast.com)
Jul 11, 2019
This week, we talk accessibility pitfalls with Aaron Canon. Aaron is the co-founder and chief accessibility engineer at Accessible360 — where he uses his experience as a blind developer to improve real-world accessibility for all citizens of the web.
Accessibility is not a “React Problem” with Leslie Cohn-Wein (devchat.tv)
Jun 18, 2019
Leslie Cohn-Wein joins the panel to discuss accessibility. She explains how she got passionate about accessibility. The panel discusses what you have to do to become accessible.
Just Use a Button with Jen Luker (reactpodcast.com)
Jan 09, 2019
Jen Luker is a lead software engineer at Formidable Labs, keynote speaker, host of @BookBytesFM, and expert knitter. Chantastic asks her about the Fiber Arts Corner at React Conf, the history that textiles and programming share, and how we can make our apps more accessible.
Promise Accessibility with Ryan Florence (reactpodcast.com)
Sep 26, 2018
Chantastic talks with Ryan Florence about Reach UI and why accessibility is important for everyone. They discuss the balance of physical and mental activity, Ryan’s foray into programming and entrepreneurship, the inspiration behind his accessibility-first component library, and why none of us are really full-stack developers.
Ryan Florence - Building Accessible UI Components (fullstackradio.com)
Sep 12, 2018
In this episode Adam talks to Ryan Florence about the challenges of making custom UI components accessible, and how Ryan is trying to make that easier with Reach UI.