Website unter Touch-Devices

Wer nunmehr mit Microsoft-Touch-Devices, also Windows Phone oder Windows 8 und höher, in Berührung kommt, wird feststellen, dass der Default-MS-Browser zwar logisch richtig zwischen einem Touch-Event und einem Mouse-Hover unterscheidet, dies aber nicht dem Verhalten der anderen beiden Rendering-Engines (webkit und gecko) entspricht (eine neue W3C-Recommendation ist gerade in Abstimmung).

Um nun nicht alle Logik umstellen zu müssen, hilft hier nun die Verwendung eines Standards (ja, wirklich): WAI-ARIA.

In diesem speziellen Fall aria-haspopup=’true‘

So reicht bei den Menüknoten das Hinzufügen dieses Attributs, und schon verhält sich das Menü im IE touch-freundlich.

Einbinden lässt sich dies zB unter Verwendung von Javascript und JQuery zb vor dem body-close

// Open menu on first tap on touch devices.
jQuery(document).ready(function () {
  jQuery(".menu-item").has("ul").children("a").attr("aria-haspopup", "true");
});