CODEWITHSUNDEEP
htmluser-interfaceaccessibilityvoiceoverscreen-readers
Charlie Taylor
Charlie Taylor

Reputation: 200

How can I force Voiceover (MacOS) to read out a dollar amount correctly, ignoring inner span elements?

I have this content (simplified):

<div>
  $<span class="enlarged-text">245</span>.50
</div>

And when I use CAPSLOCK + Right (read next element) with Voiceover on Safari (MacOS Monterey 12.7.1) it reads it out as "two hundred and forty five dollars and fifty cents", as desired.

However, using the auto-readout feature of voiceover - initiated using CAPSLOCK + A - voiceover quite bizarrely reads out "two dollars, forty five point five zero". Is there a way to fix this?

I've tried the undocumented role="text" on the surrounding div and it helps somewhat, but instead reads out as "two hundred and forty five dollars, fifty" using the auto-readout. And using CAPSLOCK + Right it reads as "two hundred and forty five dollars point five zero".

<div role="text">
  $<span class="enlarged-text">245</span>.50
</div>

I also tried surrounding each piece in a separate span, but it made no difference:

<div role="text">
  <span>$</span><span class="enlarged-text">245</span><span>.50</span>
</div>

Upvotes: 3

Views: 312

Answers (1)

Damian Chudobiński
Damian Chudobiński

Reputation: 559

Using JavaScript you could make it a bit dynamically but not perfect at all

window.onload = function() {
  var priceDiv = document.querySelector('.price-container');
  var price = priceDiv.innerText;
  priceDiv.setAttribute('aria-label', price.replace('$', '') + ' dollars and ' + price.split('.')[1] + ' cents');
};

Upvotes: 0

Related Questions