fieldsetのレイアウトとdisplay: contents のアクセシビリティ

この記事の言及

• fieldset / legend でのレイアウト
• 'display: contents' のアクセシビリティツリー
• fieldset / legend で display: contents を使用しても問題ない

fieldsetとは

同じ目的を持つウィジェットのグループの作成ができ、ラジオボタンやチェックボックスなどで使用することが多いです。
フォームの構築方法|MDN

しかしfieldsetはレイアウトに制限があり、その対策として下記の方法をとると扱いやすくなります。

横並びの実装例

<!-- tailwindを使用しています -->
<div class="flex">
    <fieldset class="contents">
        <legend>Radios</legend>
        <div>
            <div>
                <input type="radio" id="option1">
                <label for="option1">option1</label>
            </div>
            <div>
                <input type="radio" id="option2">
                <label for="option2">option2</label>
            </div>
            <div>
                <input type="radio" id="option3">
                <label for="option3">option3</label>
            </div>
        </div>
    </fieldset>
</div>

display: contentsとは

上記の例では display: contents がfieldsetに指定されています。display: contents とは視覚要素としては見えなくなりますが、アクセシビリティツリーには存在する ものです。

※注意点
現在（2024/9時点）では、いくつかのバグが見つかっています。それは、role が認識されなくなってしまうということであり、aria-role が directory grid treegrid table row gridcell cell columnheader tree treeitem となっているHTMLテーブルとノードが対象です。これはアクセシビリティに重大な問題を与えるものです。

参考記事：W3C（Box Generation: the none and contents keywords）

fieldsetのロール

fieldsetのアクセシビリティですが、ロールは group で無視をされておらず、ラベル（legend）も認識しているようでした。
また、legend については role はない が正解で、グループのラベルまたは説明が書いてあれば問題ないようです。

許可されているのロールなし
入るべきコンテンツについて