Learn Accessibility by Building a Quiz - Step 16

I have given the first h2 element an id attribute of student-info. What am I still doing wrong that is hindering my code from passing?`

 <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
        <section role="region" aria-labelledby="student-info">
          <h2 id="Student info"></h2>
        </section>
        <section role="region" aria-labelledby="html-questions">
          <h2 id="html-questions"></h2>
          </section>
        <section role="region" aria-labelledby="css-questions">
          <h2 id="css-questions"></h2>
        </section>
      </form>
<!-- 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>INFO</a></li>
          <li><a>HTML</a></li>
          <li><a>CSS</a></li>
        </ul>
      </nav>
    </header>
    <main>

<!-- User Editable Region -->

      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
        <section role="region" aria-labelledby="student-info">
          <h2 id="Student info"></h2>
        </section>
        <section role="region" aria-labelledby="html-questions">
          <h2 id="html-questions"></h2>
          </section>
        <section role="region" aria-labelledby="css-questions">
          <h2 id="css-questions"></h2>
        </section>
      </form>

<!-- User Editable Region -->

    </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;
}

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 16

Link to the challenge:

The instruction: " Give each h2 suitable text content."

Add the same text as the corresponding id in the h2 element has, between h2 tags.

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