Learn Accessibility by Building a Quiz - Step 20

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I’ve been stuck on this issue longer I would’ve liked and I’m not sure what the issue is. I’ve changed up the code for the third “label for” tag into the following variations it still gives me the same error

You should give the third label element an appropriate for attribute.

The variations I’ve tried:
D.O.B Date of Birth)

    <label for="date-of-birth">Date of birth</label>

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>

        <section role="region" aria-labelledby="student-info">
          <h2 id="student-info">Student Info</h2>
          <div class="info">
            <labe for="name">Name:</label><input type="text" name="student-name" id="student-name"></input>
          </div>
          <div class="info">
            <label for="email">Email</label><input type="text" name="student-email" id="student-email">
            </input>
          </div>
          <div class="info">
 <label for="birtday">Date of  birtday:</label>
            <input type="date" name="birtday" id="birtday">
            </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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 20

Link to the challenge:

2

Hello and welcome to the community :smiley:!
In order to link your label elements to there input fields that when the user clicks on a question they get directed to the corresponding input field you need to give your label a for attribute MATCHING to your inputs id.

Right now your for attributes don’t match there corresponding inputs id. Change that in order to pass this step. Hope this helps. Also change your ‘labe’ as seen above to the text ‘label’.

1 Like
3

Hello,

First here:

you forgot the last l for label opening tag.

Next, you gotta give your label element a for attribute with a specific and meaningful value of your choice. AND the value you gave must be exactly the same for the id attribute of the input.

This is how it is supposed to be:
<input id="id1">
<label for="id1">Label 1</label>
The value of the for atttibute matchs the value of the input’s id.

Happy coding !

4

Thank you for your response however, I am still getting the same message

5

What’s your code now ? The html.

6

this my new code

<section role="region" aria-labelledby="student-info">
      <h2 id="student-info">Student Info</h2>

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

D.O.B.:


7

I just figured it out, it was never the third element that was the issue, but they kept telling me that was where the problem lied. Thank you for your help though !

1 Like
8

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