title: Accessibility | Tippy.js
url: https://atomiks.github.io/tippyjs/v6/accessibility/
hash_url: af0aee71fef1821c89ce368622f9a464
archive_date: 2024-02-03
og_image: https://atomiks.github.io/tippyjs/static/logo-ebc385458e03fdb24af078536af88065.svg
description: Tooltip and popovers are usually not mouse-only UI elements. If vital functionality or information is contained within them, they should be accessible to keyboard and touch inputs so that users who navigate interfaces without using a mouse are not locked out.
favicon: https://atomiks.github.io/tippyjs/favicon-32x32.png?v=68cd85fe631cbce4dad8be8ef26f93f3
language: en_US

<div class="css-cbke9o exyshz41"><h2>Accessibility</h2><p>Tooltip and popovers are usually not mouse-only UI elements. If vital
functionality or information is contained within them, they should be accessible
to keyboard and touch inputs so that users who navigate interfaces without using
a mouse are not locked out. This is especially true for people with disabilities
such as low vision who rely on screen reader technology to assist them with
using an application.</p><p>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.</p><h3><a class="link-icon css-wumm7u e1fogcta0" id="use-natively-focusable-elements" href="#use-natively-focusable-elements">#</a>Use natively focusable elements</h3><p>Tooltips should only be applied to natively focusable elements like <code>&lt;button&gt;</code>
or <code>&lt;input&gt;</code>. If you are using a <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code> element, ensure you add
<code>tabindex="0"</code> so that it can receive focus.</p><h3><a class="link-icon css-wumm7u e1fogcta0" id="mouse-keyboard-and-touch-input" href="#mouse-keyboard-and-touch-input">#</a>Mouse, keyboard, and touch input</h3><p>The default trigger for tooltips is <code>"mouseenter focus"</code> 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
firing <code>mouseenter</code> and others <code>focus</code> (or both).</p><h3><a class="link-icon css-wumm7u e1fogcta0" id="announcing-tooltip-content" href="#announcing-tooltip-content">#</a>Announcing tooltip content</h3><p>Non-interactive tooltips give the reference element an <code>aria-describedby</code>
attribute once they show:</p><pre class="grvsc-container moonlight-ii" data-language="html" data-index="0"><p data-elastic-wrapper="true"><code class="grvsc-code"><span class="grvsc-line"><span class="mtk5">&lt;</span><span class="mtk14">button </span><span class="mtk8">aria-describedby</span><span class="mtk5">="</span><span class="mtk11">tippy-1</span><span class="mtk5">"&gt;</span><span class="mtk1">Text</span><span class="mtk5">&lt;/</span><span class="mtk14">button</span><span class="mtk5">&gt;</span></span>
<span class="grvsc-line"><span class="mtk5">&lt;</span><span class="mtk14">div </span><span class="mtk8">id</span><span class="mtk5">="</span><span class="mtk11">tippy-1</span><span class="mtk5">"</span><span class="mtk14"> </span><span class="mtk8">data-tippy-root</span><span class="mtk5">&gt;</span></span>
<span class="grvsc-line"><span class="mtk1">  </span><span class="mtk3">&lt;!-- inner elements --&gt;</span></span>
<span class="grvsc-line"><span class="mtk5">&lt;/</span><span class="mtk14">div</span><span class="mtk5">&gt;</span></span></code></p></pre><p>This allows screen reader software to announce the tooltip content describing
the reference element once it's in focus.</p><h3><a class="link-icon css-wumm7u e1fogcta0" id="interactivity" href="#interactivity">#</a>Interactivity</h3><p>Tippy uses two techniques to ensure interactive popovers are accessible:</p><ul><li><code>aria-expanded</code> attribute</li><li><code>appendTo: "parent"</code></li></ul><p>This means once the reference element has focus, the assistive technology will
let the user know it has an expandable popover attached to it.</p><p>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.</p><p>Before opening the popover:</p><pre class="grvsc-container moonlight-ii" data-language="html" data-index="1"><p data-elastic-wrapper="true"><code class="grvsc-code"><span class="grvsc-line"><span class="mtk5">&lt;</span><span class="mtk14">div </span><span class="mtk8">id</span><span class="mtk5">="</span><span class="mtk11">parent</span><span class="mtk5">"&gt;</span></span>
<span class="grvsc-line"><span class="mtk1">  </span><span class="mtk5">&lt;</span><span class="mtk14">button </span><span class="mtk8">aria-expanded</span><span class="mtk5">="</span><span class="mtk11">false</span><span class="mtk5">"&gt;</span><span class="mtk1">Text</span><span class="mtk5">&lt;/</span><span class="mtk14">button</span><span class="mtk5">&gt;</span></span>
<span class="grvsc-line"><span class="mtk5">&lt;/</span><span class="mtk14">div</span><span class="mtk5">&gt;</span></span></code></p></pre><p>After opening the popover:</p><pre class="grvsc-container moonlight-ii" data-language="html" data-index="2"><p data-elastic-wrapper="true"><code class="grvsc-code"><span class="grvsc-line"><span class="mtk5">&lt;</span><span class="mtk14">div </span><span class="mtk8">id</span><span class="mtk5">="</span><span class="mtk11">parent</span><span class="mtk5">"&gt;</span></span>
<span class="grvsc-line"><span class="mtk1">  </span><span class="mtk5">&lt;</span><span class="mtk14">button </span><span class="mtk8">aria-expanded</span><span class="mtk5">="</span><span class="mtk11">true</span><span class="mtk5">"&gt;</span><span class="mtk1">Text</span><span class="mtk5">&lt;/</span><span class="mtk14">button</span><span class="mtk5">&gt;</span></span>
<span class="grvsc-line"><span class="mtk1">  </span><span class="mtk5">&lt;</span><span class="mtk14">div </span><span class="mtk8">id</span><span class="mtk5">="</span><span class="mtk11">tippy-1</span><span class="mtk5">"</span><span class="mtk14"> </span><span class="mtk8">data-tippy-root</span><span class="mtk5">&gt;</span></span>
<span class="grvsc-line"><span class="mtk1">    </span><span class="mtk3">&lt;!-- inner elements, with focusable content --&gt;</span></span>
<span class="grvsc-line"><span class="mtk1">  </span><span class="mtk5">&lt;/</span><span class="mtk14">div</span><span class="mtk5">&gt;</span></span>
<span class="grvsc-line"><span class="mtk5">&lt;/</span><span class="mtk14">div</span><span class="mtk5">&gt;</span></span></code></p></pre><p>You should wrap the reference element in its own parent element (<code>&lt;div&gt;</code> or
<code>&lt;span&gt;</code>) if it's not the only focusable sibling element.</p><h4><a class="link-icon css-wumm7u e1fogcta0" id="clipping-issues" href="#clipping-issues">#</a>Clipping issues</h4><p>Sometimes, this behavior won't work for your app due to clipping issues. In this
case, you need to specify a custom <code>appendTo</code> element outside of the parent node
context and use a focus management solution to handle keyboard navigation.
<a href="../faq/#my-tooltip-appears-cut-off-or-is-not-showing-at-all" class="css-pom0h5 e1fogcta1">More details here</a>.</p></div>
