フィールドセットによるグループ化

Silktide は、関連するラジオボタンまたはチェックボックスのグループがフィールドセットで囲まれているかをチェックします。フィールドセットは、にこれらの選択肢が関連しており、1つの質問を構成していることを伝えます。

では、同じ name 属性を共有するラジオボタンとチェックボックスは、 1つのグループとして機能します。たとえば、サイズを選んだり、トッピングを選んだりする場合です。視覚的には、選択肢がまとまっているためグループであることが明らかですが、コード上でそれを明示するのは <fieldset> だけです。

<!-- 問題: 関連する選択肢がグループ化されていない -->
<label><input type="checkbox" name="fruit" value="apple"> Apple</label>
<label><input type="checkbox" name="fruit" value="banana"> Banana</label>

重要な理由

は、各選択肢に到達するたびにそれを読み上げます。グループがないと、利用者には「Apple、チェックボックス」「Banana、チェックボックス」と聞こえるだけで、それらがどの質問への回答なのかは分かりません。質問文がずっと前に読み上げられている場合や、まったく関連付けられていない場合もあります。フィールドセットと凡例で囲むと、各選択肢がそのコンテキスト内で読み上げられるため、利用者は何を選択しているのかを常に把握できます。

修正方法

関連する選択肢の各セットを <fieldset> で囲み、<legend> でグループを説明します。

<!-- 修正後: グループが明示され、名前が付けられている -->
<fieldset>
  <legend>好きな果物を選択してください</legend>
  <label><input type="checkbox" name="fruit" value="apple"> Apple</label>
  <label><input type="checkbox" name="fruit" value="banana"> Banana</label>
</fieldset>

Silktide によるテスト方法

各ページにあるすべてのラジオボタンとチェックボックスを見つけます。
name 属性ごとにグループ化します。
2つ以上の選択肢がある各グループについて、<fieldset> 要素内にないすべてのメンバーを報告します。

トラブルシューティング

別の方法で選択肢をグループ化しています

このチェックは、具体的に <fieldset> の祖先要素を探します。視覚的にのみ表現されたグループ化や、 role="group" などの別のマークアップによるグループ化は検出されません。フィールドセットによる方法が最も広くサポートされています。別のグループ化方法でも正しく読み上げられると確信できる場合は、検出結果をできます。