WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [EXTERNAL]JAWS / says "No clickable elements on page"

for

From: Tim Harshbarger
Date: Jun 11, 2018 6:50AM

Hmm, there seem to be a lot of things added to the button that look to be for accessibility that I think might be totally unnecessary.

So, to make a button with a text label that is accessible, here is what is required:
<button>OMC Navigation</button>
If the button is disabled, you would change it to this:
<button disabled>OMC Navigation</button>

If the button is labelled using an image, this is how it would change:
<button><img src="image.png" alt="OMC Navigation"></button>
<button disabled><img src="image.png" alt="OMC Navigation"></button>

If you were labelling the button with a background CSS image, it would change a bit more:
<button aria-label="OMC Navigation" class="icon"></button>
<button disabled aria-label="OMC Navigation" class="icon"></button>

The code you provided includes a div, span, and some text. The above examples would remain the same except with the div, span, and text--instead of just text.
<button><div><span>OMC Navigation</span></div></button>

Things like role="button", tabindex="0", and aria-labelledby are not needed if you are using native HTML form elements like button, input, textarea, select, a, or area. Those elements already convey their role and states and will work using the keyboard. Typically, the only thing you have to do is ensure that they have labels (or an accessible name) which HTML provides ways to do.

Aria-labelledby is only necessary when the label for the widget isn't contained by the widget, but appears somewhere else on the screen--though often in those situations you would use a label element instead. For example:
<label for="userID">User ID:</label><input type="text" id=userID">
Rather than:
<span id="userIDLabel">User ID</span><input type="text" aria-labelledby="userIDLabel">
The majority of the time you would use the label element since it also increases the click area for the widget--that is clicking on both the label or the textfield brings focus to the textfield. However, sometimes you will run into situations where aria-labelledby is the only way to resolve the problem. You then use aria-label in those situations where the other methods won't work---like in the situation where you need to label a button that is using a CSS background label or icon as the label.

It looks like you are using the button to create a hamburger menu, if that is so you will probably want to look at the WAI-ARIA 1.1 design pattern for menu buttons:
http://www.w3.org/TR/wai-aria-practices-1.1/#menubutton

One advantage of using the design pattern is whoever is testing with JAWS can just focus on ensuring the widget works like the design pattern states. That mainly involves ensuring all the keyboard commands work and ensuring that the role and state information is being conveyed by the screen reader.

I hope that helps.

Thanks,
Tim