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

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元素不能像正常的元素风格（一些讨论这件事），与时下除了在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"？

有一个“组”角色（在下面的示例中使用），可以添加到简单角色中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使用divwith 和a 之间没有区别aria-label。

Answer 2

注意：特别是对于单选按钮组，您可以使用role=radiogroup. 此外，为了向屏幕阅读器用户表达group或的语义，需要radiogroup一个可访问的分组元素名称。