Is an aria-label needed for units of measurement?

Question

With NVDA (screenreader on Windows), <p>The 36" product had this option.</p> reads as "the 36 quote product is"

With VoiceOver (screenreader on MacOS), it reads as "the 36 inches product is"

To meet basic WCAG 2.1 Level A requirements, should I be using an aria-label or similar to get NVDA to read "inches" properly, or is this an NVDA issue?

Looking at the WCAG docs I had trouble finding specifics about units of measurement.

Answer 1

Don't do anything to fix pronounciation issues like this. You have greater chances to create other problems than to fix them.

In fact, it isn't related to NVDA or VoiceOver, but rather to the actual voice used. Each voice make make a different interpretation of the text, and none is always correct in all situations.

Remember that

• Screen readers and speech synthesis don't make advanced language processing, if ever they do some at all
• As a consequence, they can't guess correctly what you really mean, semantically speaking, all the time
• You have almost no control on how to change the interpretation or help it figure it out. There are pronounciation dictionaries under user's control, but it doesn't solve everything.

I'm a screen reader user myself, and in fact, for the best and the worst, we are quite used to that kind of pronounciation or interpretation issues. This is generally not a big problem, because even if it isn't read exactly as you think it should, we are smart enough to understand what it means anyway. Sometimes we even make fun of it.

You may use a more specialized unicode character instead of the normal double quote, for example U+2033, but it isn't ideal either:

• Many screen readers and/or voices don't support such characters, leading to garbage or nothing at all pronounced
• As far as I know, this U+2033 can have several interpretations, too: inch, seconds, or double prime

You may use the visually hidden / off screen text + aria-hidden technique, like this:

Product X is 36<span class="sr_only"> inch</span><span aria-hidden="true">"</span> long.

But it's probably quite complicated for what it's worth in this particular case. Think also about the fact that the symbol " is probably understood almost everywhere when it means "inch", while the word "inch" itself has to be translated, if your site is multilingual. It's often forgotten, but labels, alternative texts and hidden texts have to be translated as all other texts.

Note that this interpretation problem isn't limited to characters like " that can be taken as "quote" or "inch". For example, some voices will systematically say "centimeters" for "cm", while it may be incorrect in some contexts. Other example, "min" can be interpreted and spoken as "minimum" or "minutes".

The world of abbreviations and symbols is very complicated, but keep in mind as a tl,dr that despite a lot of small imperfections of that kind, we are smart enough to figure it out anyway. Don't try to find workarounds that might help some people, but make the experience worse for many others.

Answer 2

Most likely the difference comes from how the different screen readers interpret the same input. While the quote seems "obvious" to VoiceOver that you meant "inches", it wasn't that evident. You can't do pretty much anything about that, other than providing hints for the readers so that they all don't need to interpret anything.

A quick solution could be

<p>The <span aria-label="36 inches">36"</span> product had this option. Bla bla bla.</p>

Here you insert hints for the reader where something "confusing" appears.

Another, more extreme, way of doing the same would be to provide an entirely different content for the screen reader, tailored knowing their limitations besides the normal one:

<p aria-hidden="true">The 36" product had this option. Bla bla bla.</p>
<p class="screen-reader-only">The 36 inches product had this option. Bla bla bla.</p>

The first paragraph is visual-only, note the aria-hidden attribute that instructs readers to ignore the whole thing. The next one is crafted from the first replacing problematic characters with the proper text. The class is defined as follows:

.screen-reader-only {
    position: absolute;
    height: 1px;
    width: 1px;
    clip: rect(1px 1px 1px 1px); // IE 6 and 7
    clip: rect(1px,1px,1px,1px);
    clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
    -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
    overflow: hidden !important;
}

Which basically hiddens away from view this chunk of text, while still allowing screen readers to pick it up and reading it.

Source and full explanation of this last trick: https://accessible360.com/accessible360-blog/use-aria-label-screen-reader-text/

Also have a read here for more details on handling special symbols for screen readers: https://www.deque.com/blog/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols/

Answer 3

When you mix in CMS, it might get messy. Ignoring CMS for the moment, when a screen reader encounters punctuation, there are a variety of things that could happen.

The first is that the user might have certain verbosity levels set. Some verbosity levels announce all punctuation, including commmas in sentences and periods at the end of sentences. That's not usually a desired behavior when navigating a normal website but can sometimes come in handy such as when you're writing javascript code and need to hear all the punctuation because it's part of the language.

Another verbosity level is some punctuation. Commas, periods, question marks, exclamation points, etc are usually not announced but others such as quote marks might be. As far as which characters will be announced, it varies from screen reader to screen reader. Some screen readers will let you choose exactly which characters should be announced.

There's also another feature on screen readers that let you change what is announced for a particular character. It's essentially a dictionary of pronunciations. So I could have " announced as "quote" or "inches".

Also note that you can have different quote symbols such as. Technically, I think the first is called a "double prime" and the second is a real quote mark (which might look different if you have an "open quote" character and a "close quote" character, where the angle of the character looks different) and the last is a "straight quote".

Because of the variety of screen reader settings and actual punctuation characters, if you want something announced a certain way, it's best to be clear and specify it yourself.

I would not recommend using aria-label unless you are specifying the aria-label on an interactive element. If you have plain text, it's better to use an "sr-only" type class that provides text for a screen reader to announce but the text isn't visibly displayed on the screen. See What is sr-only in Bootstrap 3? for more info on "sr-only".

So you could have something like:

the 36<span aria-hidden="true">"</span><span class="sr-only">inch</span> product

In addition to the "sr-only" on "inch", I also added aria-hidden on the quote/inch symbol so that the screen reader will ignore it.

The end result is that the sighted user will see "the 36" product" and the screen reader user will hear "the 36 inch product".

Note also that a Braille user will read "the 36 inch product". They won't read the quote symbol because it's hidden from assistive technology. They'll read the actual word "inch".