TIL: aria-haspopup

Today, a challenge in the form of a bug-report came in. It said

On my Microsoft Surface tablet, I cannot use the menu.

A little background you might need: The menu is a navigation bar with sub-items appearing on hover, like the example below.

5

We all know that iOS tablets and most Android tablets (as far as I know) open these hover sub-menu upon a single click. Microsoft’s IE11 however doesn’t.

At first I thought: “Well, there must be some invisible DIV obscuring it in IE11″. But after a quick trip on Google I found this. According to this document, adding ‘aria-haspopup‘ to the elements that need this behaviour, tells IE11 to translate a touch-click into a hover for that element . Frankly, I think this is brilliant! So I added the necessary code to our project and the menu worked as expected on IE11 touch-devices as well.

Now, before you start thinking this is another Microsoft IE horror trip: This is actually part of a whole W3C supported spec: Read all about ARIA here. I also found this little write-up on Stack Overflow here.

I’m sure this will help somebody in the future. Good luck!

Ronny

view all posts

Ronny is a freelance frontend developer with a wild passion for creativity and a relentless hate against flat design. Ronny spent years as a Flash developer before moving to HTML5 and rediscovering fun and happiness.

0 Comments Join the Conversation →


Leave a Reply

Your email address will not be published. Required fields are marked *