Form control labels must be unique for buttons

Viewed 156

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

2 Answers

This message basically means that you must provide more precise context in the text of your buttons, because you have at least two of them with the same accessible text and they are so undistinguishable one from the other.

When using a screen reader, depending on how do you navigate, you jump directly to a given element, but skip over the elements that can give you more context.

In your case, for example, if I navigate by from button to button, I would be jumping from one "buy" button to the next, without being told what I'm going to buy because the information isn't on the button itself but next to it. So it's absolutly required to give me more context, by extending the text of the buttons. The text in question isn't required to be visible on the screen, as it's a specific screen reader issue. However, other people may also benefit from it if the text is also available as tooltip for example.

There are several ways to add the required context to your buttons.

The simplest is probably to use screen reader specific text also known as visually hidden text, like this:

<button>Buy<span class="sr_only"> basic package for 10$</span></button>
<button>Buy<span class="sr_only"> premium package for 20$</span></button>
<button>Buy<span class="sr_only"> full package for 40$</span></button>

Where .sr_only is a specific class from bootstrap. Other frameworks have similar CSS classes doing the same. Pay attention to spacing so that words aren't uselessly glued together.

You may also use aria-label, like this:

<button aria-label="Buy basic package for 10$">Buy</button>
<button aria-label="Buy premium package for 20$">Buy</button>
<button aria-label="Buy full package for 40$">Buy</button>

Having the extended text in another element is also possible with aria-labelledby. For both aria-label and aria-labelledby, in the label, pay attention to repeat the text actually shown on the button, as the accessible label completely replaces the natural text of the button (here, repeat the word "buy").

As a final note, it's also a good practice to shortly remind of the price, like I did here. Depending on what you are selling, telling about the price late in the buying process (like just before checkout) can be considered as a dark pattern, and it's even more true with screen reader users, as they may miss indications that are obvious for sighted people.

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.

Related