I suggest using aria-label
when you would like the screen reader to speak something different than the content contained within the tag's html markup.
I would update your code to be:
<div class="breakdown">
<span aria-label="35 New.">
<strong>35</strong> New
</span>
<br>
<span aria-label="4 Overdue.">
<strong>4</strong> Overdue
</span>
</div>
With this, a screen reader will speak the following with full pauses at each period:
35 New. 4 Overdue.
We are specifically targeting ChromeVox, but this should work for all screen readers.
Thoughts on aria-label
- 😞 Because there are two strings to maintain, it's possible they may diverge if a developer misses an update.
- 😄 When localizing strings, the string used will come from one source and be used twice, thus alleviating the duplication.
- 😄 This is the purpose of
aria-label
and how I see it used often in other projects.
- 😄 The
aria-label
strings are faster to read/grok/edit for humans.
- 😄 Less markup using
aria-label
than hidden elements.
- 😄 Tests can be updated to look for specific strings in
aria-label
. Snapshots will also capture changes, but devs have to be aware of this.
Thoughts on Hidden Elements
- 😄 Less string duplication, pre-localization.
- 😞 When using the ChromeVox shortcuts, it's possible to get to a place where as the user tabs through, the voice over sees each hidden comma/period as a separate item when in reality it should just be a sentence w/o extra markup.
- 😞 Strings with copious html markup are difficult to localize and difficult for translators to maintain.
- 😞 The extra markup feels hacky compared to
aria-label
. If the user selects text on the screen and the selection spans content which is in a hidden element, the hidden content will be copied when the user performs the copy command, and pasted when the user performs the paste command.
Considering all pros/cons, long-term my bet is that you will find that choosing aria-label
will provide the best developer, translator, and user accessibility experience.
If an element is described by a sibling element's text content, consider using aria-labeledby
to link elements.
This answer is coming in 6 years after being asked… but hopefully it will be helpful.