Difference between revisions of "ARIA Tooltip"

From Level Access Web Labs
Jump to navigation Jump to search
Line 135: Line 135:
 
<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>

Revision as of 02:01, 17 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: 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/