html – 如何在没有字段集的情况下对表单输入进行分组？

问题：分组表单元素

我有一个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样式问题

fieldset元素和它的子图例似乎完全是为了那个(在下面的例子中使用).

问题是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中,看起来它可能会完成这项工作,但是没有明确说明它与使用字段集的功能相同.如果确实如此,那么我如何标记该组的元素作为传奇的等同物呢？

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

解决方法

基本上你已经在可能的解决方案部分回答了你的问题(顺便说一下,作为一个盲人,我只是对你用标题设置问题的方式印象深刻！).你错过了一个小而简单的东西,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>

当然,伪传输可能是跨度甚至是p,如果你觉得它更合适.我做的快速而肮脏的本地测试表明,至少在JAWS和Chrome中,fieldset和带有aria-label的div之间没有区别.