interactable-role

A role tells people and assistive technologies what an element is and how it behaves. When a screen reader announces “button”, users expect an action. When it announces “checkbox” or “switch”, users expect a toggle between checked and unchecked, or on and off. Most native components provide the appropriate role by default. If you extend a component, keep the added behavior consistent with its role. If you make a non-interactive element, such as a text view or an image, respond to taps, explicitly set its role with the platform accessibility API.

Pass Patterns

Android

<TextView
    android:id="@+id/payText"
    android:layout_width="..."
    android:layout_height="..."
    android:text="Pay now" />

payText.setOnClickListener { pay() }
ViewCompat.setAccessibilityDelegate(payText, object : AccessibilityDelegateCompat() {
    override fun onInitializeAccessibilityNodeInfo(
        host: View,
        info: AccessibilityNodeInfoCompat
    ) {
        super.onInitializeAccessibilityNodeInfo(host, info)
        info.className = Button::class.java.name
    }
})

Text(
    text = "Pay now",
    modifier = Modifier
        .semantics { role = Role.Button }
        .clickable { pay() },
)

Cross Platform

ElevatedButton(
  onPressed: pay,
  child: const Text('Pay now'),
),

<Pressable accessibilityRole="button" onPress={pay}>
  <Text>Pay now</Text>
</Pressable>

Fail Patterns

Android

<TextView
    android:id="@+id/payText"
    android:layout_width="..."
    android:layout_height="..."
    android:text="Pay now" />

payText.setOnClickListener { pay() }

Text(
    text = "Pay now",
    modifier = Modifier
        .clickable { pay() },
)

Cross Platform

GestureDetector(
  behavior: HitTestBehavior.opaque,
  onTap: pay,
  child: const Padding(
    padding: EdgeInsets.all(12),
    child: Text('Pay now'),
  ),
),

Try It Yourself

Using a screen reader

1. Turn on VoiceOver on iOS, or TalkBack on Android.
2. Swipe right or left to move to the interactive element.
3. Listen for the element's role after its name.

Expected results: The screen reader announces a role that matches the element's behavior, for example “Pay now, button”.

Actual results: The screen reader announces only the element's text, such as “Pay now”, with no role. TalkBack may add “double tap to activate”, which shows the element is actionable but not what it is.

Using developer tools

1. iOS: In Xcode, open Xcode > Open Developer Tool > Accessibility Inspector, select the simulator or device, and point at the element. Check its Traits.

Expected results: The Traits include a role that matches the element's behavior, such as Button.

Actual results: The Traits show Static Text, or no role at all.

FAQ

Standards and Regulations

Personas impacted by this issue

• Screen Reader

Related Issues

• accessible-name
• conflicting-state-in-name
• conflicting-traits
• conflicting-type-in-label
• ignored-by-assistive-technology
• invalid-range-values
• non-interactive-in-focus-sequence