Label at Front

Any visible text of an interactive view should be at the start of the view's accessible name.

Impact

VoiceOver users expect the accessible name announced first when interacting with a control. As a best practice, we recommend having a controls visible text within the name and all other information within the accessible value, hint, or role.

Confirmation

1. Turn on VoiceOver
2. Focus the element
3. One of the following will happen:
   • Inaccessible: VoiceOver will announce other text before announcing the active control's text
   • Accessible: VoiceOver will announce the active control's text first

How to Fix

An issue found by this rule is caused by the visible text missing from the start of the control's accessibility label.

UIKit

In storyboard:

1. Select the element with a LabelAtFront 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 either exactly matches or begins with the visible text.

In code:

Find where the accessibility label has been set, and verify that the accessibilityLabel's value either matches or begins with all the visible text of the component.

button.title = "Login"
button.accessibilityLabel = "Login to Your Account"

SwiftUI

Ensure to set an accessibility label that either matches or begins with all the visible text of the component.

Button(action: {
    openMenu()
}) {
    Text("Menu")
}

React Native

The accessibilityLabel property should start with the component's visible text.

By default, a button will use its title as its accessibilityLabel and will therefore pass this rule.

<Button 
   title={'Menu'}
   mode='contained'
   accessibilityLabel='Menu'
/>

If you choose to customize the accessibilityLabel for a button, ensure it starts with the text of the title.

<Button 
   title={'Log In'}
   mode='contained'
   accessibilityLabel='Log In to Transfer Money'
/>
For other components without an explicit title, or when setting the `accessibilityLabel` explicitly, ensure that the `accessibilityLabel` begins with the component's visible text.
```jsx
<View style={styles.container}>
   <Button title='Menu' accessibilityLabel='Menu: Tap to Open'>
</View>