屏幕阅读器和 JavaScript 焦点事件的辅助功能？

Question

我有一个表单，其中有一些 JavaScript 可以在输入有效文本时前进到下一个字段（下面的示例）。我的问题是屏幕是如何处理的-reader。这会混淆 reader 还是会检测焦点的变化并向用户读出新字段？

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);

因此，当用户在第一个字段中输入三位数字后，将在第二个字段中调用 focus 方法。

Answer 1

我认为这里的问题是意外行为。对于视力不佳的用户，任何不标准的行为都可能造成混淆，因为它的工作方式与其他所有网站都不同。

此外，这是您在每个领域都拥有的功能，还是其中的一部分？如果您有多个具有不同行为的字段，那将尤其令人困惑。

几年前有一个关于这个的很好的话题，有几个比我更博学的人提供了意见。 https://lists.w3.org/Archives/Public/w3c-wai-ig/2015AprJun/0162.html

您需要单击每页底部的“下一条消息”link 才能阅读线程中的所有消息。

屏幕阅读器和 JavaScript 焦点事件的辅助功能？

Accessibility with screen-readers and JavaScript focus events?

javascript

accessibility

screen-readers