#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 )
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 9 years ago by
| Description: | modified (diff) |
|---|
comment:2 Changed 9 years ago by
| 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 |
comment:3 Changed 9 years ago by
What does "work fine" mean vs "does read the tooltip"? Missing a "not" in one of these two?
comment:4 Changed 9 years ago by
Whoops o_O
VoiceOver reads the tooltip, JAWS does not. I'll edit that comment for clarity.
comment:5 follow-up: 6 Changed 9 years ago by
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 follow-up: 7 Changed 9 years ago by
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 Changed 9 years ago by
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 9 years ago by
| Resolution: | → fixed |
|---|---|
| Status: | open → closed |
Tooltip: Improve accessibility by adding content to an aria-live div
Fixes #9610 Closes gh-1118
Changeset: b9e438d07c370ac2d4b198048feb6b6922469f70
comment:9 Changed 9 years ago by
| Milestone: | none → 1.11.0 |
|---|
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.