Tooltip Finest Practices | CSS-Tips

On this article, I attempt to summarize the most effective practices talked about by varied accessibility consultants and their work (like this, this, and this) right into a single article that’s simple to learn, perceive, and apply.

Let’s start.

What are tooltips?

Tooltips are used to offer easy textual content hints for UI controls. Consider them as ideas for instruments. They’re mainly little bubbles of textual content content material that pop up if you hover over an unnamed management (just like the bell icon in Stripe).

In the event you choose extra of a proper definition, Sarah Highley supplies us with a reasonably good one:

A “tooltip” is a non-modal (or non-blocking) overlay containing text-only content material that gives supplemental details about an current UI management. It’s hidden by default, and turns into out there on hover or focus of the management it describes.

She additional goes on to say:

That definition may even be narrowed down even additional by saying tooltips should present solely descriptive textual content.

This narrowed definition is mainly (in my expertise) how each accessibility knowledgeable defines tooltips:

Heydon Pickering takes issues even additional, saying: In the event you’re considering of including interactive content material (even an okay button), try to be utilizing dialog as a substitute.

In his phrases:

You’re considering of dialogs. Use a dialog.

Two sorts of tooltips

Tooltips are mainly solely used for 2 issues:

1. Labeling an icon
2. Offering a contextual description of an icon

Heydon separates these cleanly into two classes, “Main Label” and “Auxiliary description” in his Inclusive Parts article on tooltips and toggletips).

Labeling

In case your tooltip is used to label an icon — utilizing just one or two phrases — you need to use the aria-labelledby attribute to correctly label it since it’s hooked up to nothing else on the web page that might assist determine it.

<button aria-labelledby="notifications"> ... </button>
<div position="tooltip" id="notifications">Notifications</div> 

You possibly can present contextual info, like stating the variety of notifications, by giving a space-separated record of ids to aria-labelledby.

<button aria-labelledby="notifications-count notifications-label">  
  <!-- bell icon right here --> 
  <span id="notifications-count">3</span>
</button>  

<div position="tooltip" id="notifications-label">Notifications</div>

Offering contextual description

In case your tooltip supplies a contextual description of the icon, you need to use aria-describedby. However, if you do that, you additionally want to offer an accessible identify for the icon.

On this case, Heydon recommends together with the label because the textual content content material of the button. This label could be hidden visually from sighted customers however learn for display screen readers.

Then, you may add aria-describedby to incorporate the auxiliary description.

<button class="notifications" aria-describedby="notifications-desc">  
  <!-- icon for bell right here --> 
  <span id="notifications-count">3</span> 
  <span class="visually-hidden">Notifications</span>
</button>  

<div position="tooltip" id="notifications-desc">View and handle notifications settings</div> 

Right here, display screen readers would say “3 notifications” first, adopted by “view and handle notifications settings” after a short pause.

Further tooltip dos and don’ts

Listed below are a few extra factors try to be conscious of:

Do:

Don’t:

• Don’t use the title attribute. A lot has been mentioned about this so I shall not repeat them.
• Don’t use the aria-haspopup attribute with the tooltip position as a result of aria-haspopup signifies interactive content material whereas tooltip ought to include non-interactive content material.
• Don’t embody important content material inside tooltips as a result of some display screen readers could ignore aria-labelledby or aria-describedby. (It’s uncommon, however doable.)

Tooltip limitations and options

Tooltips are inaccessible to most contact units as a result of:

• customers can not hover over a button on a contact gadget, and
• customers can not deal with a button on a contact gadget.

One of the best different is to not use tooltips, and as a substitute, discover a strategy to embody the label or descriptive textual content within the design.

If the “tooltip” accommodates a variety of content material — together with interactive content material — chances are you’ll wish to show that info with a Toggletip (or simply use a <dialog> factor).

Heydon explains toggletips properly and concisely:

Toggletips exist to disclose info balloons. Usually they take the type of little “i” icons.

These informational icons must be wrapped inside a <button> factor. When opened, display screen readers can announce the textual content contained in it by means of a stay area with the standing position.

<span class="tooltip-container"> 
  <button sort="button" aria-label="extra information">i</button> 
  <span position="standing">This clarifies no matter wants clarifying</span>
</span>

Talking anymore about toggletips detracts this text from tooltips so I’ll level you to Heydon’s “Tooltips and Toggletips” article if you happen to’re excited about chasing this quick rabbit gap.

That’s all you want to find out about tooltips and their present finest practices!

Additional studying