如何在沒有字段集的情況下對表單輸入進行分組？

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樣式問題

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和帶有aria-label的div之間沒有區別。

Answer 2

注意：對於單選按鈕組，您可以使用role=radiogroup 。 而且，為了將group或radiogroup group的語義表達給屏幕閱讀器用戶，需要用於分組元素的可訪問名稱 。