2

I'm an IT trainer, and I’d like to better understand a particular point to avoid saying anything incorrect to my trainees.

The criterion "2.5.3 Label in Name" (WCAG 2.2) tells that the aria-label should start with the visible label of the element. The goal is to ensure that voice command software, which relies on the visible name, can identify and click on the button.

Here are my questions:

  1. What happens when several buttons share the same visible name, such as “Read the article” but have different aria-labels, for example: “Read the article about Accessibility”? How does the voice command software know which button to activate if the user tell "click on read the article"?

  2. How does the user know whether they should ask the software to click on “Read the article” or “Read the article about Accessibility”? Since the software relies only on the aria-label that was read aloud to the user.

  3. In that case, wouldn’t it be better to always use sr-only instead of aria-label, so that the text is actually inside the element and not in an attribute?

Example:

<button>
  <span class="sr-only">Read the article about accessibility</span>
  <span aria-hidden="true">Read the article</span>
</button>
  1. Alternatively, are voice command tools capable of detecting a button by its aria-label? In that case, the 2.5.3 rule wouldn't be necessary...

Thank you very much for your help!

Improve this question
3
  • What is sr-only? Commented Apr 22 at 22:25
  • Good questions, I can try these scenarios out and report back later, but in case you weren’t aware, both Mac and Windows have free built in voice control software so you could also try it out yourself. I suspect similarly to screen readers though, different voice control software might handle complex cases like this differently. The best option for a VC user is visual labels exactly matching the accessible labels, but then there are tradeoffs with usability/readability. Commented Apr 23 at 0:05
  • 1
    Whether the accessible name of an element is set by the text inside the element or the aria-label attribute does not matter, voice control users will be able to use the element. Voice control only cares about the accessible name, it doesn't care how the accessible name is defined. So yes, voice control is able to access a button whose accessible name is set with aria-label, because it's the accessible name that matters, not how the accessible name is defined. Commented Apr 23 at 4:34

2 Answers 2

Reset to default
0

Refer to Technique G208: Including the text of the visible label as part of the accessible name from the W3C—specifically example 1:

A link contains visible text and hidden link text. Both together make up the link's accessible name. The visible text comes first. The idea is to make the link more descriptive for users of assistive technologies.

<p>Go to <a href="code-of-conduct.html">Code of conduct <span class="hidden_accessibly"> of ACME Corporation</span></a><p>

Note that there's not two wholly separate spans inside the link; they're just using an sr-only class to hide the specific part that differentiates the link from others on the page.

Applying that technique to your button example, you could approach that markup like this:

<button>Read the article <span class="sr-only">about accessibility</span></button>

(Also note that if clicking that button navigates the user to new content, it should likely be an anchor element instead of a button).

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thanks! In this case, I understand. Because the beggining of the visible text is relevant. But what should I do in that case ? <button aria-label="Close">X</button> If the user tell "Click on Close button" nothing will happend because the button is not detected.
+ Does this mean that using aria-label is a mistake in this context? I don't understand when aria-label should be used. Since in most cases speech recognition programs will be unable to identify the element
The visible "X" in your close button is not really the letter "X" but rather a symbol representing close. So the "X" does not need to be a part of the button's accessible name. It is fine to use aria-label="close" for this button. I'm not sure why you think this won't be detected?
Because the user will hear "Button Close". If he wants to click on it, he will say "Click on close". But the voice control tool will not be able to identify the "close"
@MGerard That's a different case, which is better to ask as a new question rather than in a comment. But refer to the "Symbolic text characters" section of SC 2.5.3. An "X" in this case functions as a symbol and not text, so SC 2.5.3 is not applicable and you should refer instead to SC 1.4.5
0

1: I'm not a regular user of voice control tools enough to encounter such cases, but implementors of have several options to handle it:

  • Take the first or any matching element they find on the page
  • Take the nearest one from current focus
  • Try to make some AI-based guess
  • Ask the user which one they want to click on, in which case they may see a list of several items having all the same "read the article" label...

In any case, it tells you that you shouldn't leave such ambiguities, because practically, you don't know how it will behave exactly. So it's better to avoid any possible conflict.

2: Voice control software normally also take aria-hidden attribute into account, so in your example, it would be "read the article about accessibility". They are also supposed to support aria-label (which answers to your point 4, and your fear about the close button described in comments).

3: According to ARIA golden rules, using .sr_only classes is preferable. ARIA rules say don't use it if don't need to, so it's always better to not use ARIA when you can do in another way (here .sr_only).

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.