Making tooltips accessible
[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]
Here we describe the markup and code needed to ensure that tooltips are accessible in a Windows Runtime app.
Standard HTML tooltips
You create a standard HTML tooltip by setting the title attribute on an element. The system uses a standard HTML tooltip as both an accessible name and an accessible description. If you want to use the title attribute to create a tooltip but not an accessible name, use the aria-labelledby or aria-label attribute. These attributes take precedence over the title attribute when the system retrieves the accessible name.
<!-- Narrator reads: "Inner text" -->
<button>Inner text</button>
<!-- Narrator reads: "Title attribute" -->
<button title="Title attribute">Inner text</button>
<!-- Narrator reads: "ARIA label" -->
<button title="Title attribute" aria-label="ARIA label" >Inner text</button>
Tooltips for Windows Runtime apps using JavaScript
A tooltip in a Windows Runtime app using JavaScript does not affect the accessible name or the accessible description. A screen reader announces a tooltip when it appears, but if you want to use the same text for a tooltip and for an accessible name or description, you need to do so explicitly.
<!-- The P element holds the text to use for the tooltip and description. -->
<p id="backTooltipText">Use this button to navigate back</p>
<button id="back" aria-describedby="backTooltipText">Back</button>
<script>
var back = document.getElementById('back');
var backTooltipText = document.getElementById('backTooltipText');
var myTooltip = Win.UI.Tooltip(back);
myTooltip.innerHTML = backTooltipText.innerHTML;
</script>
Note If the text should not be displayed, you can use Cascading Style Sheets (CSS) to make the p element invisible.
Tooltips for XAML
The XAML UI system for tooltips can either use explicit ToolTip elements, or can set a text-only tooltip using a ToolTipService.ToolTip attribute on any UIElement. Text content of the tooltip is promoted as the HelpText property for Microsoft UI Automation on the element where the tooltip is attached. That text is also the Name value of the ToolTip element itself, but the tooltip itself isn't usually in the content view of the UI Automation tree. The XAML tooltip service raises the required UI Automation events such that screen readers are aware that a tooltip is opened on focus. The screen reader can then get the text to read from the HelpText value. For more info on how to use tooltips in a XAML UI, see How to add a tooltip. For more info on how UI Automation treats tooltips, see ToolTip Control Type