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>
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.