Learn Accessibility by Building a Quiz - Step 20

HTML-CSS
1

I am experiencing the same issue many others have encountered, which is ’ Sorry, your code does not pass. Hang in there.

You should give the third label element an appropriate forattribute.’

I have researched other coders’ request for guidance and have not been able to resolve. I have retyped the code, copy/pasted…no solution found.
Thoughts?
Thank you

Your code so far

<!-- 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">
          </div>
           <div class="info">
            <label for="name">Name<input id="name"></input></label>
          </div>
          <div class="info">
            <label for="email">Email<input id="email"></input><label>
          </div>
          <div class="info">
            <label for="date-of-birth">Date of Birth<input id="date-of-birth" name="date-of-birth"></input></label>
          </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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Safari/605.1.15

Challenge: Learn Accessibility by Building a Quiz - Step 20

Link to the challenge:

2

You have added things you weren’t asked to. It looks like you added an extra .info div just below the “Student Info” heading and you added closing </input> tags (the input element is self-closing and does not need an actual closing tag). You also moved the inputs inside of the labels.

I would reset the step to get the original HTML back and then only do exactly what the instructions ask for and no more.

“Then, link the input elements to the corresponding label elements.”

I guess I can see how that can be interpreted as moving the input inside the label. But that is not what the tests want in this case. The inputs should remain after the labels. You just want to link them with the for attribute.

3

Hello - thank you for your reply/suggestions. I added the closing and put the input inside the label because I could not get the code to run, so I thought I’d try another way.

I will revisit. Thx again

2 Likes