<legend> 标签未被讲述人 Windows 读取

Question

Windows 讲述人不读取字段集中的图例标记。同时 NVDA 和 JAWS 正确读取图例。标记如下：

<fieldset>
    <legend>Description</legend>
    <label>
        <input id="option1"type="radio" value="1">
        Option 1
    </label>                     
    <label>
        <input id="option1" type="radio" value="2">
        Option 2
    </label>
</fieldset>

有没有办法让“讲述人”阅读图例？

Answer 1

屏幕 reader 对 <legend> 的支持一直参差不齐，要在不影响其他应用程序（例如 NVDA 和大白鲨）。

但是，您可以尝试通过在 label 元素中插入视觉上隐藏的文本来更明确地传达 legend 元素的上下文。这将为视力不佳的用户补充不可见的附加信息。技巧包括 positioning content off-screen or using CSS clip-path.

<fieldset>
    <legend>Billing Address:</legend>
    <div>
        <label for="billing_name">
            <span class="visuallyhidden">Billing </span>Name:
        </label><br>
        <input type="text" name="billing_name" id="billing_name">
    </div>
    <div>
        <label for="billing_street">Street:</label><br>
        <input type="text" name="billing_street" id="billing_street">
    </div>
    […]
</fieldset>

另请注意，不同的屏幕 reader 有时会以不协调的方式运行。让他们表现得一样也不是不可能，所以我们必须“平分秋色”，努力为所有人提供合理的便利，即使不是在所有情况下都是完美的。

Depending on the configuration, some screen readers read out the legend either with every form element, once, or, rarely, not at all. To accommodate this consider the following:

Make the legend as short as possible for situations in which it is read together with the label each time.

Make the individual labels sufficiently self-explanatory for situations in which legends are not read aloud, without repeating the legend in every label.

https://www.w3.org/WAI/tutorials/forms/grouping/

<legend> 标签未被讲述人 Windows 读取

<legend> tag is not read by Windows Narrator

accessibility

screen-readers

narrator