Tooltip Finest Practices | CSS-Methods

On this article, I attempt to summarize the most effective practices talked about by numerous accessibility specialists 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 suggestions for instruments. They’re mainly little bubbles of textual content content material that pop up once you hover over an unnamed management (just like the bell icon in Stripe).

In the event you favor extra of a proper definition, Sarah Highley supplies us with a fairly 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 accessible 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), you need 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 must use the aria-labelledby attribute to correctly label it since it’s hooked up to nothing else on the web page that may assist determine it.

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

You could possibly 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 function="tooltip" id="notifications-label">Notifications</div>

Offering contextual description

In case your tooltip supplies a contextual description of the icon, you must use aria-describedby. However, once 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 can be hidden visually from sighted customers however learn for display screen readers.

Then, you’ll be able to 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 function="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 quick pause.

Extra tooltip dos and don’ts

Listed below are a few further factors you need to be conscious of:

Do:

Don’t:

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

Tooltip limitations and alternate 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 concentrate on a button on a contact gadget.

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

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

Heydon explains toggletips properly and concisely:

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

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

<span class="tooltip-container"> 
  <button kind="button" aria-label="extra data">i</button> 
  <span function="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 in case you’re focused on chasing this quick rabbit gap.

That’s all it’s essential to find out about tooltips and their present greatest practices!

Additional studying