freeCodeCamp

7.0 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d778b367417b2b2512aa7	Wrap Radio Buttons in a fieldset Element for Better Accessibility	0		Обтекание переключателей в элементе Fieldset для лучшей доступности

Description

Следующая тема охватывает доступность переключателей. Каждый выбор дается label с for атрибутом привязки к id соответствующего пункта, как рассматривалось в последней задаче. Поскольку радиокнопки часто входят в группу, где пользователь должен выбрать одну, есть способ семантически показать, что выбор является частью набора. Тег fieldset окружает всю группу переключателей для достижения этого. Он часто использует тег legend чтобы предоставить описание для группировки, которое считывается программами чтения с экрана для каждого выбора в элементе fieldset. fieldset и тег legend не нужны, если выбор не требует пояснений, например, гендерный выбор. Использование label с for атрибута для каждого переключателя достаточно. Вот пример:

<form>
<fieldset>
<legend> Выберите один из этих трех элементов: </ legend>
<input id = "one" type = "radio" name = "items" value = "one">
<label for = "one"> Выбор 1 </ label> <br>
<input id = "two" type = "radio" name = "items" value = "two">
<label for = "two"> Выбор 2 </ label> <br>
<input id = "three" type = "radio" name = "items" value = "three">
<label for = "three"> Choice Three </ label>
</ fieldset>
</ form>

Instructions

Camper Cat хочет получить информацию о уровне ниндзя своих пользователей, когда они регистрируются в его списке электронной почты. Он добавил набор переключателей и узнал из нашего последнего урока, чтобы использовать метки меток for атрибутов для каждого выбора. Вперед Camper Cat! Однако его код по-прежнему нуждается в некоторой помощи. Измените тег div окружающий радиокнопки, на тег fieldset и измените тег p внутри него на legend.

Tests

tests:
  - text: Ваш код должен иметь тег <code>fieldset</code> вокруг установленного переключателя.
    testString: 'assert($("fieldset").length == 1, "Your code should have a <code>fieldset</code> tag around the radio button set.");'
  - text: 'Убедитесь, что ваш элемент <code>fieldset</code> имеет закрывающий тег.'
    testString: 'assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length, "Make sure your <code>fieldset</code> element has a closing tag.");'
  - text: 'Ваш код должен иметь тег <code>legend</code> вокруг текста, спрашивающий, какой уровень ниндзя является пользователем.'
    testString: 'assert($("legend").length == 1, "Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.");'
  - text: У вашего кода не должно быть никаких тегов <code>div</code>.
    testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
  - text: 'В вашем коде больше нет тега <code>p</code> вокруг текста, спрашивающего, какой уровень ниндзя является пользователем.'
    testString: 'assert($("p").length == 4, "Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.");'

Challenge Seed

<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">


      <!-- Add your 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>
      <!-- Add your 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 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>&copy; 2018 Camper Cat</footer>
</body>

Solution

// solution required

7.0 KiB Raw Blame History Unescape Escape