I have a form that has some JavaScript to advance to the next field when valid text is entered (sample below). My question is how is this handled by a screen-reader. Will this confuse the reader or will it detect the change in focus and read the new field out to the user?
HTML
<form action="/some/action" method="post" role="form">
<legend>A Form</legend>
<label for="first_number">First Number</label>
<input id="first_number" name="first_number" required type="text" value="">
<label for="second_number">Second Number</label>
<input id="second_number" name="second_number" required type="text" value="">
<button type="submit">Submit</button>
</form>
JavaScript
(function (document, window) {
function getFocusCallback(current_focus, go) {
var check = document.getElementById(current_focus);
var el = document.getElementById(go);
var pat = new RegExp('^\\d{3}$');
return function callback() {
if (pat.test(check.value)) {
el.focus();
}
};
}
document.getElementById('first_number').addEventListener('input', getFocusCallback('first_number', 'second_number'));
})(document, window);
So after the user has entered three digits in the first field, the focus method is called on the second.
I think that the issue here is unexpected behavior. For non-sighted users, any non-standard behavior could be a possible source of confusion, since it would work differently than every other website.
Also, is this a feature that you'd have on every field, or just some of them? If you have multiple fields with different behavior, that would be especially confusing.
There was a pretty good thread about this a couple of years ago with input from several people way more knowledgeable than myself. https://lists.w3.org/Archives/Public/w3c-wai-ig/2015AprJun/0162.html
You'll need to click the "Next message" link at the bottom of each page to read all messages in the thread.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With