Summary - Accessibility

Combine Label, Role, Hint and VoiceOver to write an accessible button.

Summary - Accessibility

In this group you saw accessibilityLabel, accessibilityRole, accessibilityHint, accessibilityState and VoiceOver/TalkBack testing. An accessible component has four pieces: what it is (label), which type (role), what it does (hint) and its current state (state).

In the last lesson you will write a component that joins all four. This way screen reader users can roam the app smoothly. Accessibility is not an extra; it is part of every component. Do not leave it untested; walk at least one screen with VoiceOver.

Exercise Combine the four props

Add four accessibility props to a TouchableOpacity: accessibilityLabel="Notifications", accessibilityRole="button", accessibilityHint="Open notifications", accessibilityState={{ selected: true }}. Include onPress too.

Show example solution

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

function BellButton() {
  return (
    <TouchableOpacity accessibilityLabel="Notifications" accessibilityRole="button" accessibilityHint="Open notifications" accessibilityState={{ selected: true }} onPress={() => {}}>
      <Text>Notifications</Text>
    </TouchableOpacity>
  );
}

Exercise Write an accessible image

Add accessibilityLabel="Logo" and accessibilityRole="image" to an Image component. The source prop is already given.

Show example solution

import React from 'react';
import { Image } from 'react-native';

function Logo() {
  return (
    <Image accessibilityLabel="Logo" accessibilityRole="image" source={require('./logo.png')} />
  );
}

Test yourself

Which one gives a component's state?
```
accessibilityState={{ checked: true }}
```
- accessibilityLabel
- accessibilityState
- accessibilityRole
- accessibilityHint
Show answer

accessibilityState — accessibilityState carries the state.
Match each prop to its role

accessibilityLabel

Says what it is
accessibilityRole

Semantic type
accessibilityHint

Says what it does
accessibilityState

Current state

Next lesson: What is i18n?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies