Learn Accessibility by Building a Quiz - Step 20

" You should not use the same id attribute for more than one input element."
This is the hint I am give when I use the same id attribute for the third input element. When I use a different id attribute for the same third input, I am told to use the same id attribute I used in the third label element.
This is super confusing…please help.

 <div class="info">
            <label for="text">Name:</label>
            <input id="text" />
          </div>
          <div class="info">
            <label for="text">Age:</label>
            <input id="text" />
          </div>
          <div class="info">
            <label for="text">Email:</label>
            <input id="text" />
          </div>
<!-- file: index.html -->
<!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">

<!-- User Editable Region -->

        <section role="region" aria-labelledby="student-info">
          <h2 id="student-info">Student Info</h2>
          <div class="info">
            <label for="text">Name:</label>
            <input id="text" />
          </div>
          <div class="info">
            <label for="text">Age:</label>
            <input id="text" />
          </div>
          <div class="info">
            <label for="text">Email:</label>
            <input id="text" />
          </div>
        </section>

<!-- User Editable Region -->

        <section role="region" aria-labelledby="html-questions">
          <h2 id="html-questions">HTML</h2>
        </section>
        <section role="region" aria-labelledby="css-questions">
          <h2 id="css-questions">CSS</h2>
        </section>
      </form>
    </main>
  </body>
</html>

/* file: styles.css */
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}

header {
  width: 100%;
  height: 50px;
  background-color: #1b1b32;
  display: flex;
}

#logo {
  width: max(100px, 18vw);
  background-color: #0a0a23;
  aspect-ratio: 35 / 4;
  padding: 0.4rem;
}

h1 {
  color: #f1be32;
  font-size: min(5vw, 1.2em);
}

nav {
  width: 50%;
  max-width: 300px;
  height: 50px;
}

nav > ul {
  display: flex;
  justify-content: space-evenly;
}

h1,
h2 {
  font-family: Verdana, Tahoma;
}

h2 {
  border-bottom: 4px solid #dfdfe2;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/110.0

Challenge: Learn Accessibility by Building a Quiz - Step 20

Link to the challenge:

No two elements can have the same id. So you need to pick different values for each id you add. You can use text as the value for the first input, but you can’t also use it for the value for the next two inputs. You’ll need to choose different values for the id for those last two inputs.

Thanks a lot. Got it

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