ARIA Tooltip

From Level Access Web Labs
Revision as of 20:35, 16 December 2016 by Rmccaffery (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

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.

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/