Focusable Text

Link to Focusable Text copied to clipboard
Free Trial

WCAG 2.0 - 1.3.2 A Impact - Critical

Learn how we're using artificial intelligence. Learn how we're using artificial intelligence for this rule!

Views containing text should be focusable for assistive technologies such as TalkBack.

Impact

People using TalkBack with blindness or low-vision are most impacted. Text elements should be focusable so a screen reader can relay information to the end-user.

Confirmation

  1. Turn on TalkBack
  2. Attempt to focus the text element
  3. One of the following will occur:
    • Inaccessible: Text element will not be focusable.
    • Accessible: Text element is focused by TalkBack.

How to Fix

XML

Avoid setting the importantForAccessibility property on text views no. Views that people can access without assistive technology should be available for those using assistive technology.

Compose

Avoid marking Compose Text elements as invisibleToUser. Views that people can access without assistive technology should be available for those using assistive technology.

In the example below, remove invisibleToUser to ensure views are available to people using assistive technology.

Text("I am a text element.", modifier = Modifier.semantics {
    //Remove the below API to make it accessible
    invisibleToUser()
})

React Native

Text elements are accessible by default. You'll want to confirm the text is meaningful and provides context. Don't turn off accessibility by using the accessible={false} property on the Text component directly, or the importantForAccessibility='no-hide-descendants' property on the parent component.