ARIA Tooltip

From Level Access Web Labs
Revision as of 23:29, 16 December 2016 by Shuey (talk | contribs)
Jump to navigation Jump to search

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/