A11y のヒント: フィールドセットと凡例を使用してコンテキストを追加する

<fieldset> を使用して、ラジオ ボタン、チェックボックス、さらには住所などのテキスト フィールドなど、フォーム上の関連要素をグループ化します.スクリーン リーダーは、ユーザーが項目にフォーカスすると、その項目がグループに属していることを通知します.
<legend> を使用して <fieldset> にタイトルを指定すると、そのタイトルがグループ メンバーシップと共にアナウンスされ、入力しようとしている情報についてより多くのコンテキストが提供されます.

<fieldset>
  <legend>Choose your favorite monster</legend>
  <input type="radio" id="kraken" name="monster" />
  <label for="kraken">Kraken</label>
  <input type="radio" id="sasquatch" name="monster" />
  <label for="sasquatch">Sasquatch</label>
  <input type="radio" id="mothman" name="monster" />
  <label for="mothman">Mothman</label>
</fieldset>

たとえば、チェックアウト プロセスで 2 つの異なる住所があり、次のようなものを追加すると、ユーザーは各フィールドに入力するときに、入力しているのが配送先住所なのか請求先住所なのかを完全に知ることができます.それぞれ同じです:

<fieldset>
  <legend>Shipping address</legend>
  <label for="shipping-street">Street</label>
  <input type="text" name="shipping-street" id="shipping-street" />
  <label for="shipping-postal-code">Postal code</label>
  <input type="text" name="shipping-postal-code" id="shipping-postal-code" />
  <label for="shipping-city">City</label>
  <input type="text" name="shipping-city" id="shipping-city" />
</fieldset>
<fieldset>
  <legend>Billing address</legend>
  <label for="billing-street">Street</label>
  <input type="text" name="billing-street" id="billing-street" />
  <label for="billing-postal-code">Postal code</label>
  <input type="text" name="billing-postal-code" id="billing-postal-code" />
  <label for="billing-city">City</label>
  <input type="text" name="billing-city" id="billing-city" />
</fieldset>

aria-describedby を使用してバインドされたメッセージについて見られるように、これらのユーザーにヘルプを提供する追加の方法です.