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

Challenge: Learn Accessibility by Building a Quiz - Step 16

Link to the challenge:

Hello and welcome to our forum. You must add aria-labelledby attribute to the elements of the first, second, and third sections. You haven’t added any. The values are provided in the lesson instructions. If you want to learn more about the attribute, check the link below.

1 Like

Dude you only need one <section></section> not this one
<section id="aria-labelledby"> as you did…

Second you need to put aria-labelledby to your existing section element

<section aria-labelledby="value"></section> Like this

hope u understand :blush:

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