Focusable Text

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

Impact

People using VoiceOver 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 VoiceOver
2. Attempt to focus on the text element
3. One of the following will occur:
   • Inaccessible: Text element will not be focusable.
   • Accessible: Text element is focused by VoiceOver.

How to Fix

An issue found by this rule is caused by a text element not being marked as an accessibility element. If there is a focusable parent view, then text does not need to be individually focusable. An example of this would be a label for a control, or a control's describing text.

UIKit

To fix in Storyboard:

1. Navigate to the text element.
2. Confirm that the Inspector Panel is visible.
3. Select the Identity Inspector.
4. Under "Accessibility", select the "Enabled" checkbox.

To fix in Code:

Make the text element focusable by VoiceOver:

label.isAccessibilityElement = true

SwiftUI

In SwiftUI, text elements are accessible by default. You'll want to confirm the text is meaningful and provides context. Don't turn off its accessibility by using the accessibility hidden view modifier.

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 accessibilityElementsHidden=true property on the parent component.