React-native-web: Proposal: Different heading levels

Created on 24 Mar 2017 · 6Comments · Source: necolas/react-native-web

What is the current behavior?

Right now, RNW has support for accessibilityRole (which is awesome). Using accessibilityRole="heading", this turns the <Text> into an <h1> on the web.

That I can see, there's no support for rendering any of the other heading elements (h2, h3, etc).

Proposal

I'd like to propose expanding accessibility support as well as adding the ability to render these elements. I think this would work great with the existing aria-label spec.

It's recommended to use heading levels like <h2> rather than <h1 role="heading" aria-level="2"> though, so I think the API could look like this:

<Text accessibilityRole="heading" ariaLevel="2">

would render to this
<h2 role="heading">

I'd still recommend rendering out accessibilityRole="header" to H1's by default because I believe it is a great default, and I wouldn't want to risk breaking anyone else's projects using this.

If you'd like, I'd be willing to work on this problem and PR back into this project.

Source

JakeDawkins

👍2 🎉1

Most helpful comment

Great update. Although it took me a long time to track down. Looks like this has been implemented with using the a prop of aria-level="2" tho this functionality doesn't seem to be documented on https://github.com/necolas/react-native-web/blob/master/docs/components/Text.md or https://github.com/necolas/react-native-web/blob/master/docs/guides/accessibility.md which would be helpful.

madhaze on 22 Sep 2017

👍2

All 6 comments

An alternate name for ariaLevel could be accessibilityLevel. Just to be consistent with other accessibility prop names like accessibilityLabel and accessibilityRole.

naistran on 24 Mar 2017

@nthtran Yeah, I think that's great. Don't wanna break convention 😎

JakeDawkins on 24 Mar 2017

madhaze on 22 Sep 2017

👍2

@necolas it seems that the feature has been removed from the latest version of react-native-web, hasn't it?
I think it could be good to add it again to improve SEO websites

Spoutnik97 on 2 Jun 2020

👍1

What are you talking about?

necolas on 2 Jun 2020

@necolas @Spoutnik97 this still works, however I figured out that you need to use
<Text accessibilityRole="heading" aria-level="3"
Which is a bit confusing because it is not camelCase. This should probably be updated to support both camelCase and non.