如何在没有字段集的情况下以可访问的方式对表单输入进行分组？
How to group form inputs accessibly without a fieldset?
问题：对表单元素进行分组
我有一个 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"?
有一个 "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>
基本上你已经在可能的解决方案部分回答了你的问题（顺便说一句，作为一个盲人，我对你如何用标题来设计你的问题印象深刻！）。您错过了一件微小而简单的事情，即 aria-label 属性：
<div role="group" class="control" aria-label="Type">
注意：这在屏幕上是不可见的，它是 screen-reader 唯一的解决方案。但是，如果您想让它可见，请改用 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 和 div 与 aria-label.[=20 之间没有区别=]
注意： 对于单选按钮组，您可以使用 role=radiogroup. Also, in order for the semantics of a group or radiogroup to be expressed to screen reader users an accessible name 因为分组元素是必需的。
问题：对表单元素进行分组
我有一个 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 元素的样式不能像普通元素 (
<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>
基本上你已经在可能的解决方案部分回答了你的问题（顺便说一句，作为一个盲人，我对你如何用标题来设计你的问题印象深刻！）。您错过了一件微小而简单的事情，即 aria-label 属性：
<div role="group" class="control" aria-label="Type">
注意：这在屏幕上是不可见的，它是 screen-reader 唯一的解决方案。但是，如果您想让它可见，请改用 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 和 div 与 aria-label.[=20 之间没有区别=]
注意： 对于单选按钮组，您可以使用 role=radiogroup. Also, in order for the semantics of a group or radiogroup to be expressed to screen reader users an accessible name 因为分组元素是必需的。