Learn Accessibility by Building a Quiz - Step 30

My code is not passing, its regarding linking together the label and input with (for) and (id) attributes. Any advice on my errors to fix this would be appreciated. thanks.

Test

Sorry, your code does not pass. Hang in there.

Hint

You should give the third label a for attribute matching the id of its input element.

Your code so far

<!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="html-question-1">
                    <input id="html-question-1" type="radio" />
                  </label>
                </li>
                <li>
                  <label for="html-question-1">
                    <input id="html-question-1" 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 class="answers-list">
                <li>
                  <label for="html-question-2">
                    <input id="html-question-2" type="radio" />
                  </label>
                </li>
                <li>
                  <label for="html-question-2">
                    <input id="html-question-2" type="radio" />
                  </label>
                </li>
              </ul>
            </fieldset>
          </div>
        </section>
        <section role="region" aria-labelledby="css-questions">
          <h2 id="css-questions">CSS</h2>
        </section>
      </form>
    </main>
  </body>
</html>```
**Your browser information:**

User Agent is: <code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Safari/605.1.15</code>

**Challenge:**  Learn Accessibility by Building a Quiz - Step 30

**Link to the challenge:**
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-30

Your code is working fine for me. Loaded the page, pasted your code inside the <ul class="answers-list"> element, and it passed. Maybe you changed something outside by accident.

Try restarting the step, or maybe try a different browser if that doesn’t work.

Thanks for the reply, I’ve tried restarting the step and in a different browser, It’s really got me thinking, but I can’t figure it out.
Is it possible that there is something I did wrong in the previous steps slipped by and is now causing the issue?

No, when you start a new step the code is cleaned, same when you restart step.

@hbar1st would you mind taking a look at this please?

If you are still stuck can you post all your code please? (from the top to the bottom skipping nothing)

Yes I’m still stuck getting a error when trying to link the Label and Input together within the ul element
, as I can’t post more links being a new user I’ve posted the entire code above,

okay, so I have a theory but not sure if it will work so please bear with me.
Can you change all the input ids you added so they are unique? (you are using duplicate ids at the moment)

Edit: also try to run in incognito or private mode in your browser

Success, giving the input unique id’s worked, I’ll keep this in my mind for future work.

Thanks for all help from everyone , appreciated .

2 Likes

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