我有一个包含许多动态表单元素的 div。我希望屏幕阅读器在通过选项卡输入 div 时读取标签，但 div 本身(并且应该)无法聚焦。通常在标签上使用 for 属性或在第一个表单元素上使用 aria-scribedby/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 属性？
最佳答案
如果您想让页面易于访问，那么您应该使用正确的语义元素。这样做可以使屏幕阅读器和其他辅助技术能够根据各自的目的正确呈现元素。 看来您的 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/
关于javascript - 强制屏幕阅读器在输入 Div 时读取标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39154335/