3
  1. Most Screen readers read the custom tooltip information by default. role="tooltip" does not seem to do anything additional, like it doesnt inform user that its tooltip. Why do we need to use role="tooltip" for the tooltip container? Any specific purpose?
  2. Tooltip information not read by NVDA in IE11. Any hacks to fix?

Here's my code:

<div class="ttipcontainer">
  <button title="" class="co_tooltipElement" id="newButton05-2" aria-describedby="coid_accessibleTooltip_1"> Recent Searches </button> 
  <span tabindex="-1" class="co_accessibilityLabel" id="coid_accessibleTooltip_1" aria-hidden="true" role="tooltip">Shows information of your recent searches</span>
</div>
Daniel A. White
  • 187,200
  • 47
  • 362
  • 445
user 9631883
  • 466
  • 5
  • 14

1 Answers1

4

Heydon Pickering has a great guide on writing Accessible Toggle Tips. In it he describes why we put the role=tooltip on an element:

Note the use of the tooltip role. In practical terms, all this role offers is an assurance that aria-describedby works reliably where supported. As Léonie Watson writes, ARIA labels and descriptions sometimes don't work with all elements unless you incorporate an appropriate role. In this case, the most important role is the implicit button role of the subject element, but role="tooltip" may extend support for this labeling method in some software.

So although it doesn't provide much additional information, it does help the aria-describedby point to an element with a valid role, which helps ensure it will work properly for some screen readers.

Steven Lambert
  • 5,571
  • 2
  • 29
  • 46