Accessibility WAVE scan on asp.net menu shows errors

user_1775513 0
Viewed 316

We're doing a WAVE scan of our application to detect accessibility issues. One that I'm looking at now is the "Device dependent event handler". These are shown on the asp:Menu controls. What seems to be the relevant messages says: "an onmouseover event but not an onfocus event". When I look at the page source I do see the generated html like:

<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" id="ctl00_MainMenun4">

This suggests to me that it needs an onfocus event handler that does the same as the onmouseover handler. Am I correct in this assumption. Is there a way to get asp.net to generate this or can/should I look at a way to manually inject this? If the latter, any suggestions?

Thanks for any help!

accessibility asp.net
3 Answers

Adding an onfocus event handler is not sufficient to make the table cell accessible. Table cells are not focusable elements. (Focusable elements are usually a elements with an href attribute, link elements with an href attribute, button, input when type is not "hidden", select and textarea.)

In order to make other elements focusable, you should set the tabindex attribute to "0". This will put the td element in your example in the tabbing order and make it reachable with a keyboard. If it can receive keyboard focus, it will also be able to fire the focus event that your listener will be waiting for.

user_60021740

I found the answer. See this MS article. For the asp:Menu controls I needed to set the Menu's RenderingMode to MenuRenderingMode.List and change the pages element in the web.config controlRenderingCompatibilityVersion="4.0".

user_17755130 
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" id="ctl00_MainMenun4">

This suggests to me that it needs an onfocus event handler that does the same as the onmouseover handler. Am I correct in this assumption. Is there a way to get asp.net to generate this

It depends on what is inside your td

For instance, you can perfectly have:

<td onmouseover="func_somewhat()"><a href="example.htm">Click</a></td>

Putting onfocus and tabindex on the td element will lead to accessibility problem due to the fact that the element itself contains a tabable element.

And this code might be plainly accessible, as long as selecting the inner link with the keyboard permit to achieve what you are expecting.

If the element inside the td does not have any focusable element, then you may add the onfocus event handler on the td itself but you have to satisfy more conditions :

  • the td should be focusable (tabindex)
  • the td should be indicated as being a role=button or role=link depending on the lead action
  • the table should have a presentation role if it's used for presentation (which is apparently the case here)
user_45401410
Related