diff --git a/docs/guides/accessibility.md b/docs/guides/accessibility.md index 9777cc94..f26399ea 100644 --- a/docs/guides/accessibility.md +++ b/docs/guides/accessibility.md @@ -39,7 +39,10 @@ using `aria-label`. In some cases, we also want to alert the end user of the type of selected component (i.e., that it is a “button”). To provide more context to screen -readers, you should specify the `accessibilityRole` property. +readers, you should specify the `accessibilityRole` property. (Note that React +Native for Web provides a compatibility mapping of equivalent +`accessibilityTraits` and `accessibilityComponentType` values to +`accessibilityRole`). The `accessibilityRole` prop is used to infer an [analogous HTML element][html-aria-url] to use in addition to the resulting ARIA `role`, where diff --git a/src/modules/AccessibilityUtil/propsToAriaRole.js b/src/modules/AccessibilityUtil/propsToAriaRole.js index 5aa92bf1..2c00d836 100644 --- a/src/modules/AccessibilityUtil/propsToAriaRole.js +++ b/src/modules/AccessibilityUtil/propsToAriaRole.js @@ -6,6 +6,7 @@ const accessibilityComponentTypeToRole = { const accessibilityTraitsToRole = { adjustable: 'slider', button: 'button', + header: 'heading', image: 'img', link: 'link', none: 'presentation',