Question

以下是我的代码：

    <form>
        <div class="form-group loginFormGrp">
            <label class="caption">Backup Cloud</label>
            <div class="custSelect loginSelect">
            <label class="caption">Server URL</label>
                <input type="text" aria-label="Server URL" name="serverUrl" class="form-control" placeholder="example.server.com" value="">
            </div>
            <div class="form-group loginFormGrp">
                <label class="caption">Email</label>
                <input type="text" aria-label="Email" name="email" class="form-control" placeholder="user@example.com" value="">
            </div>
            <div class="loginBtnRow">
                <button tabindex="0" type="submit" class="lgBtn btn btn-primary btn-block">Continue</button>
            </div>
        </div>
    </form>

每当画外文突出显示输入文本字段时，它会显示“您当前在文本字段内，在网络内容中。要在此字段中输入文字，请键入。要退出网络区域，..” 当我开始打字时，什么也没说。并检查其他appilcation或网站，它读取我正在键入的内容。但在我的情况下，它不读。如果有人知道解决方案，请帮忙。

Answer 1

将title属性添加到input元素并提供其他文本。

屏幕阅读器也应该选择将aria-label添加到输入元素。

http://pauljadam.com/demos/title-aria-label.html提供了有关不同浏览器和屏幕阅读器如何处理这些属性的详细信息。

Answer 2

我不确定这是否有帮助，但每次用户修改文本字段时，您都可以尝试更新字段value属性。这样的事情：

document.querySelectorAll('input[type="text"]').forEach(function(v){
    v.addEventListener('input', function(){
        v.setAttribute('value', v.value);
    });
});

但我希望有人能提供更好的答案，而无需使用额外的JavaScript。

Answer 3

你的代码似乎很好。我尝试使用名为ChromeVox的Chrome插件，除了将lang属性添加到父html标签并将所有内容都包含在body标签中之外，一切似乎都很好。

<html lang="en-US" style="height: 100%;">
<body>
 <form>
        <div class="form-group loginFormGrp">
            <label class="caption">Backup Cloud</label>
            <div class="custSelect loginSelect">
            <label class="caption">Server URL</label>
                <input type="text" aria-label="Server URL" name="serverUrl" class="form-control" placeholder="example.server.com" value="">
            </div>
            <div class="form-group loginFormGrp">
                <label class="caption">Email</label>
                <input type="text" aria-label="Email" name="email" class="form-control" placeholder="user@example.com" value="">
            </div>
            <div class="loginBtnRow">
                <button tabindex="0" type="submit" class="lgBtn btn btn-primary btn-block">Continue</button>
            </div>
        </div>
    </form>
</body>
</html>

配音不是正在阅读我在文本框中输入的内容

3 个答案: