Accessibility and the React Ecosystem

Accessibility and the React Ecosystem


3 min read

Definitiion of Accessibility

" Web accessibility is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages "

Its about making or solving for everyone Making your website responsive

What is officially Accessibilty?

-> Access the web in better ability, enabling keyboard navigation, voice-to-text feature, enabling mouse scroll events; overall better User Experience

How to make accessibility rich web-apps?

-> With web, generally we follow Web Content Accessibility Guideine (WCGA)

  • Perceivable part : adding attributes to semantic HTML, alt tag to element, making form accessible through keyboard, enabling navigation through keyboard, adding lang attribute in HTML, etc.

  • Robust: use standardised semantic element like <article/> because it helps screen reader users to navigate, key board first approach for operable part

Different level of Accessibilty

  • Level A -> Aria level
  • Level AA -> allows yout to hear captions
  • Level AAA -> sign language implementation (extreme level)

AI and machine learning algorithms are leading way to increase power of browser.

  • In web, tab order, tab index

Native mobile Accessibilty

Android and iOS have different specification for WCGA

  • Android has talk-back and iOS has voice-Over , these are screen readers to provide focus on some elements. Read more on this here.

  • There are different defaults, no possible one-to-one mapping when we consider android and iOS separately

How we can enable accessibility in React?

  • Use component from multiple libraries like Modals to avoid edge cases; Libraries like material-ui and unstyle are good options as mostly they cover accessibiility roles well, like focus trapping, tab-index; Just go with which comes with less styling baggage.

React aria and React Spectrum

  • The way Adobe team decoupled accessibility via hooks into JSX is supercool. Keyboard, mouse and tab accessible.

-Another library downshift

(Reactnative aria](

  • Platform agnostic (agnostic means something that is generalized so that it is interoperable among various systems) -Accessibility labels, content-description attributes; which abstracts via hooks into JSX. -Like for pressible elements to make a checkbox in RN, you need to pass correct accessible label and state which returns react-native api which passed back into props. -Like to split/abstract out the behavior via hooks to improve accessibility. This library help us to build component with high accessibility.

Write once for everywhere is the future

  • Reactnative provide WAI-ARIA roles. How it can be mapped back to web via reactnative-web
  • In RN web, there is much missing, but highe chances to boost accessibility on the web.
  • RN web has alternative ways to provide web semantic via APIs like and do DOM things better
  • Reactnative web is better approach to take react everywhere.
  • React has done agreat job. Universal/monorepo is the way to go.
  • The trend these days is app should look same on every platform; UI is more likely to go universal.

Work in this direction

  • GAAD (Global Accessibility Awareness Day) its a pledge to make products accessible.
  • NextJS and Typescript is pushing towards building more accessible apps.
  • Have easy and right defaults.

Tools to check accessibility level

Future of Accessibility

  • *Don't read it as feature,take it as ego.
  • Industry is showing inclination towards it.
  • Universal is the way to go, we need universal debuggers, like Flipper by Facebook
  • We need devtools focused on Accessibility.

Follow me on twitter to know more about technology and development. A bit of philosophy too.

inspired from a Twitter space hosted by @GeekyAnts

Did you find this article valuable?

Support Agrit Tiwari by becoming a sponsor. Any amount is appreciated!