If you want to make your tooltips accessible (hint: you should), here is what we recommend.
When to Use a ToolTip
You should use a tooltip when a link or button contains only an icon.
A few things to remember:
- If the icon is not very common, it is essential to include a tooltip.
- The tooltip should appear when the element is in focus.
- The tooltip should succinctly describe the purpose.
When You Don’t Need a ToolTip
If the icon is common, a tooltip is not required, and not including one is not a direct failure of WCAG guidelines.
A good example of a common icon is using an envelope icon to send an email.
What About Social Media Icons?
It is best practice to add tooltips to social media icons, but it is not a violation of the WCAG success criteria if you do not include them.
Learn More
- Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information.
- Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name.
The W3C is working on creating more detailed tooltip guidelines. We will update this post when there is new guidance (last updated 2/19/2021).
