フィールドセットの凡例

Silktide は、fieldset で宣言されたフォームフィールドのすべてのグループに、そのグループの用途を説明する legend も含まれているかチェックします。legend はグループ全体に名前を付けるため、各選択肢が文脈とともに読み上げられます。

では、<fieldset> 要素が関連するフォームコントロール（ラジオボタン、チェックボックス、住所フィールドなどのセット）をグループ化し、<legend> 要素がそのキャプションになります。

<!-- 問題: グループに凡例がない -->
<fieldset>
  <label><input type="radio" name="size" value="s"> Small</label>
  <label><input type="radio" name="size" value="l"> Large</label>
</fieldset>

これが重要な理由

視覚的に閲覧する訪問者には、選択肢のすぐ上にグループのキャプションが表示されます。一方、の利用者には、各選択肢が一度に読み上げられます。legend がなければ、何を選んでいるのか分からないまま「Small」や「Large」とだけ聞こえてしまいます。legend は利用者がグループに入ったときに読み上げられるため、「T シャツのサイズ」のような質問がすべての人に伝わります。

修正方法

各 <fieldset> の中の最初の要素として <legend> を追加し、グループの内容を短い言葉で説明します。

<!-- 修正後: 凡例がグループに名前を付けている -->
<fieldset>
  <legend>T シャツのサイズ</legend>
  <label><input type="radio" name="size" value="s"> Small</label>
  <label><input type="radio" name="size" value="l"> Large</label>
</fieldset>

legend は短くしてください。スクリーンリーダーはグループ内の各フィールドで legend を繰り返し読み上げることがあります。

Silktide によるテスト方法

各ページのすべての <fieldset> 要素を見つけます。
<legend> 要素を直接の子要素として持たないものを、それぞれ報告します。

トラブルシューティング

legend が存在するのに報告される

<legend> は <fieldset> の直接の子要素でなければなりません。<div> のラッパーなど、別の要素の内側にネストされたキャプションは、グループの legend として認識されません。このチェックでも、でも同様です。