Active Control Name

Active Control Name finds accessibility elements that are considered, or contain, an interactive element (control) and ensures the element has the appropriate text available to VoiceOver.

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"
/>