--- id: 587d778b367417b2b2512aa7 title: ラジオボタンを fieldset 要素で囲んでアクセシビリティを向上させる challengeType: 0 videoUrl: 'https://scrimba.com/c/cVJVefw' forumTopicId: 301030 dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility --- # --description-- フォームの次のトピックとして、ラジオボタンのアクセシビリティについて説明します。 前回のチャレンジで説明したように、それぞれの選択肢には対応する項目の `id` に結び付く `for` 属性を持つ `label` が与えられます。 ラジオボタンは、ユーザーがどれか 1 つを選択する必要があるグループ内にあることが多いため、その選択肢がセットの一部であることを意味的に明示する方法があります。 `fieldset` タグでラジオボタンのグループ全体を囲むのがその方法です。 `legend` タグはグループの説明を提供するために使用され、スクリーンリーダーは `fieldset` 要素内の各選択肢と一緒にこの説明を読み上げます。 `fieldset` ラッパーと `legend` タグは、性別のように選択肢から選択内容が自明である場合には必須ではありません。 `label` で各ラジオボタンに `for` 属性を設定して使用するだけで十分です。 例: ```html
Choose one of these three items:

``` # --instructions-- Camper Cat は、ユーザーがメールリストに登録するとき、忍者レベル情報を知りたいと考えています。 彼は前回のチャレンジで、各選択肢に対する `for` 属性を持つ `label` タグを使用してラジオボタンのセットを追加することを学びました。 がんばれ Camper Cat！ しかし、彼のコードはまだ助けを必要としています。 ラジオボタンを囲む `div` タグを `fieldset` タグに変更し、その中の `p` タグを `legend` タグに変更してください。 # --hints-- ラジオボタンセットの周りに `fieldset` タグがなければなりません。 ```js assert($('fieldset').length == 1); ``` `fieldset` 要素には終了タグが必要です。 ```js assert( code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/
/g).length ); ``` コードには、ユーザーがどのレベルの忍者かを尋ねるテキストの周りに `legend` タグが必要です。 ```js assert($('legend').length == 1); ``` コードに `div` タグを含めないでください。 ```js assert($('div').length == 0); ``` コードには、ユーザーがどのレベルの忍者かを尋ねるテキストの周りの `p` タグが無いようにしてください。 ```js assert($('p').length == 4); ``` # --seed-- ## --seed-contents-- ```html

Deep Thoughts with Master Camper Cat

Sign up to receive Camper Cat's blog posts by email here!

What level ninja are you?



The Garfield Files: Lasagna as Training Fuel?

The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...

Defeating your Foe: the Red Dot is Ours!

Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...

Is Chuck Norris a Cat Person?

Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...

``` # --solutions-- ```html

Deep Thoughts with Master Camper Cat

Sign up to receive Camper Cat's blog posts by email here!

What level ninja are you?

The Garfield Files: Lasagna as Training Fuel?

The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...

Defeating your Foe: the Red Dot is Ours!

Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...

Is Chuck Norris a Cat Person?

Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...

```