我可以在同一个表单元素部分同时使用 fieldsets 和 role="group"

Question

我一直在为 508 可访问性分配研究这个问题，从它的声音来看，使用字段集和图例是使用 role="group"、role="radiogroup" 等的替代方法，并且反之亦然。这是正确的还是我应该同时使用这两种元素？那么例如以下代码是否正确？

<fieldset>
                <legend class="h3">Which products interest you?</legend>
                <div class="controls" role="group">
                    <!-- Multiple Checkboxes -->
                    <input class="checkbox-btn-control" id="medical-non-medicare" type="checkbox" name="product1" value="Medical (not eligible for Medicare)" aria-label="Medical (not eligible for Medicare)">
                    <label for="medical-non-medicare">Medical (not eligible for Medicare)</label>
                    <input class="checkbox-btn-control" id="dental" type="checkbox" name="product2" value="dental" id="Dental">
                    <label for="dental">Dental</label>
                    <input class="checkbox-btn-control" id="medicare-advantage" type="checkbox" name="product3" value="Medicare Advantage" aria-label="Medicare Advantage">
                    <label for="long-term-care">Medicare Advantage</label>
                </div>
            </fieldset>

Answer 1

According to the W3C，fieldset 的默认 aria 角色是 "group"

因此您可以在 fieldset 上定义值为 "group" 的 role（这是多余且不必要但允许的）。

您不能做的是在 fieldset 元素的 role 属性上定义另一个值 "group"

在您的示例中，问题在于您将有两个具有 role=group 值的不同元素（fieldset 和 div）。我会说内部的可能有优先权并阻止您的屏幕阅读器访问 legend 元素。