Label in Name

An accessibility focusable view should ensure its name includes 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

The accessibilityLabel property should either match or contain the component's visible text.

By default, a button will use its title as its accessibilityLabel, and will therefore pass this rule.

<Button 
   title={'Menu'}
   mode='contained'
   accessibilityLabel='Menu'
/>

For interactive elements without a title, use a touchable view that contains the control and text components. In this manner, the text component becomes the visible label for the control. Set the containing element's accessibilityLabel to either match or contain the visible text.

<TouchableOpacity
   style={styles.switchRow}
   importantForAccessibility='no-hide-descendants'
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel='Dark Mode'
   accessibilityValue={{ text: "" + isEnabled }}
   accessibilityRole='switch'
   onPress={() => { 
     setIsEnabled(!isEnabled)
   }}> 
     <Text style={{ fontSize: 22 }}> 
        Subscribe
     </Text>
     <Switch
        trackColor={{ false: 'lightgray', true: 'dimgray' }}
        ios_backgroundColor={'lightgray'}
        thumbColor={'white'}
        accessibilityElementsHidden={true}
        importantForAccessibility='no-hide-descendants'
        value={isEnabled}

         onValueChange={() => {
           setIsEnabled(!isEnabled);
         }}
     />
</TouchableOpacity>