Skip to main content
Logo Appt Light

Element identification on React Native

Functionality that is repeated on multiple screens should use consistent identification. Screen readers users rely heavily on their familiarity with functions that may appear on different screens. If identical functions have different labels on different screens, your app will be considerably more difficult to use. It may also be confusing and increase the cognitive load for people with cognitive limitations.

In React Native, you should create custom Components to re-use functionality on multiple screens.

When using icons, use the search function of your IDE to check all instances. The icon should have the same accessibility label on each screen, and the functionality should also be the same.

For example, when using a cross icon for closing a screen, make sure the label is 'Close' on all screens, and check that it always closes a screen.

const CloseButton = () => <Pressable
  accessibilityLabel="Close screen"
>
  <Image
    source={require("icon-close.png")}
  />
</Pressable>

Feedback?

Let us know!