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

この記事の言及

• fieldset / legend でのレイアウト
• 'display: contents'とは
• fieldset / legend で、'display: contents'は使用できる

fieldset

formの実装

横並びの実装例

<!-- 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 の挙動

アクセシビリティツリー

視覚要素としては見えなくなりますが、アクセシビリティツリーには存在するものです。ただ
現在（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 はない が正解で、グループのラベルまたは説明が書いてあれば問題ないようです。

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