4

I'm trying to mark up some xhtml so that dropdown menus can be read by Jaws but I'm having trouble getting it to work in IE 11. The link texts are read out twice as I tab through them. It works fine in Firefox. I've simplified the xhtml as much as I can to try to isolate the problem. The actual structure, span within "a" within div is generated by Icefaces so I'd prefer to leave it as is, if possible.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <div style="z-index: 25002; left: 529px; top: 357px; position: fixed; visibility: visible;" name="TOP_LEVEL_SUBMENU" id="Priority_menu_sub" aria-h idden="false" role="menu">
    <div id="Priority_menu:1">
       <a id="Priority_menu:1:link" href="javascript:;" aria-describedby="Priority_menu:1:link" role="menuitem">
          <span id="Priority_menu:1:out">Critical</span>
      </a>
   </div>
   <div id="Priority_menu:2">
      <a id="Priority_menu:2:link" href="javascript:;" role="menuitem">
          <span id="Priority_menu:2:out">Standard</span>
      </a>
   </div>
   <div id="Priority_menu:3">
      <a id="Priority_menu:3:link" href="javascript:;" role="menuitem">
          <span id="Priority_menu:3:out">Urgent</span>
      </a>
   </div>
   <div id="Priority_menu:4">
      <a id="Priority_menu:4:link" href="javascript:;" role="menuitem">
          <span id="Priority_menu:4:out">Very Urgent</span>
      </a>
   </div>
</div>
 </body>
</html>

If I move the role="menuitem" to the enclosing div then the links are just read once but so is the href attribute and there is no acknowledgement that it's a menu item. Can anybody tell me the correct aria markup?

JaneH
  • 51
  • 1
  • 2
  • This example lacks context. I assume if you are using `role="menu"` that you are handling for arrow keys, etc. That being said, why are you using ``? This implies that you aren't taking the user to another page or anchor on this page. If you use ` – aardrian May 31 '16 at 14:24
  • Pinged @léonie-watson as she knows JAWS far better. Tested this a few ways (hacking up the HTML), and Firefox does not have the same issue. It may be a quirk of IE/JAWS combo, possibly with tabbing (instead of arrowing) into options. Can you post a demo with the arrow key interaction in place (as that is kind of the point of `role=menu`)? That may be more useful/appropriate for debugging. – aardrian May 31 '16 at 15:10
  • Arrowing has the same effect with the full blown dropdown menu I coded. As I said, I simplified the xhtml to try to isolate the problem, replicating the problem with tabbing instead. The full xhtml will only work as part of a full blown icefaces web application so it's not possible to post an example. Icefaces is heavily javascript so that's why the href is there. Unfortunately my client only uses IE so it may be that I have to provide them with a less friendly interface for the dropdown menus even though the current solution works well in Firefox. Thanks for having a look. :) – JaneH May 31 '16 at 22:10
  • Can you change the ``s to ` – aardrian May 31 '16 at 22:24
  • Adding role=button stops the duplication but reads out "Critical button" etc. On the application, focus also doesn't move with the arrow keys but I guess that's not such a problem for the visually impaired. This is so frustrating. The solution I have works elegantly in Firefox. – JaneH May 31 '16 at 22:37

0 Answers0