Learn Accessibility by Building a Quiz - Step 20

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I have been trying this for three hours still couldn’t solve it please help

  **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">
       <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-info'></label>
         <input id='student-info' />
       </div>
       <div class="info">
         <label for="info"></label>
         <input id="info" />
       </div>
       <div class="info">
         <label for="info"></label>
         <input id="info" />
       </div>
     </section>
      <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/105.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 20

Link to the challenge:

2

You’re basically adding the for attribute on the labels and their associated ids on the inputs correctly. But ids need to be unique on the page, you can’t use the id “student-info” for the first input because it is already being used for the h2 element above. So you’ll need to think of a new id to use for that input. Same for the two inputs you gave an id of “info” to. One of those ids need to change.

And the instructions are also asking you to add the associated label text. The label text goes inside the label tags.

So there are three steps you need to do for each label/input:

  • Add the text to the label
  • Add the unique id to the input
  • Add the for attribute to the label
3

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