Advice

I have in my react native project header with this structure:

<View style={styles.header}>
  <View style={styles.leftIcon}>
    <TouchableOpacity accessibilityRole="button" />
  </View>

  <View style={styles.title}>
    <Text accessibilityRole="header">Screen Title</Text>
  </View>

  <View style={styles.rightIcon}>
    <TouchableOpacity accessibilityRole="button" />
  </View>
</View>

Visually, the layout is correct (back icon on the left, title centered, close/share icon on the right). VoiceOver and TalkBack read them in this order:

  1. Left icon

  2. Title

  3. Right icon

I want the screen reader to read:

  1. Title

  2. Left icon

  3. Right icon

Is there any way to control the screen reader order in React Native, without changing the JSX element order and adjust the layout with absolute positioning?

Improve this question

2 Replies 2

C3roe
•

Theoretically, you can do this via CSS, using the reading-flow and reading-order properties - but browser support is still dodgy.

https://developer.mozilla.org/en-US/docs/Glossary/Reading_order#modifying_reading_order_in_css

An alternative is to change the order of the elements in the DOM. You don't necessarily need to use absolute positioning then to get them back into the right visual order - if you make the container a flex container, then you can influence the order in which the children render, via the order property. (Note that tab order still follows DOM order then - you could apply a tabindex if that bothers you.)

Improve this answer
bytebunny
•

I’m working in react native so the DOM approach doesn’t apply here.

I was trying to see if there’s any way to control the screen reader order without changing the JSX structure, but I’ll give that a try.

Improve this answer

Your Reply

By clicking “Post Your Reply”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.