Search code examples
htmllabelaccessibility

Form control labels must be unique for buttons

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

Solution

  • 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.