duplicate-name

Ensure that the names of interactable elements on the UI are unique.

Description

The average user can deduce the purpose and meaning of interactive elements according to the visual context in which they are placed in the UI. Screen reader users, on the other hand, rely primarily on the accessible label of the elements to get this information. When the accessible name is not unique, these users will find it difficult to differentiate between the controls and their purpose. However, there is an exception when different controls trigger the same action. In such a situation,\there will be several controls with the same name.

Quick Fixes

• Ensure that the accessible labels of the interactive elements on the UI are unique.
• Note that you can use a hidden label for assistive technologies. In this case, the visible label doesn't have to be unique.

iOS (SwiftUI):

1/**
2*** Note that in this case the visible name is identical,
3*** but the accessible name is unique.
4*** The assumption is that the a seeing user will get the
5*** context from the visual display. If this is not the case
6*** you should ensure that the visual label is unique as well.
7**/
8
9✓ VStack {
10      Spacer()
11      Button("Add to cart") {
12          // The logic for adding a peach to the cart.
13      }
14      .accessibilityLabel("Add a peach to the cart")
15      Spacer()
16      Button("Add to cart") {
17          // The logic for adding a banana to the cart.
18      }
19      .accessibilityLabel("Add a banana to the cart")
20      Spacer()
21  }

1✗ VStack {
2      Spacer()
3      Button("Add to cart") {
4          // The logic for adding a peach to the cart.
5      }
6      .accessibilityLabel("Add to cart")
7      Spacer()
8      Button("Add to cart") {
9          // The logic for adding a banana to the cart.
10      }
11      .accessibilityLabel("Add to cart")
12      Spacer()
13  }

Android (.xml):

1✓ <Button
2    android:id="@+id/btnBuyPeach"
3    android:contentDescription="Add a peach to the cart"
4    .../>
5
6  <Button
7    android:id="@+id/btnByBannana"
8    android:contentDescription="Add a banana to the cart"
9    .../>

1✗ <Button
2    android:id="@+id/btnBuyPeach"
3    android:contentDescription="Add to cart"
4    .../>
5
6  <Button
7    android:id="@+id/btnByBannana"
8    android:contentDescription="Add to cart"
9    .../>

Android (Kotlin):

1✓ btnBuyPeach.contentDescription = "Add a peach to the cart"
2
3  btnBuyBannana.contentDescription = "Add a banana to the cart"

1✗ btnBuyPeach.contentDescription = "Add to cart"
2
3  btnBuyBannana.contentDescription = "Add to cart"

Android (Java):

1✓ btnBuyPeach.setContentDescription("Add a peach to the cart")
2
3  btnBuyBanana.setContentDescription("Add a banana to the cart")

1✗ btnBuyPeach.setContentDescription("Add to cart")
2
3  btnBuyBanana.setContentDescription("Add to cart")

React Native:

1✓ <View>
2    <Text>Peach</Text>
3    <Button accessibilityLabel={“Add a peach to the cart”}>
4        Add to cart
5    </Button>
6  </View>
7
8  <View>
9     <Text>Banana</Text>
10     <Button accessibilityLabel={“Add a banana to the cart”}>
11        Add to cart
12    </Button>
13  </View>

1✗ <View>
2    <Text>Peach</Text>
3    <Button accessibilityLabel={“Add to cart”}>
4        Add to cart
5    </Button>
6  </View>
7
8  <View>
9     <Text>Banana</Text>
10     <Button accessibilityLabel={“Add to cart”}>
11        Add to cart
12    </Button>
13  </View>

How Users Are Affected

Screen reader users will have difficulty distinguishing between controls and their purpose and may lose confidence and trust in the UI. Likewise, voice dictation users may have trouble operating the controls and encounter unexpected or unwanted outcomes.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
4.1.2 name, role, value (A)