Don’tRepeat one generic name
Button: Add to cartButton: Add to cartButton: Add to cart
The person must leave the button list and inspect surrounding content to discover which product each action affects.
<button>Add to cart</button>The principle
The repeated action principle
Keep the visible action words. Add the missing product context to the accessible name.
Button lists
Names must work outside the card.
Screen-reader users can navigate a list of buttons without hearing all nearby content. If every name is “Add to cart,” the choices are indistinguishable.
DoAppend product context
Button: Add to cart — Harbor trail bootButton: Add to cart — Canvas day packButton: Add to cart — Weather shell
The visible phrase remains intact for speech input, while each accessible name is unique.
<button>
Add to cart
<span class="visually-hidden"> — Harbor trail boot</span>
</button>Live pattern
Same visual label. Clear result.
Activate any button. Its hidden product context is also used in the visible and announced confirmation.
Harbor trail boot
$128
Canvas day pack
$84
Weather shell
$156
Naming rules
Preserve what people can see.
Speech-input users often say the visible words to activate a control. The accessible name should contain that visible label, preferably at the beginning and in the same order.
Good
“Add to cart — Harbor trail boot” contains the complete visible label.
Risky
aria-label="Buy Harbor boot" replaces the visible words and can break voice commands.
Also avoid
A clickable outer card containing a title link and button creates nested or competing interactive targets.
Quick test
List the buttons.
- Open the accessibility tree or screen-reader button list.
- Confirm each repeated action can be distinguished without surrounding text.
- Confirm the accessible name contains the complete visible label.
- Use speech input and try the visible command “Click Add to cart.”
- Check that no button or link is nested inside another interactive element.
- Keep the product context when the button’s state text changes later.