Difference between revisions of "ARIA Tooltip"

From Level Access Web Labs
Jump to navigation Jump to search
 
(50 intermediate revisions by 3 users not shown)
Line 3: Line 3:
 
<title>ARIA Tooltip Example</title>
 
<title>ARIA Tooltip Example</title>
 
<style type="text/css">
 
<style type="text/css">
 +
 
/* Sets the font family of the document */
 
/* Sets the font family of the document */
 
body {
 
body {
Line 50: Line 51:
 
display: block;
 
display: block;
 
}
 
}
 +
 
</style>
 
</style>
 
<script type="text/javascript">
 
<script type="text/javascript">
Line 57: Line 59:
 
</head>
 
</head>
 
<body>
 
<body>
<form>
+
<form>
 +
 
 +
  <p>
 +
                          <a href="javascript:void(0)" class="acctCurBal0" aria-describedby="acctCurBal_tip_0" id="">Current Balance</a>
 +
                    <span class="none fsTip" id="acctCurBal_tip_0" style="display:none;">Your current balance includes accrued interest on new transactions for the current billing cycle. You may not be billed, or have to pay, for this accrued interest in accordance with the "Paying Interest" or "How to Avoid Paying Interest" section of your Credit Card Agreement.</span>               
 +
                        </p>
 +
--Delete Me--
 
<h1>The JS Way</h1>
 
<h1>The JS Way</h1>
 
<div class="input_field">
 
<div class="input_field">
Line 72: Line 80:
 
<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>
                         <p>(<strong>Note:</strong> IE does not support the CSS pseudo - This is only for testing and should not be used)</p>
+
                         <p>(<strong>Note:</strong> Inconsistent IE support - This is only for testing and should not be used)</p>
 
<div class="input_field">
 
<div class="input_field">
 
<label for="css_field1">CSS Field 1</label>
 
<label for="css_field1">CSS Field 1</label>
Line 88: Line 157:
 
<div role="tooltip" class="css_tooltip" id="css_link_tooltip">This is a sample link tooltip spawned using only CSS.</div>
 
<div role="tooltip" class="css_tooltip" id="css_link_tooltip">This is a sample link tooltip spawned using only CSS.</div>
 
</form>
 
</form>
 +
 
</body>
 
</body>
 
</html>
 
</html>
Line 96: Line 166:
 
1) [http://www.sitepoint.com/web-foundations/adjacent-sibling-selector-css-selector/ http://www.sitepoint.com/web-foundations/adjacent-sibling-selector-css-selector/]<br />
 
1) [http://www.sitepoint.com/web-foundations/adjacent-sibling-selector-css-selector/ http://www.sitepoint.com/web-foundations/adjacent-sibling-selector-css-selector/]<br />
 
2) [http://heydonworks.com/practical_aria_examples/ http://heydonworks.com/practical_aria_examples/]
 
2) [http://heydonworks.com/practical_aria_examples/ http://heydonworks.com/practical_aria_examples/]
 
  
 
[[Category:ARIA]]
 
[[Category:ARIA]]
 
[[Category:Aria-describedby]]
 
[[Category:Aria-describedby]]

Latest revision as of 22:20, 18 December 2018

ARIA Tooltip Example

Current Balance

--Delete Me--

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: Inconsistent IE support - 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/