如何在没有字段集的情况下可访问地对表单输入进行分组？ [英] How to group form inputs accessibly without a fieldset?

问题描述

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

I have an HTML form, where in few places a single control is composed of several inputs. One example is a group of radio buttons.

我想对这些输入进行分组，并对其进行显式标签，以便屏幕阅读器也可以（除了视觉上

I'd like to group those inputs and it's label explicitly, so that the screen readers would also (in addition to the visual representation by aligning them on a single line) be able to understand and announce this relationship.

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

For example, let's say I have a control like this:

<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 元素，它的子元素 legacy 似乎正是为此而创建的（在下面的示例中使用）。

Standard solution problems: Fieldset styling issues

fieldset element and it's child legend seem to be made exactly for that (used in the example below).

问题是 fieldset 和 legend 元素不能样式与普通元素一样（对此有一些讨论），如今除了Firefox无法使用我的布局要求的Flexbox将它们对齐在一行上。

The problem is that fieldset and legend elements can't be styled like normal elements (some discussion about it) and nowadays other than in Firefox it's impossible to align them on a single line using Flexbox, which my layout requires.

<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 元素之外的其他几种形式的控件分组方式？

Question: Is there some other way?

That makes me wonder if there is some accessible way to group several form controls other than using fieldset element?

有一个组角色（在以下示例中使用） ，可以将其添加到简单的 div 中，看起来可以完成此工作，但没有任何地方明确指出它的功能等同于使用字段集。如果是的话，那我该如何标记该组中的某个元素以充当传说的等价物？

There is a "group" role (used in the example below), which could be added to a simple div and it looks like it might do the job, but nowhere is stated clearly that it is the functional equivalent to using a fieldset. And if it does, then how do I mark an element of this group to serve as an equivalent of 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 属性：

Basically you have already answered your question in the Possible Solution section (btw, as a blind person, I'm just impressed how you styled your question with headings!). You missed one tiny and simple thing, the aria-label attribute:

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

注意：这将在屏幕上不可见，这是仅适用于屏幕阅读器的解决方案。但是，如果要使其可见，请使用<$ c $ a> aria-labelledby 属性执行以下操作：

Note: this will be invisible on screen, it is a screen-reader only solution. If however you want to make it visible, do the following using the aria-labelledby attribute instead:

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

伪传奇可能是 span 甚至是 p ，当然，如果您觉得更合适的话。

快速又肮脏我所做的本地测试表明，至少对于JAWS和Chrome， fieldset 和 div 之间没有区别带有 aria标签。

The pseudolegend may be a span or even a p, of course, if you find it more appropriate.
A quick and dirty local test I made showed that, at least with JAWS and Chrome, there is no difference between a fieldset and a div with aria-label.

这篇关于如何在没有字段集的情况下可访问地对表单输入进行分组？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！