Active Control Name

Any interactive view should have an accessible name available for assistive technologies such as VoiceOver and Voice Control.

Impact

People using VoiceOver are most impacted. A control element without a name will not relay the full context or purpose to the person interacting with the control.

Confirmation

1. Turn on VoiceOver
2. Focus the control
3. One of the following will happen:
   • Inaccessible: It will not announce its name, only its role and value if present.
   • Accessible: It will announce its Name in VoiceOver.

How to Fix

UIKit

To fix an issue found by this rule, add an accessibilityLabel to the control.

button.accessibilityLabel = "Deque Systems Website"

SwiftUI

Ensure the control's text is meaningful or provide an accessibilityLabel if more context is needed.

Use case: Button with an Image for its label

Ensure the image has a meaningful name. Know that this won't be an option when supporting multiple languages. If the name isn't viable, set an accessibilityLabel on the image.

Alternatively, combine the control and its subviews to make one element. If meaningful text isn't available, set an accessibilityLabel on the entire view as shown below.

var body: some View {
    HStack(alignment: .center, spacing: 10,
           content: {
        Text("axe DevTools for iOS")
        Spacer()
        Button(action: { openLink() },
               label: {
            Image(systemName: "arrow.up.forward.app")
                .accessibilityHidden(true)
                .frame(minWidth: 50, minHeight: 50)
        })
        .accessibility(removeTraits: .isStaticText)
        .accessibility(removeTraits: .isButton)
        .accessibility(addTraits: .isLink)
    }).padding(16)
        .accessibilityElement(children: .combine)
}

React Native

To fix an issue found by this rule, add an accessibilityLabel to the control component.

<TextInput
  ...
  accessibilityLabel="First Name"
/>

When elements are grouped together within a containing view, add the accessible prop, and the accessibilityLabel prop to the containing view:

<View
   importantForAccessibility='no-hide-descendants'
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel={"Dark Mode"}
   accessibilityValue={{ text: "" + isEnabled }}
   accessibilityRole='switch'
   onPress={() => { 
      setIsEnabled(!isEnabled) 
    }}
 >            
    <Switch
      trackColor={{ false: 'lightgray', true: 'dimgray' }}
      ios_backgroundColor={'lightgray'}
      thumbColor={'white'}
      onValueChange={ () => {
         setIsEnabled(!isEnabled)
      }}
      value={isEnabled}
      accessibilityElementsHidden={true}
     />
</View>