Opened 4 years ago

Closed 3 years ago

Last modified 3 years ago

#9610 closed bug (fixed)

Tooltip: Dynamic content does not work with all AT

Reported by: dylanb Owned by:
Priority: minor Milestone: 1.11.0
Component: ui.tooltip Version: 1.10.3
Keywords: Cc:
Blocked by: Blocking:

Description (last modified by Jörn Zaefferer)

When a tooltip uses an asynchronous request (such as an AJAX call to a server) to fetch the content that is to be inserted into the tooltip, then assistive technology such as NVDA and JAWS are not able to read out the tooltip content

Here is an example HTML file with JavaScript code to reproduce the problem

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Tooltip - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.10.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.tooltip.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( document ).tooltip({
						content : function ( callback) {
							setTimeout(function () {
								callback("tooltip content simulated from AJAX");
							}, 1000);
						},
						items : ".ajaxtooltip"
					});
	});
	</script>
	<style>
	label {
		display: inline-block;
		width: 5em;
	}
	</style>
</head>
<body>

<p><a href="#" class="ajaxtooltip">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://themeroller.com" class="ajaxtooltip" >ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" class="ajaxtooltip"></p>
<p>Hover the field to see the tooltip.</p>

<div class="demo-description">
<p>Hover the links above or use the tab key to cycle the focus on each element.</p>
</div>
</body>
</html>

Change History (9)

comment:1 Changed 4 years ago by Jörn Zaefferer

Description: modified (diff)

comment:2 Changed 4 years ago by tj.vantoll

Component: ui.coreui.tooltip
Status: newopen
Summary: Dynamic content tooltips do not work with all ATTooltip: Dynamic content does not work with all AT

This seems to work fine on VoiceOver but I confirmed that JAWS on Windows 8.1 does read the tooltip content in the provided test case.

comment:3 Changed 4 years ago by Jörn Zaefferer

What does "work fine" mean vs "does read the tooltip"? Missing a "not" in one of these two?

comment:4 Changed 4 years ago by tj.vantoll

Whoops o_O

VoiceOver reads the tooltip, JAWS does not. I'll edit that comment for clarity.

comment:5 Changed 4 years ago by Jörn Zaefferer

Have you tried the key combo in JAWS that tells it to read descriptions? As far as I remember, JAWS tends to be less verbose on tooltips, and you have to tell it to actually read tooltips. Might be a good idea to compare with regular non-async tooltips to be sure.

comment:6 in reply to:  5 ; Changed 4 years ago by tj.vantoll

Replying to joern.zaefferer:

Have you tried the key combo in JAWS that tells it to read descriptions? As far as I remember, JAWS tends to be less verbose on tooltips, and you have to tell it to actually read tooltips. Might be a good idea to compare with regular non-async tooltips to be sure.

I had an example where synchronous tooltips were read by JAWS and asynchronous ones were not. That being said I am no JAWS expert and I did not experiment with its key combos to read the descriptions. I also did not try NVDA so there's definitely some more exploration that could be done here.

Perhaps @dylanb could give us some more specific information about this.

comment:7 in reply to:  6 Changed 4 years ago by dylanb

Replying to tj.vantoll:

Replying to joern.zaefferer:

Have you tried the key combo in JAWS that tells it to read descriptions? As far as I remember, JAWS tends to be less verbose on tooltips, and you have to tell it to actually read tooltips. Might be a good idea to compare with regular non-async tooltips to be sure.

I had an example where synchronous tooltips were read by JAWS and asynchronous ones were not. That being said I am no JAWS expert and I did not experiment with its key combos to read the descriptions. I also did not try NVDA so there's definitely some more exploration that could be done here.

Perhaps @dylanb could give us some more specific information about this.

VO (iOS), NVDA and JAWS all read titles and aria-describedby automatically. VO on Mac OS X is a little different in that the default settings cause a delay and a bunch of junk information to be read before the "hint" is read. IMHO, most users will turn off that junk announcement and also reduce the delay - especially if they have learned using NVDA or JAWS where this is the default.

From a user perspective, how would a blind user know that there is some "hidden tooltip" that they can have read out by pressing some key? if you would insert the tooltip into the document immediately after the element itself, then the user could discover it by doing DOM navigation - however this would make the tooltip not work naturally inside forms (when applied to form elements) because the natural navigation mode for most users there is forms mode, not DOM nav.

comment:8 Changed 3 years ago by Dylan Barrell

Resolution: fixed
Status: openclosed

Tooltip: Improve accessibility by adding content to an aria-live div

Fixes #9610 Closes gh-1118

Changeset: b9e438d07c370ac2d4b198048feb6b6922469f70

comment:9 Changed 3 years ago by Scott González

Milestone: none1.11.0
Note: See TracTickets for help on using tickets.