html - 如何在没有字段集的情况下以可访问的方式对表单输入进行分组？

Question

问题:分组表单元素

我有一个 HTML 表单，在少数地方，单个控件由多个输入组成。一个例子是一组单选按钮。

我想将这些输入分组并明确标记，以便屏幕阅读器(除了通过将它们对齐在一行上的视觉表示之外)也能够理解和宣布这种关系。

例如，假设我有一个这样的控件:

<div class="control">
  <div class="control-label">Type</div>
  <div class="control-inputs">
    <input type="radio"
           name="type"
           value="a"
           id="type-a" />
    <label for="type-a">A</label>

    <input type="radio"
           name="type"
           value="b"
           id="type-b" />
    <label for="type-b">B</label>
  </div>
</div>

标准解决方案问题:字段集样式问题

fieldset 元素及其子元素 legend 似乎正是为此而制作的(在下面的示例中使用)。

问题是 fieldset 和 legend 元素不能像普通元素一样设置样式 (some discussion about it)，现在除了在 Firefox 中，不可能将它们对齐使用 Flexbox 的单行，这是我的布局所需要的。

<fieldset class="control">
  <legend class="control-label">Type</legend>
  <div class="form-inputs">
    <input type="radio"
           name="type"
           value="a"
           id="type-a" />
    <label for="type-a">A</label>

    <input type="radio"
           name="type"
           value="b"
           id="type-b" />
    <label for="type-b">B</label>
  </div>
</fieldset>

问题:还有其他办法吗？

这让我想知道除了使用 fieldset 元素之外，是否有一些可访问的方法来对多个表单控件进行分组？

可能的解决方案:role="group"?

有一个"group" role (在下面的示例中使用)，它可以添加到一个简单的 div 中，看起来它可以完成这项工作，但没有明确说明它在功能上等同于使用字段集。如果是这样，那么我如何标记这个组的一个元素作为 legend 的等价物？

<div role="group"
     class="control">
  <div class="control-label">Type</div>
  <div class="control-inputs">
    <input type="radio"
           name="type"
           value="a"
           id="type-a" />
    <label for="type-a">A</label>

    <input type="radio"
           name="type"
           value="b"
           id="type-b" />
    <label for="type-b">B</label>
  </div>
</div>

Answer 1

基本上您已经在“可能的解决方案”部分回答了您的问题(顺便说一句，作为一个盲人，我对您如何使用标题设计您的问题印象深刻!)。您错过了一件微小而简单的事情，aria-label 属性:

<div role="group" class="control" aria-label="Type">

注意:这在屏幕上是不可见的，它是一个仅限屏幕阅读器的解决方案。但是，如果您想让它可见，请改用 aria-labelledby 属性执行以下操作:

<div role="group" class="control" aria-labelledby="pseudolegend">
<div id="pseudolegend" class="style-it-like-a-legend">Type</div>
[...]
</div>

pseudolegend 可能是一个span，甚至是一个p，当然，如果你觉得它更合适的话。
我进行的一个快速而肮脏的本地测试表明，至少对于 JAWS 和 Chrome，fieldset 和带有 aria-label< 的 div 之间没有区别.