输入 Div 时强制屏幕阅读器读取标签答案

【问题标题】：Force Screen Reader to Read Label Upon Entering Div输入 Div 时强制屏幕阅读器读取标签
【发布时间】：2017-01-02 10:05:16
【问题描述】：

我有一个包含许多动态表单元素的 div。我希望屏幕阅读器在通过制表符输入 div 时读取标签，但 div 本身（并且应该）无法聚焦。通常在标签上使用 for 属性或在第一个表单元素上使用 aria- describeby/aria-labeledby 属性会允许这种行为，但表单元素在加载过程中会动态变化，因此第一个元素是不确定的。

<label/> <%-- This should be read --%>

<div> <%-- When this div is entered during navigation with tabbing --%>
     <dynamic form element 1>
     ...
     <dynamic form element n>
</div>

有人知道通过 WIA-ARIA 产生这种行为的方法吗？

或者，是否有一种方法可以使用 javascript 来拉取 div 下的第一个元素并动态添加必要的 for/aria 属性？

【问题讨论】：

标签： javascript html wai-aria screen-readers jaws-screen-reader

【解决方案1】：

对容器使用<fieldset> 元素，而不是普通的<div>。当焦点进入其中的任何字段时，屏幕阅读器将宣布字段集标签。

【讨论】：

【解决方案2】：

如果您想让页面易于访问，那么您应该使用正确的语义元素。这样做可以让屏幕阅读器和其他辅助技术为各自的目的正确呈现元素。看来您的 div 应该是一个表单元素并使用字段集和图例，而不是使用 div 来创建表单。您应该始终避免重新发明轮子。

<form method="" action="">
    <fieldset>
        <legend>This will be read when the user tabs to this</legend>
        <dynamic form element 1>
         ...
        <dynamic form element n>
    </fieldset>
</form>

这将使您不再需要 ARIA 标签，除非您只有特定信息可以提供给这些用户。使用适当的语义元素可以大大有助于辅助技术访问页面。此链接以及许多其他链接提供了一些关于使表单可在 html 中访问的有用信息：https://www.w3.org/WAI/tutorials/forms/

【讨论】：