WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Isabel Holdsworth
Date: Oct 2, 2018 6:06AM

Hi Lawrence,

This button looks as though it should received focus and accept a JAWS
Click event just fine. Do you know if it could possibly be inside a
container whose aria-hidden attribute is set to "true"? That's the
only thing I can think of that would stop JAWS from seeing it as a
clickable element.

Cheers, Isabel

On 11/06/2018, Tim Harshbarger < <EMAIL REMOVED> > wrote:
> 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
>