Screen Reader Pronunciations

In general, don't intervene in how a screen reader will pronounce the content on your page. Exceptions include: Jargon and Branding.

Screen readers can output content in a variety of ways. This page is concerned with screen reader content presented auditorially and some of the aural design issues that can occur.

Pronunciation and Mispronunciation

With some exceptions, there is no need to worry about screen reader mispronunciations. If a word has a sufficient mix of vowels and consonants, the screen reader will attempt to announce it using various heuristics. For example, screen readers will try to pronounce acronyms if there are enough vowels (e.g., NASA would likely be pronounced as a word, “nasa”), otherwise the word will be spelled out (e.g., NSA would likely be pronounced as individual letters, “N S A).

Often, screen readers confuse words that are spelled the same yet have different pronunciations in different contexts. Such homographs are typically announced the same way even though the stress and/or vowel might differ depending on the context. For example, the present and past tense of “read” are normally pronounced differently, but a screen reader will announce them the same.

Screen readers also have built-in dictionaries. This can mean that some words, abbreviations, and symbols are already programmed to be announced a certain way (e.g., “Dr.” might be announced “drive” instead of “doctor”).

Users can also customize the pronunciation of words. This can impact individual user experience and is outside the control of a developer.

In summary, do not misspell things on purpose to force a screen reader to read it correctly. If the user does not understand a mispronounced word, they can listen to the word again or listen to the spelling of the word. Generally, most screen reader users are familiar with how words are spoken by their screen reader and the various quirks it has with abbreviations, dates, times, etc. By trying to override this behaviour, you risk confusing your users.

Forcing Pronunciation

CSS supports a speech media type which could be used to manipulate aural output of content. However, this technology is poorly supported by browsers and has been deprecated.

Sometimes, it is necessary to force all screen readers to announce a word in a specific way. This is often an issue with branding where a specific aural outcome is desired. Otherwise, there should be no need to impact the user’s experience.

For example, a word that is in ALL CAPITALS might be spelled out because the screen reader’s heuristics expect an acronym, while the same word in Mixed Case is announced appropriately. It may be necessary to hide the all capitals text from the screen reader and provide an alternative mixed case text just for the screen reader.

Generally, there is no need to manipulate phone numbers and other similar information. Sometimes the value of a number might be announced rather than its digits or vice versa. Where this impacts branding, for example “311”, the number can be written with dashes (i.e., “3-1-1”) or spaces (i.e., “3 1 1”) to get the pronunciation of the digits, rather than the value (“three hundred eleven”).

Resources

Overriding Default Pronunciation

How can I override a screen-reader's pronunciation of a word in a sentence without having it pause mid-sentence?

ZIP, Z I P, or Z.I.P.? Forcing Correct Pronunciation in Screen Readers

Let’s Talk About Speech CSS