How to simulate hover on touch-enabled devices
Hovering your cursor over a webpage element is a common action when browsing with a mouse and keyboard, but there is no equivalent when it comes to touch-based browsing. This topic demonstrates how to use the aria-haspopup Document Object Model (DOM) property to simulate hover on touch-enabled devices with Internet Explorer 10 on Windows 8.
Note This behavior is not applicable to Internet Explorer 10 on Windows 7 (which does not support hover simulation with aria-haspopup) or Internet Explorer 11 on Windows 8.1 (which has built-in touch hover support).
A common pattern on the Web is to hide interactive content behind mouse hover. For example, a user can point to an element with a mouse and a menu is shown below it. Hover is typically enabled by using either the :hover Cascading Style Sheets (CSS) pseudo-class or the onmouseover DOM event.
In touch scenarios, hover is applied to an element while it is being touched. However, tapping an element can also activate an element, such as navigating a link. Effectively, a tap is both hover and activation in one action. This makes interactive content hidden behind hover inaccessible for touch users. The interaction model is completely different, and there is no touch analog to hovering the cursor over a page element.
The best practice is to not use hover to hide content that a user can interact with. Instead, consider using the onclick event to toggle the visibility.
Alternatively, Internet Explorer 10 adds new behavior to the existing aria-haspopup property to simulate hover on page elements with hidden interactive content.
On a page element that has a hover behavior that toggles the visibility of interactive content, set the element’s aria-haspopup property to "true":
<style>
#hovermenu li ul {
display: none;
}
#hovermenu li:hover ul{
display: block;
}
</style>
<ul id="hovermenu">
<li><a href="/news/" aria-haspopup="true">News Categories</a>
<ul>
<li><a href="/news/top">Top Stories</a></li>
<li><a href="/news/technology">Technology</a></li>
<li><a href="/news/sports">Sports</a></li>
<li><a href="/news/finance">Finance</a></li>
<ul>
</li>
</ul>
When an Internet Explorer 10 user on a touch-enabled device first taps the page element, the user's experience will be identical to that of a user who hovers over the element with a cursor. Until the user taps elsewhere on the page, taps the element again, or navigates to another page, the element remains in its hover state. Additionally, default actions of the onclick event (such as navigation of a link) are not performed for the first tap on the page element.
Enabling the aria-haspopup property doesn't change the behavior of your webpage for visitors using a mouse and keyboard. In addition, using the aria-haspopup property for this purpose doesn't affect its use as an Accessible Rich Internet Applications (ARIA) property.