Description
Is there an existing issue for this?
- I have searched the existing issues
Describe the issue
Hi there 👋
I'm currently working on improving the accessibility of a website that uses react-native-web. While auditing with axe-core, I'm encountering the following issue:
Violation: Page must contain a level-one heading
Selector:h1[role="heading"]
Description: Axe considers this heading insufficient, as it doesn’t satisfy the requirement for a proper level-one heading.
After some investigation, I found that accessibilityRole="header" on the <Text> component renders:
<h1 role="heading">Heading</h1>
This results in:
- A redundant
role="heading"on a native heading tag (<h1>–<h6>) - A failure in Axe audits, which expects a semantic level-one heading without role override
According to W3C's ARIA in HTML spec and MDN, this is considered semantically redundant, and possibly problematic for accessibility APIs or screen readers.
Expected behavior
Only apply role="heading" when rendering non-semantic elements (e.g., <div>), and skip it when rendering a native <h1>–<h6> element via accessibilityRole="header" and aria-level.
Steps to reproduce
<Text accessibilityRole="header">
Welcome to React Native Web
</Text>Use the code above and look at the rendered html
Test case
https://codesandbox.io/p/sandbox/intelligent-hellman-j2mvxz
Additional comments
Thanks for this library