Learn Accessibility by Building a Quiz - Step 27

The question is nesting

    element within the fieldset element. Done that and the code still isn’t working.

    <!-- 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 href="#student-info">INFO</a></li>
              <li><a href="#html-questions">HTML</a></li>
              <li><a href="#css-questions">CSS</a></li>
            </ul>
          </nav>
        </header>
        <main>
          <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
            <section role="region" aria-labelledby="student-info">
              <h2 id="student-info">Student Info</h2>
              <div class="info">
                <label for="student-name">Name:</label>
                <input type="text" name="student-name" id="student-name" />
              </div>
              <div class="info">
                <label for="student-email">Email:</label>
                <input type="email" name="student-email" id="student-email" />
              </div>
              <div class="info">
                <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
                <input type="date" name="birth-date" id="birth-date" />
              </div>
            </section>
    
    <!-- User Editable Region -->
    
            <section role="region" aria-labelledby="html-questions">
              <h2 id="html-questions">HTML</h2>
              <div class="question-block">
                <p>1</p>
                <fieldset class="question">
                  <legend>
                    <ul></ul>
                    </legend>
                    </fieldset>
              </div>
              <div class="question-block">
                <p>2</p>
                <fieldset class="question">
                </fieldset>
              </div>
            </section>
    
    <!-- User Editable Region -->
    
            <section role="region" aria-labelledby="css-questions">
              <h2 id="css-questions">CSS</h2>
            </section>
          </form>
        </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;
    }
    
    h1,
    h2 {
      font-family: Verdana, Tahoma;
    }
    
    h2 {
      border-bottom: 4px solid #dfdfe2;
    }
    
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    
    

    Your browser information:

    User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36

    Challenge: Learn Accessibility by Building a Quiz - Step 27

    Link to the challenge:

You need to nest two li elements inside your ul element because you need to options for the user to pick.

4 Likes

Done that and it’s still not going

Do that for your second fieldset as well.
Tell me how it does.

2 Likes

Hello!
Great attempt!

It appears the li elements have not been nested within the ul in the first fieldset.

As well, the second fieldset requires the legend, ul and li options.

Keep up your good progress! :slight_smile:

2 Likes
    <section role="region" aria-labelledby="html-questions">
      <h2 id="html-questions">HTML</h2>
      <div class="question-block">
        <p>1</p>
        <fieldset class="question">
        <legend>
            </ul>
              <li>True</li>
              <li>False</li>
            </ul>
          </legend>
        </fieldset>
      </div>
      <div class="question-block">
        <p>2</p>
        <fieldset class="question">
          <legend>
            <ul>
              <li>True</li>
              <li>False</li>
            </ul>
          </legend>
        </fieldset>
      </div>
    </section>
    <section role="region" aria-labelledby="css-questions">
      <h2 id="css-questions">CSS</h2>
    </section>
  </form>
</main>

Here’s my code. Nested the

  • elements within the

As usual @anon42932716 was right on mark. Follow his great advice and you should pass :confetti_ball:!

1 Like

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