Tooltips not accessible via screen reader

Hi,

I was testing out your demo to see if it worked with a screen reader, but unfortunately it doesn’t. It does work with keyboard focus though, which is great.

The reason it doesn’t work with screen readers is that you’re not referencing the content with aria-describedby correctly. Here’s your code:

<a  target="_blank" role="term" class="glossaryLinkMain  cmtt_WordPress" style="" itemprop="url" aria-describedby="tt" data-cmtooltip="<div class=glossaryItemTitle>Abbreviation</div><div class=glossaryItemBody>An abbreviation (from Latin brevis, meaning short) is a shortened form of a word or phrase. Usually, but not always, it consists of a letter or group of letters taken from the word or phrase. ForAbbreviation
<hr><div><strong>Definition of &amp;quot;<u>Abbreviation</u>&amp;quot; by Chat GPT:</strong> Abbreviation refers to a shortened form of a word, phrase or name. It is often created by taking the first few letters of each word in the phrase or name and using them to create a new word that represents the original phrase or name. Abbreviations are commonly used to save time and space in writing or speech, and can also serve as a way of simplifying complex terminology.</div></div>"><span itemprop="name"><img src="chrome-extension://jbbplnpkjmmeebjpijfedlgcdilocofh/img/icons/contrast.svg" class="wave5icon" tabindex="0" role="button" alt="CONTRAST ERRORS: Very low contrast" style="border: none; vertical-align: middle; cursor: pointer; width: 44px; height: 44px; z-index: 1000; position: relative;">Abbreviation</span><img src="chrome-extension://jbbplnpkjmmeebjpijfedlgcdilocofh/img/icons/aria.svg" class="wave5icon" tabindex="0" role="button" alt="ARIA: ARIA" style="border: none; vertical-align: middle; cursor: pointer; width: 44px; height: 44px; z-index: 1000; position: relative;"><span class="wave5text" style="background-color: rgb(21, 120, 70); color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); height: auto; width: auto; z-index: 10; font-size: 14px; line-height: 20px; font-weight: normal; font-family: &quot;Open Sans&quot;, Helvetica, Arial, sans-serif; margin: 0px; padding: 0px;">*role="term"*</span><img src="chrome-extension://jbbplnpkjmmeebjpijfedlgcdilocofh/img/icons/aria_describedby.svg" class="wave5icon" tabindex="0" role="button" alt="ARIA: ARIA description" style="border: none; vertical-align: middle; cursor: pointer; width: 44px; height: 44px; z-index: 1000; position: relative;"><span class="wave5text" style="background-color: rgb(21, 120, 70); color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); height: auto; width: auto; z-index: 10; font-size: 14px; line-height: 20px; font-weight: normal; font-family: &quot;Open Sans&quot;, Helvetica, Arial, sans-serif; margin: 0px; padding: 0px;">*aria-describedby="tt"*</span></a>

You have aria-described by for every tooltip referencing this same div:

<div id="tt" role="tooltip" aria-label="Tooltip content" class="cmtt has-in">

That means that for every tooltip the user just hears “Tooltip content” they don’t actually hear the tooltip.

The correct way to do this is to have the tooltip content in a div or other container on the page (rather than in a data attribute) that you hide with CSS. This div needs a unique ID for each tooltip that can be referenced in aria-describedby for the most tooltip trigger.

Here are some references that may be helpful:

• Accessible tooltip codepen example
• ARIA tooltip role

Would you please fix this so screen reader users can access the information too?

• This topic was modified 1 year ago by Amber Hinds.

The page I need help with: [log in to see the link]