Learn Accessibility by Building a Quiz - Step 27

Tell us what’s happening:
Describe your issue in detail here.
The hint says " You should nest one ul element within the first fieldset element." and It looks to me like I’ve done that. The Ul is inside the fieldset. Can you spot any errors I missed?
Thank you.

   **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 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>
       <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></li>
               <li></li>
             </ul>
           </fieldset>
         </div>
         <div class="question-block">
           <p>2</p>
           <fieldset class="question">
<legend/>
             <ul>
               <li></li>
               <li></li>
             </ul>
           </fieldset>
         </div>
       </section>
       <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/103.0.5060.114 Safari/537.36 OPR/89.0.4447.48

Challenge: Learn Accessibility by Building a Quiz - Step 27

Link to the challenge:

I can’t see opening tags for your legend elements

Hey! I think due to the nature of tests used on the freeCodeCamp site to check if your code is correct or not, the ul needs to be directly below the fieldset element.

changing this

to this seemed to work for me.

 <fieldset class="question">    
             <ul>
               <li></li>
               <li></li>
             </ul>
             <legend/>
           </fieldset>

Hope this helps! :smile:

Hey there!
Good hint about indentation.
But as far as I know, many FCC tests can be passed even with pretty weird indented code

not the indentation, the order of the elements. if you add the legend element (even though its not correct as the above comment mentioned) after the ul, the test seems to work.

got it.
However, I just passed the tests witn this orderr:

            <fieldset class="question">
              <legend></legend>
              <ul>
                <li></li>
                <li></li>
              </ul>
            </fieldset>
          </div>
          <div class="question-block">
            <p>2</p>
            <fieldset class="question">
              <legend></legend>
              <ul>
                <li></li>
                <li></li>
              </ul>
            </fieldset>

I guess order doesn’t matter here

It does, because in this example, you add the closing legend tag. The way the HTML parser works is a bit weird because if you use wrong syntax, the parser tries to “guess” what the user might have wanted which can lead to unexpected results.

1 Like

I agree.
If I will be more specific I should say:
for this step,
if I use correct syntax, then:
<ul> and <legend>
elements
can be placed
in any order
inside the fieldset element

So solution I wrote above works as well, as the solution below:

           <fieldset class="question">              
              <ul>
                <li></li>
                <li></li>
              </ul>
              <legend></legend>
            </fieldset>
          </div>
          <div class="question-block">
            <p>2</p>
            <fieldset class="question">              
              <ul>
                <li></li>
                <li></li>
              </ul>
              <legend></legend>
            </fieldset>

That’s what I was trying to say by ‘order doesn’t matter’ statement

Ahh! i understand, if you have face issues like this again, try running your code through a code validator. they help you find bugs like missing opening and closing tags or wrong syntax.

here’s a website that would help you a lot with this stuff.

although a bit of advanced reading, if you are curious about html errors and how they’re handled, here’s something to help you with that!

https://html.spec.whatwg.org/multipage/parsing.html#parse-errors

1 Like

To clarify: I use validator constantly. I didn’t have issues with this challenge step. I just wanted to mention that for this step there are couple of possible solutions.
That link to specifications is very useful, thanks!