# Accessibility and the React Ecosystem

## 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 <img> 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]( Accessible Rich Internet Applications)
- 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](https://usability.yale.edu/web-accessibility/articles/focus-keyboard-operability).

- **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](https://material-ui.com/) and [unstyle](https://npm.io/package/@material-ui/unstyled)  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](https://react-spectrum.adobe.com/react-aria/getting-started.html)
- The way Adobe team decoupled accessibility via hooks into JSX is supercool. Keyboard, mouse and tab accessible.

-Another library [downshift](https://github.com/downshift-js/downshift)

## (Reactnative aria](https://react-native-aria.geekyants.com/)
 - 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`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/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 <Accessibility role/> 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
- [Lighthouse](https://developers.google.com/web/tools/lighthouse)
- *Manual testing is irreplacable*
- [Accessibility scanner app](https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor&hl=en_IN&gl=US)

## 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](https://github.com/facebook/flipper) by Facebook 
- We need devtools focused on Accessibility.


Follow me on [twitter](https://www.twitter.com/agrit_tiwari) to know more about technology and development. A bit of philosophy too. 

inspired from a Twitter space hosted by [@GeekyAnts](https://twitter.com/geekyants)