accessibilityRole
- React Native course
- Expert
- Lesson 26/47
- 5 min
Learn roles with accessibilityRole.
What is accessibilityRole?
accessibilityRole tells the semantic type of a component. It lets the screen reader know how to announce it: values like button, link, header, image, text.
Example: <TouchableOpacity accessibilityRole="button">. The screen reader announces it as a button. With accessibilityRole="link" it says "link". This matters because it separates visual type from semantic type: a Text can be a button. Values come from a fixed list; free text is not allowed. A wrong role confuses screen reader users.
The list of roles
Common roles: button (a tappable button), link (a link), header (a heading), image (an image), text (text), adjustable (adjustable, e.g. a slider). Each role has a screen reader counterpart.
Example: for a heading <Text accessibilityRole="header">Settings</Text>. The screen reader announces it as a heading; the user can jump between headings fast. For an image use accessibilityRole="image"; with a label it says what the image shows. The role is about behavior, not the HTML counterpart.
Practice Add a role to a heading
Add an accessibilityRole to a Text component. The value is "header". Keep the text Profile inside.
Starter code
import React from 'react';
import { Text } from 'react-native';
function ProfileTitle() {
return (
// add accessibilityRole
<Text>Profile</Text>
);
}Sample solution
import React from 'react';
import { Text } from 'react-native';
function ProfileTitle() {
return (
<Text accessibilityRole="header">Profile</Text>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Write the button role
<TouchableOpacity accessibilityRole=____ onPress={() => {}}><TouchableOpacity accessibilityRole="button" onPress={() => {}}>Explanation: The button role announces it as a button.
2 Which role is given to a link?
<Text accessibilityRole="?">Detaylar</Text>- header
- image
- button
- link Correct answer
Explanation: The link role announces it as a link.
3 Match each role to its counterpart
| Term | Meaning |
|---|---|
button |
Button |
link |
Link |
header |
Heading |
image |
Image |