Difference between revisions of "ARIA Tooltip"

From Level Access Web Labs
Jump to navigation Jump to search
Line 72: Line 72:
 
<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>
 +
</body>
 +
</html>
 +
Implementation Note: Instances have been identified at time of writing (December 2016) in which minor versions of JAWS 17 prior to 17.0.2727 would selectively fail to announce aria-describedby assigned hint values on numerous types of semantic roles (native or ARIA). Instances in which fully valid ARIA markup was present were observed to not announce the tooltip content, despite valid construction.
 +
<html lang="en">
 +
<head>
 +
<title>ARIA Tooltip Example</title>
 +
<style type="text/css">
 +
/* Sets the font family of the document */
 +
body {
 +
font-family: Helvetica;
 +
}
 +
 +
/* Sets a rounded border around the CSS tooltips and adds padding making them easier to read. Display: none; is set to hide the tooltips by default. */
 +
.css_tooltip {
 +
border: 1px solid;
 +
border-radius: 5px;
 +
width: 300px;
 +
padding: 3px;
 +
display: none;
 +
}
 +
 +
/* Sets a rounded border around the JS tooltips and adds padding making them easier to read. Display: none; is set to hide the tooltips by default. */
 +
.js_tooltip {
 +
border: 1px solid;
 +
border-radius: 5px;
 +
width: 300px;
 +
padding: 3px;
 +
display: none;
 +
}
 +
 +
/* Sets a bottom margin beneath the input fields for spacing/styling */
 +
.input_field {
 +
margin-bottom: 5px;
 +
}
 +
 +
/* Changes the display value of div elements with a class of 'tooltip' from none to block when input fields are in focus */
 +
input:focus + div.css_tooltip {
 +
display: block;
 +
}
 +
 +
/* Changes the display value of div elements with a class of 'tooltip' from none to block when input fields are hovered */
 +
input:hover + div.css_tooltip {
 +
display: block;
 +
}
 +
 +
/* Changes the display value of div elements with a class of 'tooltip' from none to block when links are in focus */
 +
a:focus + div.css_tooltip {
 +
display: block;
 +
}
 +
 +
/* Changes the display value of div elements with a class of 'tooltip' from none to block when links are hovered */
 +
a:hover + div.css_tooltip {
 +
display: block;
 +
}
 +
</style>
 +
<script type="text/javascript">
 +
// No JavaScript required for the CSS-only examples
 +
// JavaScript is in-line for the JS examples
 +
</script>
 +
</head>
 +
<body>
 
<form>
 
<form>
 
<h1>The CSS-only Way</h1>
 
<h1>The CSS-only Way</h1>

Revision as of 23:52, 16 December 2016

ARIA Tooltip Example

The JS Way

Sample Link that spawns a tooltip using JS

Implementation Note: Instances have been identified at time of writing (December 2016) in which minor versions of JAWS 17 prior to 17.0.2727 would selectively fail to announce aria-describedby assigned hint values on numerous types of semantic roles (native or ARIA). Instances in which fully valid ARIA markup was present were observed to not announce the tooltip content, despite valid construction.

ARIA Tooltip Example

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

Implementation Note: CSS Pseudo- and Combination-selectors have not had uniform support by browsers and screen readers historically. In theory aria-describedby, per Specifications, is expected to override all methods of hiding content through CSS, including the "display:none". However, older user agent combinations were observed to fail to properly announce referenced content under (admittedly) poorly documented circumstances, with a specific trend toward limited support in earlier versions of IE and JAWS. Developers are advised to consider potential browser support when using these approaches for CSS control of content display

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/