Learn Accessibility by Building a Quiz - Step 16

my code is not running may someone herlp me fugure it out here is an example of the code

Student-Info

    <section role="region" aria-labelledby="html-questions">
      <h2 id="html-questions">HTML-Questions</h2>
    </section>
    
    <section role="region" aria-labelledby="css-questions">
      <h2 id="css-questions">CSS-Questions</h2>
    </section>

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

        </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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 16

Link to the challenge:

Hey,Kindly post your full code

Step 16

Every region role requires a label, which helps screen reader users understand the purpose of the region. One method for adding a label is to add a heading element inside the region and then reference it with the aria-labelledby attribute.

Add the following aria-labelledby attributes to the section elements:

  • student-info
  • html-questions
  • css-questions

Then, within each section element, nest one h2 element with an id matching the corresponding aria-labelledby attribute. Give each h2 suitable text content.

and here is my answer :slight_smile:

Student-info

    <section role="region" aria-labelledby="html-questions">
      <h2 id="html-questions">HTML-Questions</h2>
    </section>
    
    <section role="region" aria-labelledby="css-questions">
      <h2 id="css-questions">CSS-Questions</h2>
    </section>
  </form>

Use these </> characters on your editor to paste your code their.

Well thanks man it worked thanks

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