< Back to Demos | Learn more at PaulJAdam.com >

The demos below are purely experimental and old! They don't all follow the ARIA tooltip pattern that says you should actually put role=tooltip on the tooltip container element not on the button that opens the tooltip.

I followed the aria pattern in this demo, http://pauljadam.com/demos/tooltip.html but then I added aria-expanded on the button to tell the user that something is expanding and collapsing but the aria pattern does not mention anything about using aria-expanded.

WAI-ARIA role=tooltip

pauljadam.com/demos/aria-role-tooltip.html

Some are role=tooltip which does not work so well or at all with the accessible name/description calculation. Some are role=link or button. All trigger elements get aria-expanded=true applied when their tooltip appears. This is just a test for various ways to create accessible javascript tooltips to show the bugs and lack of accessibility API support in various AT/UA combos.

role=tooltip aria-describedby I am the tooltip text referenced to via aria-describedby.
role=tooltip aria-labelledby I am the tooltip text referenced to via aria-labelledby as part of the accessible name.
role=link aria-describedby I am the tooltip text referenced to via aria-describedby.
role=link aria-describedby aria-haspopup=true I am the tooltip text referenced to via aria-describedby.
role=button aria-describedby aria-haspopup=true I am the tooltip text referenced to via aria-describedby. I'm also a role=tooltip.
I am the tooltip text referenced to via aria-describedby.
I am the tooltip text referenced to via aria-labelledby as part of the accessible name.
I am the tooltip text referenced to via aria-describedby.
I am the tooltip text referenced to via aria-describedby.
I am the tooltip text referenced to via aria-describedby. I'm also a role=tooltip.