• Many web sites have menus that are displayed on hover.
  • On touch-enabled devices, there is no mouse and thus no hover effect.
  • On those menu elements, set the tag property aria-haspopup="true".
  • When an Internet Explorer 10 (Windows 8, Surface, Windows Phone 8, etc.) user on a touch-enabled device first taps on the element, it will behave as reacting to a mouse hover.

 

WordPress

  • According to some current statistics, over 15% of the top one million websites and over 50% of all websites using a CMS are based on WordPress.
  • WordPress supports the aria-haspopup tag for the Admin menu.
  • Themes such as Twenty Eleven and Twenty Twelve have popup menus but don't support this tag.

 

  • In WP 3.5.1, the menu is generated in the file "post-template.php", function "start_el": $output .= $indent . '<li class="' ...
  • The code that generates the menu, does not seem to contain a variable that indicates if the menu has submenu entries, which would be needed to set the aria-haspopup correctly to true or false as needed.

 

  • The HTML for the menu looks like this:

<div class="menu">

  <ul>

    <li><a href="http://www.example.com/"title="Home">Home</a></li>

  <li class="page_item"><a href="http://www.example.com/page1/">Page 1</a><!-- Attr expected here -->

    <ul class='children'> 

      <li class="page_item"><ahref="http://www.example.com/page1/page11/">Page 11</a></li> 

      <li class="page_item"><a href="http://www.example.com/page1/page12/">Page 12</a><!-- Attr expected here -->

        <ul class='children'>

                   <li class="page_item"><a href="http://www.example.com/page121/page121/">Page 121</a></li> 

         <li class="page_item"><a href="http://www.example.com/page122/page122/">Page 122</a></li> 

        </ul> 

      </li>

    </ul> 

  </li> 

    <li class="page_item"><a href="http://www.example.com/page2/">Page2</a></li> 

    <li class="page_item current_page_item"><a href="http://www.example.com/page3/">Page3</a></li>

  </ul>

</div>

 

  • A workaround would be to add the following JavaScript code to the "footer.php" file just before the closing </body> tag:

<script> 

// Open menu on first tap on touch devices.

jQuery(document).ready(function () {

  jQuery(".page_item").has("ul").children("a").attr("aria-haspopup", "true");

});

</script>

 

  • I've tested this code for performance at JSPerf.com and it seems to lead to the best results. If you know of a better way, please share it, thanks.

 

  • The above code should work with Twenty Eleven and Twenty Twelve themes and a few others.
  • The Esplanade theme uses other class names, you will need to replace the above jQuery line with this one:

jQuery(".menu-item").has("ul").children("a").attr("aria-haspopup", "true");