Tooltips and aria-describedby: Screenreaders don't see them

[jmuheim]

The Bootstrap tooltips seem to be implemented with blind users in mind, because they have an aria-describedby attribute. Sadly though, that screenreaders will never see this information, as it is only present in the DOM when the tooltipped element is hovered with the mouse, and blind people do not use any mice.

[jmuheim]

Precision: also on focus the tooltips are displayed, so having a tooltip on a focusable element works for this, but any non-focusable element doesn't.

[patrickhlauke]

It's probably implicit in the documentation (and I'll make a note to add a clarification here), but as all examples given at http://getbootstrap.com/javascript/#tooltips show tooltips added to actual form controls/focusable elements, it's the assumption that people will use them purely on those types of elements.

[jmuheim]

I'm not happy with this approach. Why not having all the tooltips in the DOM all the time and just showing/hiding them visually on hover and on focus? Then screenreaders would see tooltips on non-focusable elements too.

[jmuheim]

You also mention that one can add tooltips to non-focusable elements by making them focusable via tabindex="0", but this is bad code style, as one shouldn't clutter the focusable elements' domain with other elements (that one can not act upon) simply for this reason.

[patrickhlauke]

Feel free to propose, as a separate pull request, some wording for the callout that you feel is more appropriate.

[jmuheim]

There's no problem with the wording, but with the technical approach that leads to the current behaviour.

If the current behaviour wouldn't limit tooltips to focusable elements only, there wouldn't be the need for a callout.

At least, Bootstrap should make sure that tooltips only show on focusable elements, because the way it is now, people happily throw tooltips everywhere and nobody realises that they are not accessible.

[patrickhlauke]

I'm not happy with this approach. Why not having all the tooltips in the DOM all the time and just showing/hiding them visually on hover and on focus? Then screenreaders would see tooltips on non-focusable elements too.

And I'm not happy with that approach, for a few reasons:

• if you're proposing that the tooltip element itself shouldn't be dynamically created/destroyed, but instead placed in the DOM at all times and only made visible/invisible: some sites dynamically alter the tooltip text just before it's being displayed; having it always present will, in those situations, result in inaccurate or broken tooltip text being exposed to AT users
• assuming you're thinking about AT announcing the presence of an aria-describedby even on arbitrary elements that aren't focusable, while in reading mode: from a quick test just with JAWS, only Firefox seem to provide a hint that there is description text present - JAWS/IE and JAWS/Chrome happily ignore the aria-describedby while in reading mode, it seems
• your proposed approach doesn't solve the problem for keyboard-only users without AT - because accessibility is, of course, not limited to just screenreader users

So, I'm aware that the current approach for tooltips (or rather, how developers are using it randomly on all sorts of elements) isn't ideal. But for now, I'd rather give advice in the docs that adds a few extra elements in the tab order if that means sighted keyboard users can also benefit from the tooltip

More fundamentally, changing the actual functionality of the tooltip code to only work when on a focusable element is a severe break in backwards compatibility, and we're definitely not in a position to do this in Bootstrap version 3 going forward, as an update to Bootstrap would then immediately break all sites that historically have used tooltip (wrongly, I'll grant you) on non-focusable elements. For the time being, the best approach we can have is to strengthen the advice in the documentation. However, the idea of making tooltip only work in the correct situations is something that I'll put on the list for version 4, where we can make more radical behavioural changes to the code - and enforce that tooltip only work on focusable elements. /cc @cvrebert

[jmuheim]

Thank you for this very good explanation. I agree with your statement.

Hopefully accessibility will become a greater focus in future versions of Bootstrap! 👍