How can I use aria standards to read $5.00/day as "five dollars per day"?

Question

When a screen reader reads the following code: <span aria-label="$5.00 per day">$5.00/day</span> It reads it as "five dollars per day five dollars per slash day". How can I get it to just read out "five dollars per day"?

Answer 1

Specifying an aria-label on a <span> is generally not supported. See "2.10 Practical Support: aria-label, aria-labelledby and aria-describedby", in particular the third last bullet point:

• "Don't use aria-label or aria-labelledby on a span or div unless its given a role."

In this case, you don't want to give the <span> a role because it doesn't have any semantic meaning (in your example). A better way to do this is with visually hidden text.

<span>
  <span aria-hidden="true">$5.00/day</span>
  <span class="sr-only">$5.00 per day</span>
</span> 

(See What is sr-only in Bootstrap 3? for info on the "sr-only" class).

In the code snippet above, the "$5.00/day" is hidden from the screen reader so it won't be announced. Instead, the "$5.00 per day" will be announced.

You could make it more "minimal" and just apply the aria-hidden to the slash and apply sr-only to "per".

<span>$5.00<span aria-hidden="true">/</span><span class="sr-only"> per </span>day</span>

(Note that I have a space before and after "per" so that the generated announcement is "$5.00 per day" instead of "$5.00perday"

The code isn't as easy to read as the first example, but it's technically less code. I suppose with more whitespace, it's more readable:

<span>$5.00
  <span aria-hidden="true">/</span>
  <span class="sr-only"> per </span>
day</span>