Controls have same name but different actions

Rule

Labels MUST be meaningful.

Background

When multiple controls on a page have the same name but a different action, visual users may be able to tell the purpose of each control by its location on the screen or the content near it, but screen reader users may not be able to figure that out so easily. (For example, when there are multiple "Buy Me" buttons on the screen, which product will a particular button buy?) Controls with the same name but different action can be differentiated programmatically without changing the visual appearance of the content. This will allow a screen reader user to understand what each control will do and avoid making mistakes.

How to Fix

Fix this issue by using ONE of the following techniques:

1. Use an aria-label attribute to provide a complete programmatic label for the control.

<button aria-label="Register for Class A: House training your puppy">Register</button>

2. Use an aria-describedby attribute to associate visible text with the control to provide a complete description of its purpose.

<h3 id="class-a">Class A: House training your puppy</h3> .....

<button aria-describedby="class-a">Register</button>

3. Change the control label (both visible and programmatic) to provide a complete description of its purpose.