166 lines
7.0 KiB
Markdown
166 lines
7.0 KiB
Markdown
---
|
||
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
|
||
<form>
|
||
<fieldset>
|
||
<legend>Choose one of these three items:</legend>
|
||
<input id="one" type="radio" name="items" value="one">
|
||
<label for="one">Choice One</label><br>
|
||
<input id="two" type="radio" name="items" value="two">
|
||
<label for="two">Choice Two</label><br>
|
||
<input id="three" type="radio" name="items" value="three">
|
||
<label for="three">Choice Three</label>
|
||
</fieldset>
|
||
</form>
|
||
```
|
||
|
||
# --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(/<fieldset>/g).length
|
||
);
|
||
```
|
||
|
||
コードには、ユーザーがどのレベルの忍者かを尋ねるテキストの周りに `legend` タグが必要です。
|
||
|
||
```js
|
||
assert($('legend').length == 1);
|
||
```
|
||
|
||
コードに `div` タグを含めないでください。
|
||
|
||
```js
|
||
assert($('div').length == 0);
|
||
```
|
||
|
||
コードには、ユーザーがどのレベルの忍者かを尋ねるテキストの周りの `p` タグが無いようにしてください。
|
||
|
||
```js
|
||
assert($('p').length == 4);
|
||
```
|
||
|
||
# --seed--
|
||
|
||
## --seed-contents--
|
||
|
||
```html
|
||
<body>
|
||
<header>
|
||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||
</header>
|
||
<section>
|
||
<form>
|
||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||
<label for="email">Email:</label>
|
||
<input type="text" id="email" name="email">
|
||
|
||
|
||
<!-- Only change code below this line -->
|
||
<div>
|
||
<p>What level ninja are you?</p>
|
||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||
<label for="newbie">Newbie Kitten</label><br>
|
||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||
<label for="intermediate">Developing Student</label><br>
|
||
<input id="master" type="radio" name="levels" value="master">
|
||
<label for="master">Master</label>
|
||
</div>
|
||
<!-- Only change code above this line -->
|
||
|
||
|
||
<input type="submit" name="submit" value="Submit">
|
||
</form>
|
||
</section>
|
||
<article>
|
||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||
<p>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...</p>
|
||
</article>
|
||
<img src="samuraiSwords.jpeg" alt="">
|
||
<article>
|
||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||
<p>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...</p>
|
||
</article>
|
||
<img src="samuraiSwords.jpeg" alt="">
|
||
<article>
|
||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||
<p>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?...</p>
|
||
</article>
|
||
<footer>© 2018 Camper Cat</footer>
|
||
</body>
|
||
```
|
||
|
||
# --solutions--
|
||
|
||
```html
|
||
<body>
|
||
<header>
|
||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||
</header>
|
||
<section>
|
||
<form>
|
||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||
<label for="email">Email:</label>
|
||
<input type="text" id="email" name="email">
|
||
|
||
<fieldset>
|
||
<legend>What level ninja are you?</legend>
|
||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||
<label for="newbie">Newbie Kitten</label><br>
|
||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||
<label for="intermediate">Developing Student</label><br>
|
||
<input id="master" type="radio" name="levels" value="master">
|
||
<label for="master">Master</label>
|
||
</fieldset>
|
||
|
||
<input type="submit" name="submit" value="Submit">
|
||
</form>
|
||
</section>
|
||
<article>
|
||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||
<p>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...</p>
|
||
</article>
|
||
<img src="samuraiSwords.jpeg" alt="">
|
||
<article>
|
||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||
<p>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...</p>
|
||
</article>
|
||
<img src="samuraiSwords.jpeg" alt="">
|
||
<article>
|
||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||
<p>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?...</p>
|
||
</article>
|
||
<footer>© 2018 Camper Cat</footer>
|
||
</body>
|
||
```
|