Difference between revisions of "ARIA Tooltip"

From Level Access Web Labs
Jump to navigation Jump to search
Line 69: Line 69:
 
<div role="tooltip" class="js_tooltip" id="js_field2_tooltip">This is the tooltip for JS field 2.</div>
 
<div role="tooltip" class="js_tooltip" id="js_field2_tooltip">This is the tooltip for JS field 2.</div>
 
</div>
 
</div>
<a href="#" role="button" aria-describedby="js_link_tooltip" onfocus="document.getElementById('js_link_tooltip').style.display='block';" onmouseover="document.getElementById('js_link_tooltip').style.display='block';" onblur="document.getElementById('js_link_tooltip').style.display='none';" onmouseout="document.getElementById('js_link_tooltip').style.display='none';">Sample Link that spawns a tooltip using JS</a>
+
<a href="#" aria-describedby="js_link_tooltip" onfocus="document.getElementById('js_link_tooltip').style.display='block';" onmouseover="document.getElementById('js_link_tooltip').style.display='block';" onblur="document.getElementById('js_link_tooltip').style.display='none';" onmouseout="document.getElementById('js_link_tooltip').style.display='none';">Sample Link that spawns a tooltip using JS</a>
 
<div role="tooltip" class="js_tooltip" id="js_link_tooltip">This is a sample link tooltip spawned with JavaScript.</div>
 
<div role="tooltip" class="js_tooltip" id="js_link_tooltip">This is a sample link tooltip spawned with JavaScript.</div>
 
</form>
 
</form>

Revision as of 20:35, 16 December 2016

ARIA Tooltip Example

The JS Way

Sample Link that spawns a tooltip using JS

The CSS-only Way

(Note: IE does not support the CSS pseudo - This is only for testing and should not be used)

Sample Link that spawns a tooltip using only CSS

There seems to be an issue running the CSS-only method with JAWS and Internet Explorer. The issue is due to timing and sometimes the screen reader will read the first tooltip followed by the second tooltip when the second field receives focus instead of reading the label for field 2 followed by the tooltip for field 2. No issues were found using JAWS and Firefox or NVDA with Internet Explorer or Firefox.

Sources for the CSS-only method:
1) http://www.sitepoint.com/web-foundations/adjacent-sibling-selector-css-selector/
2) http://heydonworks.com/practical_aria_examples/