Meaningful Accessible Name

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

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

Ensure 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'/>