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.
- The way Adobe team decoupled accessibility via hooks into JSX is supercool. Keyboard, mouse and tab accessible.
-Another library 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. 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.
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
