html - フィールドセットなしでアクセス可能なフォーム入力をグループ化する方法は?

Question

問題: フォーム要素のグループ化

HTML フォームがありますが、単一のコントロールが複数の入力で構成されている場所はほとんどありません。1 つの例は、ラジオ ボタンのグループです。

これらの入力とそのラベルを明示的にグループ化して、スクリーン リーダーも (1 行に並べて表示するだけでなく) この関係を理解し​​て通知できるようにしたいと考えています。

たとえば、次のようなコントロールがあるとします。

<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 を使用してそれらを 1 行に揃えることができません。

<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>