Learn Accessibility by Building a Quiz - Step 16

HTML-CSS
1

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:

2

I’m sooo confused rn

3

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

4

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
5

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
6

Thank you!

You need to nest h2 in each of the three section elements.
and give each one an id the same as the aria-labelledby= value.

And text between some text.

Example

<section role="region"  aria-labelledby="class-info" id="class-info"><p>Class Info</p>
</section>
7

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.