Learn Accessibility by Building a Quiz - Step 27

Tell us what’s happening:
Describe your issue in detail here.
I’M stuck on this step and I have tried many approach.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

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

    <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
    <h1>HTML/CSS Quiz</h1>
        <li><a href="#student-info">INFO</a></li>
        <li><a href="#html-questions">HTML</a></li>
        <li><a href="#css-questions">CSS</a></li>
    <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 class="info">
          <label for="student-email">Email:</label>
          <input type="email" name="student-email" id="student-email" />
        <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" />

<!-- User Editable Region -->

      <section role="region" aria-labelledby="html-questions">
        <h2 id="html-questions">HTML</h2>
        <div class="question-block">
             <fieldset class="question"<legend>>
        <div class="question-block">
          <fieldset class="question"                        <legend>>                   <ul></ul>


<!-- User Editable Region -->

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

/* 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;

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 (Linux; Android 10; TECNO BC2c) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Mobile Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 27

Link to the challenge:

There are several issues with this. I recommend resetting the lesson as your code is very weirdly spaced, you are missing some closing stuff

After resetting the directions say. The changes you make should be
“Within each fieldset

You did not include code in all fieldsets

  1. It says to add a legend element. You are adding it as a attribute. You can look here to learn more about the legend element
    HTML legend tag

  2. You did not include options in the ul as the directions say. You can learn how ul should be used here

I think you should do some reading ip on how to use these elements and then try again.

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