Skip to content

Latest commit

 

History

History
33 lines (26 loc) · 1.48 KB

accessibility.md

File metadata and controls

33 lines (26 loc) · 1.48 KB
Raw

Accessibility

On the Web, assistive technologies derive useful information about the structure, purpose, and interactivity of apps from their HTML elements, attributes, and ARIA in HTML.

The most common and best supported accessibility features of the Web are exposed as the props: accessible, accessibilityLabel, accessibilityLiveRegion, and accessibilityRole.

React Native for Web does not provide a way to directly control the type of the rendered HTML element. The accessibilityRole prop is used to infer an analogous HTML element to use in addition to the resulting ARIA role, where possible. While this may contradict some ARIA recommendations, it also helps avoid certain HTML5 conformance errors and accessibility anti-patterns (e.g., giving a heading role to a button element).

For example:

  • <View accessibilityRole='article' /> => <article role='article' />.
  • <View accessibilityRole='banner' /> => <header role='banner' />.
  • <View accessibilityRole='button' /> => <button type='button' role='button' />.
  • <Text accessibilityRole='link' href='/' /> => <a role='link' href='/' />.
  • <View accessibilityRole='main' /> => <main role='main' />.

Other ARIA properties should be set via direct manipulation.