accessibilityRole

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.

Exercise Add a role to a heading

Add an accessibilityRole to a Text component. The value is "header". Keep the text Profile inside.

Show example solution

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

function ProfileTitle() {
  return (
    <Text accessibilityRole="header">Profile</Text>
  );
}

Test yourself

Write the button role

<TouchableOpacity accessibilityRole=____ onPress={() => {}}>

Show answer

<TouchableOpacity accessibilityRole="button" onPress={() => {}}>

Which role is given to a link?
```
<Text accessibilityRole="?">Detaylar</Text>
```
- header
- image
- button
- link
Show answer

link — The link role announces it as a link.
Match each role to its counterpart

button

Button
link

Link
header

Heading
image

Image

Next lesson: accessibilityHint

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies