設問名がないラジオボタンとチェックボックスのグループ

どの選択肢にもラベルがあり、名前はあります。しかし設問は選択肢の横にある段落で、グループの名前ではないため、スクリーンリーダーは「はい、ラジオボタン」とだけ読み、設問は読みません。

fieldsetがグループになり、legendがその名前になります。フォーカスがグループに入ると、スクリーンリーダーは「不在時は置き配する？、グループ、はい、ラジオボタン」のように設問を読みます。ラベルは残すので、各選択肢にもそれぞれの名前があります。fieldsetの既定の枠線や余白が不要なら、CSSで消しても意味は変わりません。

どちらも画面の設問をグループの名前にし、1.3.1を満たします。fieldsetとlegendを使ってください。素のHTMLで同じことができ、IDを揃える必要もなく、リーダー表示や古い支援技術のようにARIAの対応が不十分な環境でも動きます。グループのロールは構造を変えられないマークアップに使い、変えられるようになったらfieldsetに置き換えます。

legendが名前を付けるのはグループで、欄ではありません。 各選択肢にもラベルが必要です。横のテキストだけで名前のないラジオボタンをlegendの下に並べると、設問の後に「ラジオボタン」としか読まれません。andi:legend-aloneが報告するのはこの誤りです。

legendは短くします。 スクリーンリーダーは、特にフォーム一覧で、グループ内の選択肢ごとにlegendを繰り返すことがあります。legendには設問だけを入れ、お急ぎ便の料金のような長い補足は、グループや選択肢にaria-describedbyで結び付けたヒントにします。

チェックボックスが一つならグループは不要です。 「利用規約に同意する」だけのチェックボックスは、ラベルだけで名前が付きます。グループにするのは、複数のチェックボックスが一つの設問に答えるときです。

スタイル。 古いブラウザーでは、fieldsetをflexやgridで配置しにくいことがありました。現在のブラウザーはどちらにも対応しているので、スタイルが理由でfieldsetをやめる必要はほとんどありません。幅の広い子要素でfieldsetが縮まない場合はmin-inline-size: 0を指定します。legendは最初の子要素に置かないと、legendとして扱われません。

入れ子のグループ。 「配送先」の中の住所のように、グループの中にグループを置くこともできますが、legendが順に読まれます。外側の設問が本当に内側を説明しているときだけ入れ子にします。

コンポーネント。 共通のラジオグループとチェックボックスグループのコンポーネントで設問を必須にし、legendとして描画します。そうすれば、グループのない選択肢は作れなくなります。