Closed olach closed 7 years ago
@olach Fair point.
Seems like the aria-label
accepts a space-separated list of values. We could add the tooltip
role after the button
or any other role value. This would make the example:-
<button aria-label="Hey tooltip!" data-microtip-position="up" role="button tooltip">
I think that would be a better solution here.
Hey @olach
We add role=tooltip
because the button now is just a space for show more information about something so the button is work as tooltip to show more information and add tooltip
role doesn't make a button not work it's just for Screen Reader users to add more information about the hint he/she read and the button can work as usual.
and as W3 say about tooltip
A contextual popup that displays a description for an element.
I hope to read W3 about tooltip and you can test the button if you have a tooltip role or doesn't.
Hey @ghosh
WAI-ARIA allows multiple roles to be specified as an ordered set of space-separated valid role tokens. The additional roles are fallback roles similar to the concept of specifying multiple fonts in case the first choice font type is not supported. WAI-ARIA
so in this code, you write and need other users write it now declares the role as a button and it ignores tooltip role so the user, in this case, he understands this button is just a button, not a tooltip.
in the image below the screenshot for accessibility tree and it declares the button as role=button
and so that the NVDA screen reader.
@Muhnad Thanks for the info.
I do not have control over where these tooltips would be used. There is a possibility that, it's used in a place where the user would want to give another role-token preference over a tooltip. At that time I would not want the tooltip to stop working.
I think this is a better solution, as it would work normally for most people and also allow them to overwrite them in certain scenarios.
@Muhnad
you are pointing only to button
, but button
is speclal case. What if someone want to tooltip for div
wrapper. Div
is element without any behaviour. So if you define role="tooltip"
it becomes as Tooltip what is wrong because this wrapper could contains another content elements. And there are more elements than DIV or SPAN.
As is written here: https://www.w3.org/TR/wai-aria-1.1/#tooltip
Authors should ensure that elements with the role tooltip are referenced through the use of aria-describedby before or at the time the tooltip is displayed. Element with
role="tooltip"
attribute is assigned to element which associated witharia-describedby
. Tooltips are hidden until they are requested by user behaviour (hover, focus, ...etc)
Examples here: http://accessibility.athena-ict.com/aria/examples/tooltip.shtml http://oaa-accessibility.org/example/40/ http://pauljadam.com/demos/aria-role-tooltip.html
Hi @radeno,
your words 100% correct but my words depend on the library behavior.
Just found this nice little gem. Nice work. Seems like an easy way to add nice tooltips.
But I think the use of the
role="tooltip"
attribute is wrong. For example:This implies that the role of the button is not a button anymore, but a tooltip. And that feels wrong, don't you think? The role of the button should still be a button.