Active Control Name

Link to Active Control Name copied to clipboard

WCAG 2.0 - 4.1.2 A Impact - Critical

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

note

Requires the accessibility layer for accurate results. Learn how to load the accessibility layer here.

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