#9610 closed bug (fixed)

Opened October 20, 2013 04:01PM UTC

Closed December 19, 2013 03:36PM UTC

Last modified December 19, 2013 03:37PM UTC

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

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>
Attachments (0)
Change History (9)

Changed October 21, 2013 10:15AM UTC by jzaefferer comment:1

description: 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> \ → 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> \ }}}

Changed October 21, 2013 02:13PM UTC by tj.vantoll comment:2

component: ui.core → ui.tooltip
status: new → open
summary: Dynamic content tooltips do not work with all AT → Tooltip: 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.

Changed October 21, 2013 02:27PM UTC by jzaefferer comment:3

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

Changed October 21, 2013 02:29PM UTC by tj.vantoll comment:4

Whoops o_O

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

Changed October 21, 2013 02:33PM UTC by jzaefferer comment:5

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.

Changed October 21, 2013 02:48PM UTC by tj.vantoll comment:6

Replying to [comment:5 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.

Changed October 26, 2013 08:51PM UTC by dylanb comment:7

Replying to [comment:6 tj.vantoll]:

Replying to [comment:5 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.

Changed December 19, 2013 03:36PM UTC by Dylan Barrell comment:8

resolution: → fixed
status: open → closed

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

Fixes #9610

Closes gh-1118

Changeset: b9e438d07c370ac2d4b198048feb6b6922469f70

Changed December 19, 2013 03:37PM UTC by scottgonzalez comment:9

milestone: none → 1.11.0