Question

阅读页面时，Chromevox和旁白（我没有JAWS或NVDA）似乎都跳过了<fieldset>的内部元素。在下面的示例HTML中，有一个按钮专注于<main id="content" tabindex="-1">元素：

<html lang="en">
<head><script>
    function focusOnContent() {
        document.getElementById('content').focus()
    }
</script></head>
<body>
    <button onclick="focusOnContent()">Focus on main</button>
    <main id="content" tabindex="-1">
        <h1>User Sign-up</h1>
        <fieldset>
            <legend>Name</legend>
            <label for="firstname">First</label>
            <input type='text' id='firstname'><br>
            <label for="lastname">Last</label>
            <input type='text' id='lastname'>
        </fieldset>
        <button>Submit</button>
    </main>
</body>
</html>

当点击<main>元素时，将获得焦点，并且屏幕阅读器会显示：

用户注册，名称，提交

但是，我想读为

用户注册，名称，第一，最后，提交

删除<fieldset>元素可以解决此问题，但是显然，我希望保留它，因为它可以解决其他可访问性问题。

Answer 1

如果您使用的是语义正确的html，则不必担心屏幕阅读器如何读取它。太多的变化，不同的组合将导致不同的理解。

屏幕阅读器内有不同的屏幕阅读器（Chromevox，VoiceOver，JAWS，NVDA），不同的浏览器（Chrome，Safari，Firefox，IE，Edge），不同的操作系统（Mac，PC，移动版）和详细程度设置本身。

您不能（也不应该）强迫屏幕阅读器以您认为应该阅读的方式进行阅读。屏幕阅读器用户非常熟悉其设置（特定的浏览器，操作系统，屏幕阅读器和设置），并且了解声音。

您上面的示例看起来不错。

您在focus（）的目标上有一个tabindex="-1"
您正在使用for的{{1}}属性来指向其各自的<label>元素
您有一个<input>和<fieldset>可以将元素分组在一起

是否可以强制屏幕阅读器读取字段集的内部内容？

1 个答案: