Learn Accessibility by Building a Quiz - Step 20

HTML-CSS
1

Tell us what’s happening:
I am trying to add the label element, I thought it was implied that it was input but I also tried name, email, and date of birth that was mentioned in the instructions
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">
            <label for="input"></label>
            <input />
          </div>
          <div class="info">
            <label for="input"></label>
            <input />
          </div>
          <div class="info">
            <label for="input"></label>
            <input />
          </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/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 20

Link to the challenge:

2

“This is done by giving the label a for attribute, which contains the id of the input.”

This implies that you must give each input an id first, and then link the label to the input by setting the for attribute on the label to the id of the input.

3

hmmm for the first part that would be <label for"input"> then for the second part I would create a new section like this

4

The first part is:

  • give each input a unique id

The second part is:

  • add a for attribute to each label and set its value to the id of its label
5

That helped me thank you, just passed it :slight_smile:

6

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