Device dependent event handler

This page discusses the use of a W3.css template and the fact that it uses a "hidden" control. This has been fixed from the useability point of view.

For a more general discussion regarding W3.css and responsive design

This page has a Device Dependent Handler present when checked for Accessibility. If you are concerned about this issue on your website I think that you will find that there is not a problem on this page.

The accessibilty report is just telling me that a control on a menu that is only seen when the page is rendered on a small screen, i.e. a Smartphone, it cannot be seen. The assessibilty tool assesses the page in "desktop" mode. If viewing this page on a computer and see the overlay menu on the left minimize the screen and see how the pop-up menu appears.

In trying to get one of my current website designs to validate against the Wave Accessibilty tool I found that I had a problem with an event handler that would not validate without creating an alert.

The hidden control is shown below: (The "Close Menu/Top" Control)

If you are viewing this page on large screen you will not see it. You will only see it on a "mobile" display and only if you click the "Menu" button.

The diagnosis of this is not easy to see as the template used for the particulr website uses a W3C template that features an overlay technique. Unless the page is viewed as it would display on a mobile device the "menu close" button does not display. The Wave Accessibility tool probably doesn't see the control and its event handler.

What w3.org/WAI/wcag says:

The Code in Question

This is an "overlay effect" that is part of a W3.css website template. On a normal screen (large or computer/tablet) the side menu is visbible, when the screen is made smaller the overlay is replaced with a hamburger menu and the DOM is manipulated so that the onClick() event is changed to an w3_open() event. The WAVE analysis cannot predict this and interprets it as a "Device Dependant" event.

While this is not strictly true, although the onclick event may well appear to be on an object other than a link, form control, or an element with a tabindex of 0, it triggers an alert. I would question the use of this template by anyone other than someoe who can explain this. For me it is okay for the Parish Council as it gives me something to work out. Also, the div that contains this event handler has a z-index set to 3, and is probably part of the overlay scheme.

See update below

The Hidden button is an Awesome4.7 icon

The menu button used in the Parish Council/Friends template is from the Font Awesome framework. Here is another example: - a cog

FA have an aria-hidden attribute for their icon class. This is similar to the roles model used to indicate menu items.

The cog shown above the attribute aria-hidden is set to false so that it displays.

The code shown above is also another example of the W3 Frameworks use of the w3-code container with highlighting.

The real solution

The problem seems to stem from the w3-hide-large class.

The CSS Media Query is hidden from the accessibility tool by the fact that it resides in a linked .css file. My Responsive Bottom Menu hides the "Hamburger" icon without throwing this alert.

I will have to review both sets of css to determine a fix. The FBM does not use the W3.css Framework.

The W3.css Framework