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](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.

Tools to check accessibility level

• Lighthouse
• Manual testing is irreplacable
• Accessibility scanner app

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