12

问题：对表单元素进行分组

我有一个 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>
4

2 回答 2

15

基本上你已经在可能的解决方案部分回答了你的问题（顺便说一句，作为一个盲人，我只是对你如何用标题来设计你的问题印象深刻！）。您错过了一件小而简单的事情，即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是 aspan甚至是 a 。 我进行的一个快速而肮脏的本地测试表明，至少对于 JAWS 和 Chrome，a和 a with之间没有区别。p
fieldsetdivaria-label

于 2018-01-15T22:59:56.243 回答
6

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

于 2018-01-17T07:04:47.223 回答