Consider providing a Toggletip / Infotip pattern

[carmacleod]

A Toggletip, also called Infotip or BubbleHelp, is a really common pattern consisting of a button that shows a "tip" when clicked. It is really similar to the Tooltip pattern, except that the tip does not show on hover or focus. The label of the button is often something like "Info", "Instructions" or "Help" (often using aria-label on a ? or i icon), and the tip's text content tends to be slightly longer than a typical tooltip, i.e. perhaps a long sentence or a paragraph.

Without guidance, these are often inaccessible. The problem is that if aria-describedby is used to point to the tip from the button, "a screen reader user would have access to the information before pressing the button, so pressing it would appear not to do anything." [1]. Alternatively, if aria-describedby is added on click and removed on the next click/blur, then screen readers may not notice the change, or they may notice it but speak the tip after a delay, which is too slow for a button activation [3].

The trick to making these accessible is to populate a live region with the tip's text content when the button is clicked. I've linked to 2 accessible examples below, which both use this technique. [1] [2]

The third example [3] does not use a live region - it dynamically adds and removes aria-describedby. It works ok in Chrome/FF with NVDA/JAWS, but has too much of a delay in VoiceOver, so I think it would be considered inaccessible (or just bad UX).

Interestingly, neither of the 2 accessible examples uses role="tooltip" because they are using role="status" on the tip container. I do wonder if role="tooltip" aria-live="polite" would be acceptable and work well, given that it's technically valid because aria-live is a global attribute.

• [1] Heydon's Inclusive Toggletip
• [2] eBay Mind Patterns Infotip and Infotip Example 1
• [3] Example with add/remove aria-describedby on click (do not do this)