Learn Accessibility by Building a Quiz - Step 16

HTML-CSS
1

Tell us what’s happening:

I completed what it instruct us but it couldn’t pass the test.

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" alt="freeCodeCamp" 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(10rem, 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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Challenge Information:

Learn Accessibility by Building a Quiz - Step 16

2

hello and welcome to fcc form :slight_smile:

  • you need to add “heading text” for these three sections

happy coding :slight_smile:

1 Like
3

Hello there @bikashkumar123454 welcome to fcc forum.

  <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>

Well you didn’t. You need to add suitable text inside every h2 of your section. Which you have missed, add similar or suitable text inside your h2 and you should pass the test. Thanks.

1 Like