html - ラジオボタンのアクセシビリティ (508 準拠)

Question

「はい/いいえ」ラジオボタンで質問したい場合。スクリーン リーダーが、ラジオ ボタンが選択されたときに "はい" と "いいえ" のラベルを読み取るのではなく、"はい/いいえ" の選択に関連付けられた質問を読み取るように、コードをマークアップするにはどうすればよいですか?

<span>Did you understand this? (choose one) </span>
<label>
<input type="radio" id="yes_no" name="yes_no" value="Yes" />
Yes
</label>
<label>
<input type="radio" id="yes_no" name="yes_no" value="No" />
No
</label>

ありがとう

Answer 1

この性質のフォーム要素には、次を使用します。

<fieldset>
  <legend>Did you understand the question?</legend>
  <input type="radio" name="yes_no" id="yes">
  <label for="yes">Yes</label>
  <input type="radio" name="yes_no" id="no">
  <label for="no">No</label>
</fieldset>

また、ページ上のすべての ID 値は一意である必要があることに注意してください。記述子を共有する必要がある要素がある場合は、それをクラスとして追加します。

また、Fieldsets を使用して、無線選択に明確な境界を追加します。

また、ラベルの for="id_value" 属性を必ず指定してください。これにより、ラベルが目的のラジオ ボタンに関連付けられます。

Answer 2

<fieldset>
<legend><span>Did you understand this? (choose one) </span></legend>
<label>
<input type="radio" id="yes_no" name="yes_no" value="Yes" />
Yes
</label>
<label>
<input type="radio" id="yes_no" name="yes_no" value="No" />
No
</label>
</fieldset>

Answer 3

content 属性を使用します (利用可能な場合)。