Difference between revisions of "ARIA Tooltip"

From Level Access Web Labs
Jump to navigation Jump to search
Line 91: Line 91:
 
</html>
 
</html>
  
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.
+
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: <br />
 
Sources for the CSS-only method: <br />

Revision as of 23:29, 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

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/