twbs
Tooltips: screen readers do not always read the textual content
Prerequisites
- [X] I have searched for duplicate or closed issues
- [X] I have validated any HTML to avoid common problems
- [X] I have read the contributing guidelines
Describe the issue
I've tested the tooltips with NVDA on Chrome, Firefox and Edge (Windows 10) and with VoiceOver on Chrome and Safari: not all the tooltips I've in my project, and not always the same ones, are read. It doesn't matter if I use the "title" or "data-bs-title" attribute in my HTML because evry time the results are instable and vary every time.
Reduced test cases
It's possible to replicate these bugs also in the documentation page https://getbootstrap.com/docs/5.3/components/tooltips/
What operating system(s) are you seeing the problem on?
Windows, macOS
What browser(s) are you seeing the problem on?
Chrome, Safari, Firefox, Microsoft Edge
What version of Bootstrap are you using?
v5.3.2
I have observed the same accessibility problem with Bootstrap 4.6.2 and Popper 1.16.1: elements for which Tooltips are added lose their title attribute and its content moves to the data-original-title attribute.[^1] The empty title attribute causes the issue with ATs, and not using Tooltips (i.e. not enabling them) fixes the issue for ATs.
The underlying issues here, I think, is that the browser would render a title attribute’s text and that would collide with the tooltip itself — they both would show. A hack around that (for lack of a browser API) could be to clear title on hover but set it on focus (for ATs) 🤔
Addendum: using the aria-description attribute on elements with tooltips seems to work for (some) ATs.
[^1]: Adding both attributes into the HTML still sets title to empty.
