Provide pronunciation for ambiguous words

Example of phonetic pronunciation of the word "anemone"
Image description: The word "Anemone" is highlighted, with the phonetic spelling below that says, "uh-nem-uh-nee." On the right is a small green square character saying, "uh-nem uh-nem uh-nem uh-nem-nee?" (Which is a reference to the Finding Nemo movie).

This page is in progress -

If you would like to contribute or make a case to prioritize this page, please fill out the form below.

Why This is Important

Explaining how to pronounce an ambiguous word is accessible to screen reader users and people with reading or learning disabilities.

Pronunciation guides are helpful for understanding uncommon words, abbreviations, heteronyms (words that sound the same but mean different things), and non-English words.

This is accessible to screen reader users because the screen reader reads everything on the page out loud, and it’s important to make sure it’s pronouncing everything correctly. Pronunciation guides are also accessible to people with reading or learning disabilities who may need more support in reading.

This references WCAG criterion 3.1.6 Pronunciation (Level AAA).

How to Implement This

There are a few different ways to implement this that you can choose from, depending on your user needs and context.

Provide the phonetic pronunciation directly after the word

For example:

It would help your case if there’s no evidence against you that could be considered inculpatory (in-ˈkəl-pə-ˌtȯr-ē).
My last name is Zhang (pronounced jAHng).

Many dictionary and glossary websites and apps also include an audio file with the phonetic pronunciation. This helps ensure that hearing people can understand how a native speaker would pronounce the term.

Provide pronunciation in a glossary

A glossary can help centralize abbreviation expansions, definitions, and pronunciation all in one place. As an extra accessibility boost, you can link the term directly to where it’s defined in the glossary.

Use the ruby pronunciation element (WIP)

Some accessibility docs recommend using the ruby text element to programmatically set the pronunciation. However, according to some user feedback, this is actually not recommended because screen reader users are used to the quirks of their technology. Overriding the pronunciation might run the risk of confusing people.

If you have additional thoughts about this, please fill out the form below!

How to Test This

Manually assess the content for any complex and ambiguous words that may require a pronunciation guide.

Credits

No credits yet. But this could be you!
No items found.

Contribute and Give Feedback

If you would like to provide feedback or contribute content on this resource, please fill out the form below.

Thank you, your submission has been received!
Oops! Something went wrong while submitting the form. Please check your internet connection and try again.

If you continue to encounter issues, please reach out to alexyingchen(at)gmail.com.