Tooltip and popover UI elements may not necessarily be considered a mouse-only UI element. There is also keyboard and touch navigation to be aware of, including people with disabilities that rely on assistive technology such as screenreaders to navigate user interfaces.
To ensure these users get the best possible experience, Tippy already employs baked-in defaults to ensure accessibility. However, some special consideration should be taken into account when using the library so you can be aware of potential accessibility problems that may arise.
#Use natively focusable elements
Tooltips should only be applied to natively focusable elements like
<input>. Some screenreader software may not announce the tooltip on an
<div>, even if you add a
tabindex="0" attribute on it so that
it can receive focus.
#Mouse, keyboard, and touch input
The default trigger for tooltips is
"mouseenter focus" This means both a hover
via mouse and focus via keyboard navigation will trigger a tooltip. Both of
these events also cover touch devices via a tap, with some mobile browsers
mouseenter and others
focus (or both).
#Announcing tooltip content
Non-interactive tooltips give the reference element an
attribute once they show:
<button aria-describedby="tippy-1">Text</button> <div id="tippy-1" role="tooltip" class="tippy-popper"> <!-- inner elements --> </div>
This allows screenreader software to announce the tooltip content describing the reference element once it's in focus.
Tippy uses two techniques to ensure interactive popovers are accessible:
This means once the reference element has focus, the assistive technology will let the user know it has an expandable popover attached to it.
Once they open it, elements within the tippy can be tabbed to immediately once focus has left the reference element. This relies on there being no more focusable sibling elements after the reference element itself.
Before opening the popover:
<div id="parent"> <button aria-expanded="false">Text</button> </div>
After opening the popover:
<div id="parent"> <button aria-expanded="true">Text</button> <div id="tippy-1" role="tooltip" class="tippy-popper"> <!-- inner elements, with focusable content --> </div> </div>
You should wrap the reference element in its own parent element (
<span>) if it's not the only focusable sibling element.
Sometimes, this behavior won't work for your app due to clipping issues. In this
case, you need to specify a custom
appendTo element outside of the parent node
context and use a focus management solution to handle keyboard navigation.