0

I am struggling to get Voiceover to read the following sentence out correctly.

Visual display: 2.37m / 3:54am

Voiceover says "two point thirty seven minutes slash 3 fifty four em"

With a space between 2.37 and m, Voiceover says meters instead, but I don't want that space. I've tried adding a bunch of markup to break the letters up for Voiceover but hide it from sight. However, it ignored the aria-label, it reads each letter of meters out one by one and it still reads out the "m /" even though it is marked as aria-hidden

.sr-only {
    font-size: 0.01px !important;
}
<span aria-label="2.37 meters at 3:54 AM">
    <span>2.37</span>
    <span class="sr-only">metres</span>
    <span aria-hidden="true">m / </span>
    <span>3:54 A</span>
    <span class="sr-only"> </span>
    <span>m</span>
</span>
XLE_22
  • 5,124
  • 3
  • 21
  • 72
Craig
  • 8,093
  • 8
  • 42
  • 74

1 Answers1

1

Look at my answer to this question where I suggest to leave it as it is and do nothing special.

Unfortunately, all voices don't handle abreviations like m for meters in the same way, so my answer is the same here as it is for that other question: while you may improve accessibility for some users, you may also degrade it for possibly more other users.

As screen reader users, we aren't stupid, and for the best and the worst, used to pronounciation quirks like this. We will certainly understand correctly what you mean even if it says minutes rather than meters.

QuentinC
  • 12,311
  • 4
  • 24
  • 37
  • Unfortunately our stakeholders are not so forgiving and having it read out minutes in stead of meters is a fail. Can you suggest anything I can do to improve VoiceOver's interpretation of the data? – Craig Oct 16 '22 at 21:19
  • 1
    The simplest: try adding a space between the value and the m. And for AM/PM, try uppercase, it has greater chances to be interpreted correctly. Otherwise you can do `Text for screen readers`, but it's a bad practice and dwice as much job. – QuentinC Oct 17 '22 at 04:14
  • I've been trying all sorts of iterations like that and found what might be a bigger problem. the sr_only and aria-hidden work on a page where VO reads all elements in one go. But when I have to step through the elements one by one it seems to read what I can see. So now I'm focusing on what's causing that – Craig Oct 17 '22 at 19:25