我有一个这样的表单：
<form {...props} tabIndex={0}>
<ProgressBar />
<FormTitle />
props.questions.map(q => <Question {...q} />)
</form>当焦点到达form元素时，屏幕阅读器（例如Mac上的VoiceOver）似乎只会自动读出进度条，然后停止。我希望焦点表单中的所有子组件都能自动读出，然后每个单独的输入控件在标签导航时读取，但这可能是对屏幕阅读器焦点的不准确理解。
当我用Tab键导航时，焦点会进入表单中的每个输入字段，并完全绕过表单标题。
2条答案
按热度按时间gc0ot86w1#
首先，您可能不应该在表单上使用制表符索引。表单通常不是交互式元素，因此您不需要为屏幕阅读器用户而使其交互。屏幕阅读器用户有多种方式来导航页面上的内容，并且不需要添加制表位来帮助他们。
goqiplq22#
键盘可访问性的基本规则非常简单：所有交互式元素都必须是可聚焦的，并且只有交互式元素才是可聚焦的，而非交互式元素不应该是可聚焦的。
交互意味着你可以与元素进行交互，即执行一些操作，对它做一些事情。例如，按钮和链接是交互式的，表单字段也是如此。当你点击它们或在它们具有焦点时键入文本时，就会发生一些事情。
然而，段落不是交互式的。用户并不期望在点击它们时发生任何事情。也不是像
<h1>这样的标题，也不是完整的<form>元素。在<form>元素的情况下，你不与表单本身交互，而只是与它的字段交互。字段是交互式的，但不是表单。由于窗体本身不是交互式的，所以它不应该是可聚焦的（你应该删除你的tabindex属性）。屏幕阅读器也不期望它，所以如果它的行为完全出乎意料，你也不应该感到惊讶。和往常一样，垃圾进，垃圾出。
更一般地说，您在屏幕阅读器用户和仅使用键盘的用户之间造成了一个相当常见的混淆。
屏幕阅读器用户，盲人，部分视力，或有困难阅读屏幕上的文本舒适，有各种快捷方式的列表来阅读整个页面。使用标签是其中之一，这是非常有用和重要的，它的工作正确，但它不是唯一的导航手段。有常见的快捷方式跳转到下一个标题，使它从该点阅读，或者例如下一表单字段;或者，更简单地说，箭头键允许像在Word文档中那样移动阅读光标，或者左右扫动屏幕允许逐个读取元素。但是，请注意，这里讨论的阅读光标与系统焦点不同，这正是许多混淆和误解的根源。
另一方面，只使用键盘的用户只能按Tab键在交互元素之间移动。但他们不需要更多的导航键，因为他们可以完美地看到屏幕。他们不需要以某种方式将特殊的阅读光标精确地移动到给定的元素上来阅读它。他们所需要的只是关注有功能的元素。因此，关注没有功能的元素对他们来说只是浪费时间。