Tooltip
A Tooltips provides a short description of a page element or control that become visible when the target is hovered over or focussed on.
- Contents of the tooltip are not announced on some screen readers.
All the correct aria attributes and values are present. Deemed to be a screen reader limitation.
This component was tested and signed off by Applause (external accessibility specialists).
The anchor element must be focusable (eg a Button) as this interaction is integral for the Tooltip's functionalilty.
If the information is important enough for a Tooltip, isn't it important enough to always be visible?
Where you put your Tooltip is key. It is important that Tooltips are clearly visible, but they should not obscure other important website information or elements.
Ensure that the words inside the tooltips are clear – no fancy jargon, no long-winded sentences. Just straight-up, plain-language explanations. If a tooltip makes you scratch your head, it’s not doing its job.
- Vivid Tooltip/Toggletip: Manual accessibility test
- Tooltips & Toggletips
- Tooltips Accessibility Rundown