Difficulty targeting elements

harryhmc

Hi, I'm a developer working on a public sector platform, and have been advised to use Handsfree for Web to test the accessibility of our platform. However I've had difficulty targeting some elements on several websites you would expect to be accessible, and I'm finding it hard to pinpoint the issue.

Here is a codepen with the particular elements I'm having trouble with - I've also had difficulty running this extension in 'playground' style environments, so hard to tell what the cause is.

Please let me know if you can replicate or need any more evidence from me.

javi

Hi harryhmc

I have copied the code from the codepen's example and uploaded it with some changes on the following page.
https://handsfreeforweb.com/test.html

The UI controls work properly for me.

I have had to update the HTML code to make it valid. Here the updated version.

<a href="javascript:alert('anchor click')">Anchor attribute (generally works fine, below elements do not)</a><br>
  <button onclick="alert('button click')">Button element</button><br>
  <input onclick="alert('input button click')" type="button" value="Input with type attr"><br>
  <input type="radio" name="option" id="test1"><label for="test1">Radio button 1</label>
  <input type="radio" name="option" id="tetst2"><label for="test2">Radio button 2</label><br>

Note: Codepen runs the introduced code inside an IFRAME. Handsfree for Web doesn't run inside iframes.

Let me know any other doubt you have, glad to hear you're testing the app using Handsfree for Web.

Thanks!
Javier

harryhmc

Thanks for responding so quickly 😃

Good to know that iframes cause issues for the extension. Do you know if it plays nice with React SPAs?

Since the platform isn't in public beta yet, I don't know how much I can share, but here's a sanitised, more accurate version of what I'm working with.

<form class="margin-top-7"><div class="form-group"> <fieldset class="fieldset"> <legend class="fieldset__legend fieldset__legend--xl"><h1 class="fieldset__heading">Choose an option</h1></legend> <div class="" data-test="radios-wrapper"> <div class="form-group"> <div class="radios" id="radios_j8slu" data-test="radios" role="radiogroup"> <div class="radios__item"><input class="radios__input" id="R8000" name="radios_j8slu" aria-labelledby="R8000--label" data-test="radio-button" type="radio" value="R8000"><label class="label radios__label" id="R8000--label" for="R8000">Option 1</label> </div> <div class="radios__item"><input class="radios__input" id="R8001" name="radios_j8slu" aria-labelledby="R8001--label" data-test="radio-button" type="radio" value="R8001"><label class="label radios__label" id="R8001--label" for="R8001">Option 2</label> </div> <div class="radios__item"><input class="radios__input" id="R8008" name="radios_j8slu" aria-labelledby="R8008--label" data-test="radio-button" type="radio" value="R8008"><label class="label radios__label" id="R8008--label" for="R8008">Option 3</label> </div> <div class="radios__item"><input class="radios__input" id="R8010" name="radios_j8slu" aria-labelledby="R8010--label" data-test="radio-button" type="radio" value="R8010"><label class="label radios__label" id="R8010--label" for="R8010">Option 4</label> </div> </div> </div> </div> </fieldset> </div> <br><button class="button button--small" aria-disabled="false" type="submit" data-test="submit">Continue</button></form>

If I render the form on its own, I can interact with the radio buttons, but not the submit button. Meanwhile, I can't select the radio buttons or the submit button in my React SPA (in my react spa, the parent elements are html>body>div>main>div>this form, if relevant).

Thanks,
Harry

javi

Hi Harry,

Code looks good, I think the best you can do to test it isolated is to move the code to an HTML file and serve it locally. i.e. using https://www.npmjs.com/package/serve

Since you're using React I guess the submit button has an "onClick" attribute that executes the submit action. Is that correct? In that case, I think you can check if it's been executed adding a console log inside of it.

In a regular HTML page, if you have a "submit" button, that means that there is some click handler defined with it, or the <form> tag has an "action" attribute that defines what happens when the form is submitted.

Thanks,
Javier

harryhmc

Yeah, I'd tested it isolated and the extension was still unable to find the button. Is this because of it having no onclick?

The form action is passed to the onSubmit attribute of the form element in lieu of an actual "action" attribute. Does the extension look for HTML attributes like onclick / onsubmit to decide what is clickable? If so, maybe the problem i'm facing is with React using a SyntheticEvent wrapper?

javi

I just found the problem.
The button has as attribute aria-disabled=false, the extension is only checking for the existence of aria-disabled and assuming that is always true.

I will fix the problem in the next version.

harryhmc

Great news - thanks for catching!

I think I've found the issue I was facing with radio buttons too - we're using a custom style that involves setting 'opacity: 0' on the radio button. Handsfree doesn't seem to like that, however?

(Thanks again for all your help so far! 👍️ )

javi

Hi Harry,

yes! that's right. If the element is not visible the extension will not consider it something that could be selectable.

Using role="radio" and aria-checked="false|true" might help. I'm not sure if the extension plays right with them but it should.

See https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/radio/radio.html

harryhmc

Yep, that's working on our end. Thanks - again - for your help on this 😀

Cheers,
Harry

javi

glad to help, let me know any doubt.