Learn Accessibility by Building a Quiz - Step 30

HTML-CSS
1

I am trying to link my label with my input field, and it is not passing the test

Your code so far

             <ul class="answers-list">
                <li>
                  <label for="question-1-option-1">
                    <input id="question-1-option-1" name="question-1-option-1" type="radio" />
                  </label>
                </li>
                <li>
                  <label for="question-1-option-2">
                    <input id="question-1-option-2" name="question-1-option-2" type="radio" />
                  </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>
                <li>
                  <label for="question-2-option-1">
                    <input id="question-2-option-1" name="question-2-option-1" type="radio" />
                  </label>
                </li>
                <li>
                  <label for="question-2-option-2">
                    <input id="question-2-option-2" name="question-2-option-2" type="radio" />
                  </label>
                </li>
              </ul>

I use Brave Browser Version 1.44.105 Chromium Version 106.0.5249.91

Challenge: Learn Accessibility by Building a Quiz - Step 30

Link to the challenge:

2

you seem to be adding a lot of unrequested code.
For eg. here is one of the labels you are supposed to be modifying:

                <label>
                    <input type="radio" />
                </label>

You just need to add the for attribute to the label tag and the id to the input tag.
Nothing else. Please don’t use complicated ids. It will just make your life harder to make sure everything matches.

3

I appreciate your response and did the said changes you proposed. However, it didn’t work.

              <ul class="answers-list">
                <li>
                  <label for="o11">
                    <input id="o11" type="radio" />
                  </label>
                </li>
                <li>
                  <label for="o12">
                    <input id="o12" type="radio" />
                  </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>
                <li>
                  <label for="o21">
                    <input id="o21" type="radio" />
                  </label>
                </li>
                <li>
                  <label for="o22">
                    <input id="o22" type="radio" />
                  </label>
                </li>
              </ul>
4

When I copy your whole code block into my area I get an error.
But when I copy just the li blocks, I pass the step.
I think your code must have some error somewhere but it is too hard to find it within fCC. My suggestion is to restart the step and redo it carefully.

1 Like
5

Thanks man, appreciate the help, I restarted the step and pasted the li blocks from this code. It worked. I don’t know what the error was but it is sorted now. Really helpful :slight_smile:

1 Like
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.