davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="en">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Accessibility | Tippy.js (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://atomiks.github.io/tippyjs/v6/accessibility/">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>Accessibility | Tippy.js</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://atomiks.github.io/tippyjs/v6/accessibility/" title="Lien vers le contenu original">Source originale</a>
      <br>
      Mis en cache le 2024-02-03
    </p>
  </nav>
  <hr>
  <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>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>