Meaningful Accessible Name

An element's accessible name should not include its accessibility trait.

This rule enforces a best practice set by Apple's Human Interface Guidelines. You can turn off this rule from the Mobile Dashboard or by ignoring the rule in tests written for iOS.

Learn how to turn off rules from the Mobile Dashboard.

Impact

VoiceOver users should have access to the same information visible on the screen without repeated information in the VoiceOver announcement.

Confirmation

1. Turn on VoiceOver
2. Focus on the element
3. One of the following will happen:
   • Inaccessible: VoiceOver will announce the element's accessibility trait twice - as part of the element's accessible name, and as an accessibility trait (e.g. announcement will be "Next Button, button").
   • Accessible: VoiceOver will announce the element's accessible name followed by the accessibility trait. The trait will only be announced once after the name (e.g. announcement will be "Next, button").

How to Fix

An issue found by this rule is caused when the accessible name contains the element's accessibility trait.

UIKit

In storyboard:

1. Select the element with a MeaningfulAccessibleName 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, and does not include the element's accessibility trait as part of the label.

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 and does not contain the element's accessibility trait.

button.title = "Next"
button.accessibilityTraits = .button

SwiftUI

Make sure to set an accessibility label that does not include the element's accessibility trait.

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

React Native

Ensure that an element's accessibility label does not contain the element's accessibility role.

<Button title='Order now' accessibilityLabel='order now' accessibilityRole='button'/>