89 lines
3.9 KiB
Markdown
89 lines
3.9 KiB
Markdown
---
|
|
id: 587d778a367417b2b2512aa6
|
|
title: Improve Form Field Accessibility with the label Element
|
|
challengeType: 0
|
|
videoUrl: 'https://scrimba.com/c/cGJMMAN'
|
|
---
|
|
|
|
## Description
|
|
<section id='description'>
|
|
Improving accessibility with semantic HTML markup applies to using both appropriate tag names as well as attributes. The next several challenges cover some important scenarios using attributes in forms.
|
|
The <code>label</code> tag wraps the text for a specific form control item, usually the name or label for a choice. This ties meaning to the item and makes the form more readable. The <code>for</code> attribute on a <code>label</code> tag explicitly associates that <code>label</code> with the form control and is used by screen readers.
|
|
You learned about radio buttons and their labels in a lesson in the Basic HTML section. In that lesson, we wrapped the radio button input element inside a <code>label</code> element along with the label text in order to make the text clickable. Another way to achieve this is by using the <code>for</code> attribute as explained in this lesson.
|
|
The value of the <code>for</code> attribute must be the same as the value of the <code>id</code> attribute of the form control. Here's an example:
|
|
<blockquote><form><br> <label for="name">Name:</label><br> <input type="text" id="name" name="name"><br></form><br></blockquote>
|
|
</section>
|
|
|
|
## Instructions
|
|
<section id='instructions'>
|
|
Camper Cat expects a lot of interest in his thoughtful blog posts, and wants to include an email sign up form. Add a <code>for</code> attribute on the email <code>label</code> that matches the <code>id</code> on its <code>input</code> field.
|
|
</section>
|
|
|
|
## Tests
|
|
<section id='tests'>
|
|
|
|
```yml
|
|
tests:
|
|
- text: Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.
|
|
testString: assert($('label').attr('for'), 'Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.');
|
|
- text: Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.
|
|
testString: assert($('label').attr('for') == 'email', 'Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.');
|
|
|
|
```
|
|
|
|
</section>
|
|
|
|
## Challenge Seed
|
|
<section id='challengeSeed'>
|
|
|
|
<div id='html-seed'>
|
|
|
|
```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>Email:</label>
|
|
<input type="text" id="email" name="email">
|
|
|
|
|
|
<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 lightening 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 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>
|
|
```
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</section>
|
|
|
|
## Solution
|
|
<section id='solution'>
|
|
|
|
```js
|
|
// solution required
|
|
```
|
|
</section>
|