Learn Accessibility by Building a Quiz - Step 30

Tell us what’s happening:
I found the instructions for this particular course are not clear, even confusing.
At step 30, we have to link the label elements with their corresponding input elements. As we know, it’s adding a for attribute to the label and having the id matching with the for in its input element. As simple as that, but I got stocked. Could anyone help me out ? Perhaps I misunderstood something?

Your code so far

 <fieldset class="question" name="html-question-two">
              <legend>
                A label element nesting an input element is required to have a
                for attribute with the same value as the input's id
              </legend 
              <ul class="answers-list">
                <li>
                  <label for="Yes">
                    <input type="radio" id="Yes"/> YES
                  </label>
                </li>
                <li>
                  <label for="No">
                    <input type="radio" id="No"/> NO
                  </label>
                </li>
              </ul>
![2022-08-18 18_24_45|690x374](upload://fR9soeLvQtjHMCDXN61b5XJfT3u.png)

Your browser information:

User Agent is: Chrome/104.0.0.0

Challenge: Learn Accessibility by Building a Quiz - Step 30

Link to the challenge:

You have only shown 2 radio buttons that you have modified, but there should be 4 radio buttons that you modify.

Yes, there’re four. I only copied the second part.

 <ul class="answers-list">
                <li>
                  <label for='Yes'>
                    <input type="radio" id="Yes" />YES
                  </label>
                </li>
                <li>
                  <label for="No">
                    <input type="radio" id="No"/>NO
                  </label>
                </li>
              </ul>
            </fieldset>
          </div>
          <div class="question-block">
            <p>2</p>
            <fieldset class="question" name="html-question-two">
              <legend>
                A label element nesting an input element is required to have a
                for attribute with the same value as the input's id
              </legend 
              <ul class="answers-list">
                <li>
                  <label for="Yes">
                    <input type="radio" id="Yes"/> YES
                  </label>
                </li>
                <li>
                  <label for="No">
                    <input type="radio" id="No"/> NO
                  </label>
                </li>
              </ul>

You should not duplicate id values.

It looks like you made additional changes that are not part of this challenge.

I would reset the code and only add unique pairs of id and for.

Thank you @JeremyLT. I will give another try.

It worked after the reset :+1: @JeremyLT

1 Like