Tooltips with WAI-ARIA

Span elements hold the tooltips. Role="tooltip" is used.

Basic tooltip (aria-hidden except when visible)

• A buttonadditional info about the button
• A linkadditional info about the link

Silent tooltips (Always aria-hidden. Good for situations like when an icon has alt-text that matches the tooltip.)

• A buttonA button
• A linkA link

Always-present tooltips (Never aria-hidden.)

• A buttoninformation about the button
• A linkinformation about the link

Testing

Keyboard Only - works everywhere tested (mouse too where applicable!)

• Windows 7 FF 33.1
• Windows 7 IE 11.0.9600.17280
• Windows 7 Chrome 39.0.2171.65
• OS X 10.9.5 Safari 7.0.6
• OS X 10.9.5 FF 33.0.3
• OS X 10.9.5 Chrome 39.0.2171.71
• Android 4.4.2 with "Internet" 1.5.28
• Android 4.4.2 with Chrome 39.0.2171.59

Screen Readers that didn't display effects of role="tooltip"

• VO OS X 10.9.5 Safari 7.0.6 (Bug #19168973)
• VO OS X 10.9.5 Chrome 39.0.2171.71

Screen Readers that did display effects of role="tooltip"

• VO OS X 10.9.5 FF 33.0.3 (Same issue with repeating as with ordinary links and buttons in a list.)
• JAWS 15.0.12085 Windows 7 FF 33.1
• JAWS 15.0.12085 Windows 7 IE 11.0.9600.17280
• JAWS 15.0.12085 Windows 7 Chrome 39.0.2171.65
• NVDA 2014.3 Windows 7 FF 33.1
• NVDA 2014.3 Windows 7 IE 11.0.9600.17280 (timing issue - misses announcement for the ones that are aria-hidden at first)
• NVDA 2014.3 Windows 7 Chrome 39.0.2171.65