Learn Accessibility by Building a Quiz - Step 30

Tell us what’s happening: error is - You should give the second label a for attribute matching the id of its input element.

doesn’t make sense. first, no id’s. I research it and it says make up your own so I did. Verified how to code it on web. STILL error. HELP!

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 30

Link to the challenge:

<ul class="answers-list">
                <li>
                  <label for="username">Enter username
                    <input id="username" type="radio"
                  </label></input>
                </li>
                <li>
                  <label for"username1">Enter username1
                    <input id="username1" type="radio"
                  </label></input>
                </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="username2">Enter username2
                    <input id="username2" type="radio"
                  </label></>
                </li>
                <li>
                  <label for="username3">Enter username3
                    <input id="username3" type="radio"
                  </label></>
                </li>
              </ul>

input is missing a >, and you have an extra </> that you need to remove

did that. error again

<ul class="answers-list">
                <li>
                  <label for="username2">Enter username2>
                    <input id="username2" type="radio">
                  </label</>
                </li>
                <li>
                  <label for="username3">Enter username3>
                    <input id="username3" type="radio">
                  </label</>
                </li>
              </ul>
error message - You should give the second label a for attribute matching the id of its input element.```

you need to write correct html for the tests to pass, this is not correct html

I corrected that. Been working too hard. No idea how I wrote that. Anyways - same error

what’s your code now?

maybe at this point you could try to reset and just add the two required attributes

here is the code. idk if it is exact from when I answered. I have been researching and making edits. It still says - " You should give the first label a for attribute matching the id of its input element." -

I have done that, yes? from what I am reading online I have done that.

<ul class="answers-list">
                <li>
                  <label for="username">Enter username</label>
                    <input id="username" type="radio"
                  
                </li>
                <li>
                  <label for"username1">Enter username1</label>
                    <input id="username1" type="radio"
                  
                </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="username2">Enter username2</label>
                    <input id="username2" type="radio"
                  
                </li>
                <li
                  <label for="username3">Enter username3</label>
                    <input id="username3" type="radio"
                  
                </li>
              </ul>

missing something here

again missing the > in the input elements

username1 is exactly like the others. can you explain better?

it’s not, you are missing the foundamental character used to assign a value to an attribute

ok. I see one error - extra > at <li

yet, still an error. I have changed id’s and names since I last posted. Here is what I have inputted (only pasted the first two sections) and here is the error again - " You should give the first label a for attribute matching the id of its input element."

<ul class="answers-list"
                <li
                  <label for="One">
                    <input id="One" type="radio" name="I am One">I am One
                  </label>
             </li>
             </ul>
             <ul class="answers-list"
                <li
                  <label for="Two">
                    <input id="Two" type="radio" name="I am Two">I am Two
            </label>
                </li>
              </ul>

Missing > on the ul and li.

More missing missing >'s.

You might consider running your HTML through a validator to find all of these little mistakes for you.

But really, none of this should have been changed in the first place because the only thing you were supposed to do was add for attributes to the labels and corresponding ids to the inputs. My suggestion would be that if you start making too many changes and you don’t pass then restart the step to get the original HTML back and try again. This will help you avoid all of these accidental changes.

thanks. I am doing this. omg. I am pathetic. so many errors. sorry for all this hassle. I am honestly trying. Just not grasping this exercise as well as the others.

No, not pathetic, just part of learning. Take my advice, when you can’t seem to get it to work then restart the step to get the original HTML back and start fresh.

thanks :slight_smile: I did restart - twice. I did a validator - here is the link to the results (area that we are working with) https://validator.w3.org/nu/#textarea

you can see in the validator the error that the test is saying is not highlighted. Also, the tagging errors I need an explanation about, if possible.

here is my code `



  • Item One

                </li>
                <li>
                  <label for="radio2">Item Two</label>
                    <input type="radio" id="radio2" name="Item Two">
                  
                </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="radio3">Item Three</label>
                    <input type="radio" id="radio3" name="Item Three">
                  </label>
                </li>
                <li>
                  <label for="radio4">Item Four</label>
                    <input type="radio" id="radio4" name="Item Four">
               
                </li>
              </ul>`
    

    Error STILL says - You should give the first label a for attribute matching the id of its input element. - which doesn’t seem to be showing up in the validator (unless I am missing it).

Your HTML didn’t quite come through all the way.

Also, make sure you run all of the HTML through the validator, not just the part you are working on. But if you reset the step and start fresh then you really shouldn’t need to validate because the default HTML should be good.

sure, will do and post. is there an easier way to copy/paste from the learning dashboard other than right click? odd question yet I would assume there would be a button of sorts to help me out so I don’t mistakenly delete what I have done (happened once)

No, but I’ve been thinking that there should be lately. It would make helping people a lot easier, especially on the projects. I might try to come up with something to present to the team :slight_smile:

1 Like

here is the validator results on the full html (odd there are some notes as those parts passed already) shay’s validator

and here is the code from my dashboard

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
      <h1>HTML/CSS Quiz</h1>
      <nav>
        <ul>
          <li><a href="#student-info">INFO</a></li>
          <li><a href="#html-questions">HTML</a></li>
          <li><a href="#css-questions">CSS</a></li>
			  </ul>
      </nav>
    </header>
    <main>
      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
        <section role="region" aria-labelledby="student-info">
          <h2 id="student-info">Student Info</h2>
          <div class="info">
            <label for="student-name">Name:</label>
            <input type="text" name="student-name" id="student-name" />
          </div>
          <div class="info">
            <label for="student-email">Email:</label>
            <input type="email" name="student-email" id="student-email" />
          </div>
          <div class="info">
            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
            <input type="date" name="birth-date" id="birth-date" />
          </div>
        </section>
        <section role="region" aria-labelledby="html-questions">
          <h2 id="html-questions">HTML</h2>
          <div class="question-block">
            <p>1</p>
            <fieldset class="question" name="html-question-one">
              <legend>
                The legend element represents a caption for the content of its
                parent fieldset element
              </legend>
              <ul class="answers-list">
                <li>
                  <label for="radio1">Item One</label>
                    <input type="radio" id="radio1" name="Item One">
                
                </li>
                <li>
                  <label for="radio2">Item Two</label>
                    <input type="radio" id="radio2" name="Item Two">
                  
                </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="radio3">Item Three</label>
                    <input type="radio" id="radio3" name="Item Three">
                  </label>
                </li>
                <li>
                  <label for="radio4">Item Four</label>
                    <input type="radio" id="radio4" name="Item Four">
               
                </li>
              </ul>
            </fieldset>
          </div>
        </section>
        <section role="region" aria-labelledby="css-questions">
          <h2 id="css-questions">CSS</h2>
        </section>
      </form>
    </main>
  </body>
</html>