Building Accessibility Hooks for React Native & Web

Sahu describes accessibility as making apps and websites usable by as many people as possible. He highlights screen reader support, readable contrast, responsive layouts, and keyboard navigation as key considerations.

Using a web checkbox, Sahu shows how React state can update both the visible control and its accessibility information. He demonstrates ARIA attributes such as `aria-checked` and `aria-labelledby`, and explains that a custom-styled `div` needs an appropriate checkbox role.

Sahu demonstrates React Native accessibility props such as `accessible`, `accessibilityRole`, and `accessibilityState` with a checkbox. For a shared component, he suggests using a native checkbox input on web and React Native accessibility props on mobile, while reusing the same visual UI.

Sahu introduces React Aria and React Stately hooks that provide behavior and accessibility props without prescribing a visual design. React Native Aria extends that approach to React Native and web, with hooks for controls such as checkboxes, menus, sliders, and combo boxes. He shows how NativeBase uses these tools for cross-platform components.

Sahu calls out keyboard interaction, screen reader labels, and color contrast as areas that need attention, especially for custom combo boxes. He points to the A11Y Project checklist and describes WCAG levels A, AA, and AAA, including contrast examples of 4.5:1 for AA and 7:1 for AAA.