屏幕阅读器和 JavaScript 焦点事件的可访问性？

Question

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.

Answer 1

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.