mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-04-28 20:34:52 +08:00
34 lines
1.5 KiB
Markdown
34 lines
1.5 KiB
Markdown
# Accessibility
|
|
|
|
On the Web, assistive technologies derive useful information about the
|
|
structure, purpose, and interactivity of apps from their [HTML
|
|
elements][html-accessibility-url], attributes, and [ARIA in
|
|
HTML][aria-in-html-url].
|
|
|
|
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][html-aria-url] 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](./direct-manipulation.md).
|
|
|
|
[aria-in-html-url]: https://w3c.github.io/aria-in-html/
|
|
[html-accessibility-url]: http://www.html5accessibility.com/
|
|
[html-aria-url]: http://www.w3.org/TR/html-aria/
|