hover text accessibility | XM Community
Skip to main content

How can we improve the accessibility of hover text that contains additional information, making it readable for users using accessibility software? Right now, tooltip is not readable in accesibility software 

 

 

Have you tried to apply CSS on tooltip. Please refer below link, hope it will help you.

https://www.w3schools.com/css/css_tooltip.asp


To improve the accessibility of hover text (tooltips) containing additional information, you can use the aria-describedby attribute to associate the tooltip with the element it relates to. This will make it readable for users who rely on accessibility software, such as screen readers. Here's an example snippet for CSS of how you can implement this:

/* Styling for the tooltip */
#tooltip {
  display: none;
  position: absolute;
  background-color: #000;
  color: #fff;
  padding: 10px;
  z-index: 1;
}

/* Show the tooltip on hover */
#myButton:hover + #tooltip {
  display: block;
}

 

the aria-describedby attribute is used to associate the button (myButton) with the tooltip (tooltip). The role="tooltip" attribute is added to the tooltip container, indicating its purpose.
By default, the tooltip is hidden (display: none), and it becomes visible (display: block) when the button is hovered (#myButton:hover + #tooltip selector).


Thank you, @Shivamvig_sv : But still speech viewer did not read the text in tol tip


https://designsystem.qualtrics.com/tooltip

 

Tooltip listed over here works great in accesibility software! But I’m not sure how to replicate in Qualtrics surveys. Any sugggestions?


Leave a Reply