3

A common use for a tooltip is adding it to a ⓘ icon in order to display "more info". I'm currently working on making my components more accesible, so I wanted to add the "tooltip" role to my tooltip component. But surprisingly the Mozilla webpage for WAI-ARIA explicitly says here:

The tooltip is not the appropriate role for the more information "i" icon, ⓘ. A tooltip is directly associated with the owning element. The ⓘ isn't 'described by' detailed information; the tool or control is.

Although the official docs doesn't say anything about it.

Then, what role can my tooltip component have if I use it exactly for that purpose? Or am I misinterpreting that statement?

This is my tooltip component template with the role as I expected to add it:

<div role="tooltip" id="tooltip" class="tooltip-container">
  <div class="inner">{{ content }}</div>
  <span class="caret"></span>
</div>
Alvaro Flaño Larrondo
  • 5,516
  • 2
  • 27
  • 46
  • 1
    Please don't call mozilla documentation official WAI-ARIA documentation. All official accessibility documentation is on w3.org. The link you referred to is not official. The `tooltip` role can be seen at https://www.w3.org/TR/wai-aria/#tooltip and it says *nothing* about not using it for an info icon. – slugolicious Jan 17 '22 at 17:00
  • @slugolicious Thanks for the feedback! Then that statement is something just added by Mozilla? What about all the other requirements (like closing when pressing ESC)? – Alvaro Flaño Larrondo Jan 17 '22 at 19:30
  • I can't comment regarding the contents of mozilla doc. I don't know who vets the information on that site. I only know it's not official documentation and you should always rely on w3.org for official specs and documentation. As far as pressing ESC to close the tooltip, that is certainly recommended on the w3.org design patterns, https://www.w3.org/TR/wai-aria-practices/#tooltip. The design pattern documentation is not normative (https://www.w3.org/TR/WCAG21/#dfn-normative) but it's certainly very good advice to follow. – slugolicious Jan 18 '22 at 18:40

2 Answers2

1

The MDN snippet you posted is correct, in the sense that it is not the icon that should get the tooltip role. The icon is just a button.

If the content in the tip can be expressed as 'flat text' (i.e. without structures like headings or lists) you can associate your component with it using aria-describedby, as mentioned in the w3c docs.

If the tip content does have structure, use aria-details instead. This is acceptable.

Either of these will associate the tip content with the component, and thus comply with "Info and Relationships".

brennanyoung
  • 6,243
  • 3
  • 26
  • 44
0

Opening a "tooltip" when clicking is actually called a toggletip. I think that you should use the aria-live attribute or even the status role.

Here is an article describing this: https://inclusive-components.design/tooltips-toggletips/

Alvaro Flaño Larrondo
  • 5,516
  • 2
  • 27
  • 46
  • 2
    *toggletip* is just a word someone made up. Granted, the author of the article you mentioned and the person referenced as the creator of the term are both accessibility professionals, as am I, but it's just one person's name for a widget. It's a decent name but is not official. The article has good info for implementing a tooltip so I guess you answered your own question. Keep in mind that the info icon itself is not the tooltip. It's just a button. The text that is displayed is the tooltip. – slugolicious Jan 17 '22 at 17:04