Question

我有一个包含许多动态表单元素的div。我希望屏幕阅读器在通过tab键进入div时读取标签，但div本身（并且应该）是不可聚焦的。通常在标签上使用for属性或在第一个表单元素上使用aria-describedby / 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下的第一个元素并动态添加/ aria属性所需的内容？

Answer 1

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

Answer 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/

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

2 个答案: