I have a page with many buttons labelled "Buy". How can I make them unique? They aren't in a form. Thanks

CodePudding user response：

There are many ways. Hopefully each button has a unique ID and so does something on the page containing text describing what the user would be buying. Then you can use the aria-labelledby attribute:

<button id="unique-thing-to-buy-button" aria-labelledby="unique-thing-to-buy-button unique-thing-to-buy">Buy</button>

Note that the ID's are space separated. This will announce the word buy followed buy the thing we are buying in a screen reader.

If not, you can create a translated string that accomplishes the same thing and use aria-label.

<button aria-label="buy unique thing">Buy</button>

Optimally, you would have something to improve the experience for sighted users as well. Putting a similar string in the title attribute to display on hover is a good start. Ideally you would use a widget that displays the same string on focus to cover your non-mouse users.