Building a nice accessible web page is hard. Currently, Im trying to make a tooltip web accessible and I need help. Do you guys have any piece of advice for it? Like what aria attributes I should use. Or some other important thing you want to add!
Moreover, How do I prevent the screen reader from reading the tooltip, if it hasnt been shown? My approach here is to make it using javascript, adding and deleting aria-hidden attribute, but I want to avoid JS as much as possible.
The above example is working fine. we can achieve the same by using below jQuery code.
<script>
$("#test").tooltip();
</script>
<a id="test" href="#" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
But another issue is the screen reader will not read the tooltip on mouseover.
By using jquery-ui version 1.12, the screen reader can read the tooltip on mouseover, but the problem is it can't identify the role and name of the tooltip container element. So is there any way to achieve that functionality?