Learn Accessibility by Building a Quiz - Step 16

Tell us what’s happening:
Describe your issue in detail here.

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>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></h2></section>
        <section role="region" aria-labelledby="html-questions"></section>
        <section role="region" aria-labelledby="css-questions"></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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 16

Link to the challenge:

I’m sooo confused rn

Can you elaborate a little more on what you are confused about?

Hello @davidpeter3704!

The above may be the issue you are having in you code. If you look at the end of it, you have two h2 tags. One is a second opening tag, and the next is the h2 closing tag.

I

I am not sure if h2 tags are part of the beginning step .

Reset the step, and only change what the step asks us to do.  
This should help you move on without any more confusion.

Keep up the good progress @davidpeter3704 !

1 Like

The H2 is part of the step. It says to nest an H2 element within the section element. I did that before the role element it said wrong, I did it after, wrong, I made it so the role is nested within the H2 element, says wrong too

1 Like

Take this one step at a time.

First add the aria-labelledby attributes with the appropriate values. You did this correctly.

Then nest an h2 inside of each section with an id attribute that matches the aria-labelledby value. You haven’t done this yet. I only see an h2 element in the first section, so you need to add one to the other two sections, and then you need to add the id attribute to all three of them. Also, in the first section, you accidentally removed the closing > on the opening <section> tag.

Then after you do the above, add some appropriate text inside each h2 element.

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