How to make screen readers read C/F as Celsius/Fahrenheit?

Question

I have a simple webapp with a bunch of recipes and I'm trying to make it accessible to people who use screen readers.

Often cooking temperature is denoted simply as C (for Celsius) and F (for Fahrenheit).

Screen readers read these as letters and I thought it was a bit confusing, as we are talking about temperatures.

My goal is to maintain a sentence like this:

<p> Turn the oven on to 350 F </p> .

Unfortunately, screen readers read it as:

"Turn the oven on to three hundred and fifty f" .

I would like screen readers to pronounce it like so:

"Turn the oven on to 350 degrees Fahrenheit"

Is it possible to somehow specifically indicate to screen readers how to read specific letters or words? Is it achieveable using ARIA notation or should I just have a hack where I have an invisible sentence:

<p> Turn the oven on to 350 degrees Fahrenheit </p>

Answer 1

It should be denoted °C (and °F until USA joins other countries of this planet ^^). Only Kelvin degrees are written without a °
It should help screen readers to understand that it's a unit, though I didn't test those. Otherwise @boby212 solution with abbr element is a WCAG 2.0 Technique: Providing definitions for abbreviations by using the abbr and acronym elements

Answer 2

I am a screen reader user and as far as I know this is not possible. Even if it is possible it is not necessary. Anyone with enough knowledge to use a screen reader will also be able to tell by context why there is an F or C after a number. Just because it sounds confusing to you does not mean it is confusing to someone who has used a screen reader for a long time.

Answer 3

Use abbr tag.

<p> Turn the oven on to 350 <abbr title="Fahrenheit">F</abbr> </p>.

But your screenreader should had been configured to speak abbreviation.

To set your Jaws: -> Utilities > setting center -> web /HTML/PDF > reading > expand Abbreviation.

Answer 4

Well, just going to post another approach to this and similar problems (like using single letters in table headers for a score board) What you can do is as @boby212 said and use <abbr title="celsius">°C</abbr> but as pointed out just some screen readers announce abbreviations by default.

..so another method is by using ARIA and replacing the visual abbreviation like this:

<p>Put the oven on 250<span aria-hidden="true">C</span><span class="visually-hidden">Celsius</span>.

Then hide .visually-hidden with CSS, like this:

.visually-hidden{
  position: absolute;
  left: -999em;
}

As I said this can also be used with tables or displaying months with 3 letters, and many more use cases. Hope this helps in future situations.