|
123456789101112131415161718192021222324252627282930313233343536373839404142 |
- 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><button></code>
- or <code><input></code>. If you are using a <code><div></code> or <code><span></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"><</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">"></span><span class="mtk1">Text</span><span class="mtk5"></</span><span class="mtk14">button</span><span class="mtk5">></span></span>
- <span class="grvsc-line"><span class="mtk5"><</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">></span></span>
- <span class="grvsc-line"><span class="mtk1"> </span><span class="mtk3"><!-- inner elements --></span></span>
- <span class="grvsc-line"><span class="mtk5"></</span><span class="mtk14">div</span><span class="mtk5">></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"><</span><span class="mtk14">div </span><span class="mtk8">id</span><span class="mtk5">="</span><span class="mtk11">parent</span><span class="mtk5">"></span></span>
- <span class="grvsc-line"><span class="mtk1"> </span><span class="mtk5"><</span><span class="mtk14">button </span><span class="mtk8">aria-expanded</span><span class="mtk5">="</span><span class="mtk11">false</span><span class="mtk5">"></span><span class="mtk1">Text</span><span class="mtk5"></</span><span class="mtk14">button</span><span class="mtk5">></span></span>
- <span class="grvsc-line"><span class="mtk5"></</span><span class="mtk14">div</span><span class="mtk5">></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"><</span><span class="mtk14">div </span><span class="mtk8">id</span><span class="mtk5">="</span><span class="mtk11">parent</span><span class="mtk5">"></span></span>
- <span class="grvsc-line"><span class="mtk1"> </span><span class="mtk5"><</span><span class="mtk14">button </span><span class="mtk8">aria-expanded</span><span class="mtk5">="</span><span class="mtk11">true</span><span class="mtk5">"></span><span class="mtk1">Text</span><span class="mtk5"></</span><span class="mtk14">button</span><span class="mtk5">></span></span>
- <span class="grvsc-line"><span class="mtk1"> </span><span class="mtk5"><</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">></span></span>
- <span class="grvsc-line"><span class="mtk1"> </span><span class="mtk3"><!-- inner elements, with focusable content --></span></span>
- <span class="grvsc-line"><span class="mtk1"> </span><span class="mtk5"></</span><span class="mtk14">div</span><span class="mtk5">></span></span>
- <span class="grvsc-line"><span class="mtk5"></</span><span class="mtk14">div</span><span class="mtk5">></span></span></code></p></pre><p>You should wrap the reference element in its own parent element (<code><div></code> or
- <code><span></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>
|
