ARIA Tooltip

From Level Access Web Labs
Jump to: navigation, search

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/