We have implemented a standard Outsystems UI tooltip in a mobile app. The accessibility requirements for this mobile app are WCAG level AA. When I run lighthouse on one of the pages that have a tooltip, it fails because the tooltip has the role="button" but no name or label.
It is not easy to add this attribute without modifying the Outsystems UI component. Is there something I'm overlooking? Please advise.
See https://dequeuniversity.com/rules/axe/4.10/aria-command-name
Hey @Fred Derks,
As far as I understand the situation, that .osui-tooltip__content is the trigger that opens the tooltip, and it has an "aria-describedby" attribute.
As long as you have a string of text in the element with the ID that is passed on the "aria-describedby" (the element with the ID "b7-b1-Tooltip", that should be the tooltip itself) , everything should be ok, because that text is the accessible name you need.
aria-describedby documentation: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby
I hope it helps, and kind regards,
João Martins
You are right, I do have text inside the tooltip, which is read by the screen reader. But that does not prevent the lighthouse finding. Are you advising to ignore the lighthouse finding?
Thanks for your help, Fred
Hi @Fred Derks,
I wouldn't say ignore, but you could check with a more powerfull tool, like axe DevTools or Silktide.
If it continues to show on those tools, see if you can somehow have only the text inside the tooltip rather then a <span> with the text (only because on the documentation says "Note: The aria-describedby content should only be a text string ").
If you still have the warning, we might need to think on another solution. At the same time, if a screen reader can read it correctly (you can test using the silktide to simulate a screen reader), personally I wouldn't mind that much with that warning.
Hope it helps, João Martins
Hey @João Martins
I have tested it again, axe DevTools finds the same issue, Silktide did not, the screen reader also has no problem reading it.
There is no way with the OutSystemsUI Tooltip component to have text directly in the tooltip content with the span. I have implemented it like this:
Thanks for your help so far
Fred
I've found out that one of the reasons lighthouse and Axe DevTools might be triggering the a warning is due to the role="tooltip" is set on the wrapper rather then on the element set on the aria-describedby.
Since we don't have access to the element, my final suggestions would be to either ignore that warning since the screen reader can read it just fine, or try to add this role="tooltip" to the element set on the aria-describedby via JS.
Note: I'm not 100% sure adding the role="tooltip" to the element will fix this issue and not create other issues, since a role="tooltip" might also need aria-hidden, might not like to be inside another role="tooltip", etc,
Hope it helps and sorry we didn't found a better solution,