Label in Name

An accessibility focusable view should ensure its name is included in its visible label.

Impact

VoiceOver users should have access to the same information visible on the screen. Anytime a control's text is updated, update the accessibility label to contain the new text.

Confirmation

1. Turn on VoiceOver
2. Focus on the element
3. One of the following will happen:
   • Inaccessible: VoiceOver will announce text that does not contain the visible text of the active control.
   • Accessible: VoiceOver will announce text that contains the visible text of the active control.
   • Accessible: VoiceOver will announce the visible text of the active control.

How to Fix

An issue found by this rule is caused by part or all of the visible text missing from the control's accessibility label.

UIKit

In storyboard:

1. Select the element with a LabelInName issue
2. Ensure that the Inspectors Panel is visible
3. Select the Identity Inspector
4. Under Accessibility, there is a category called "Label". Enter a label that exactly matches or contains all of the visible text.

In code:

Find where the accessibility label was set and ensure that the accessibility label's value either matches or contains all the visible text of the component.

button.title = "Login"
button.accessibilityLabel = "Submit login"

SwiftUI

Set an accessibility label that either matches or contains the component's visible text.

Button(action: {
    openMenu()
}) {
    Text("Menu")
}.accessibility(label: Text("Main Menu"))

React Native

Set an accessibility label that either matches or contains the component's visible text.

<Pressable
    accessibilityRole="button"
    accessibilityLabel="Search the store"
    onPress={...}
    <Text>Search</Text>
</Pressable>