CODEWITHSUNDEEP
htmlcssaccessibility
CyberJ
CyberJ

Reputation: 1124

Accessibility for inline tooltips

Which is the correct way to make inline tooltips accessible?

I have 2 versions below.

Version 1: Use the title attribute. When hovering I will use JS to hide the title attribute and add the text to my custom tooltip. I will add back the title attribute when hover is off.

<p>For here am I sitting in a <span title="A spaceship">tin can</span> far above the world planet earth...</p>

Version 2: use aria=label and role="tootlip"

<p>For here am I sitting in a <span aria-label="A spaceship" role="tooltip">tin can</span> far above the world planet earth...</p>

Note: this question is for inline tooltips only, meaning the tooltip text is in the attribute of the element which triggers the tooltip. The tooltip is not separate from the element triggering it.

Upvotes: 0

Views: 1703

Answers (1)

Andy
Andy

Reputation: 6170

The title attribute by itself does not reliably provide an accessible name for the element, meaning it will not be read by all screen readers.

Aria-label has no function if it is not assigned to an interactive element or landmarks. Beware also, that the aria-label replaces the element’s content from an accessibility perspective.

Since you want to use that attribute only to inject another element with that text as its content, the issue here is more the caused confusion. It might be better to use a non-semantic attribute in that case like data-tooltip.

The aria-label attribute defines a string value that labels an interactive element.

Which brings us to another aspect: The tooltip needs to work with touch screens and keyboard, too. So it will need to be focusable and focus needs to be visible. A tooltip should also be closable by means of Esc.

A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It typically appears after a small delay and disappears when Escape is pressed or on mouse out.

https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/

Since aria-describedby is recommended for screen readers to reference the additional contents, it is better to have that element already in the DOM, which would simply be hidden or shown depending on tooltip state.

<p>For here am I sitting in a <span aria-describedby="tooltip-spaceship" tabindex="0">tin can</span> far above the world planet earth...
<span role="tooltip" id="tooltip-spaceship" hidden>A spaceship</span></p>

Lastly, the least expensive way, which is easier to use as well, is to simply provide them in the text at their first occurrence:

<p>For here am I sitting in a <dfn>tin can</dfn> (a spaceship) far above the world planet earth…</p>

See also Understanding Success Criterion 3.1.3: Unusual Words

Upvotes: 0

Related Questions