I’m on Step 28 of “Build a Quiz” (Responsive Web Design Certification). I keep getting the hint “You should not use the same text content for both legend elements,” but all three of my <legend> elements have completely different text. I’ve already tried:
Hard refreshing the page (Ctrl+Shift+R)
Using the “Reset” button and re-pasting my code
Testing in an incognito window
Logging out and back in
Rewriting the legend text completely from scratch with entirely different wording
<!-- 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 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">Date of Birth:</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">
<h3><span class="sr-only">Question</span>1</h3>
<!-- User Editable Region -->
<fieldset class="question">
<legend></legend>
<ul>
<li></li>
<li></li>
</ul>
</fieldset>
</div>
<div class="question-block">
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question">
<legend></legend>
<ul>
<li></li>
<li></li>
</ul>
</fieldset>
<!-- User Editable Region -->
</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(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;
}
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;
}
User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 26_1_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) GSA/432.9.954074404 Mobile/15E148 Safari/604.1
Build a Quiz Webpage - Step 28
GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/workshop-accessibility-quiz/6144e818fd5ea704fe56081d.md at main · freeCodeCamp/freeCodeCamp · GitHub
dhess
August 16, 2026, 6:25pm
2
Welcome to the forum @MmathapeloNare ,
Can you please point out where you have added text to the legend element?
It doesn’t look like you’ve implemented any of the instructions for this step.
Happy coding
<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" />
<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 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"
required
/>
</div>
<div class="info">
<label for="student-email">Email:</label>
<input
type="email"
name="student-email"
id="student-email"
required
/>
</div>
<div class="info">
<label for="birth-date">Date of Birth:</label>
<input
type="date"
name="birth-date"
id="birth-date"
required
/>
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML Questions</h2>
<div class="question-block">
<h3>
<span class="sr-only">Question</span>1
</h3>
<fieldset class="question" name="html-question-one">
<legend>HTML elements are enclosed in angle brackets.</legend>
<ul class="answers-list">
<li>
<label>
<input type="radio" name="html-question-1" value="true" /> True
</label>
</li>
<li>
<label>
<input type="radio" name="html-question-1" value="false" /> False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<h3>
<span class="sr-only">Question</span>2
</h3>
<fieldset class="question" name="html-question-2">
<legend>Every HTML document must include a doctype declaration.</legend>
<ul class="answers-list">
<li>
<label>
<input type="radio" name="html-question-2" value="true" /> True
</label>
</li>
<li>
<label>
<input type="radio" name="html-question-2" value="false" /> False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS Questions</h2>
<div class="question-block">
<h3>
<span class="sr-only">Question</span>3
</h3>
<fieldset class="question" name="css-question-1">
<legend>CSS selectors are used to target HTML elements for styling.</legend>
<ul class="answers-list">
<li>
<label>
<input type="radio" name="css-question-1" value="true" /> True
</label>
</li>
<li>
<label>
<input type="radio" name="css-question-1" value="false" /> False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
</form>
</main>
ILM
August 17, 2026, 9:16am
4
There are two ways you can format your code to make it easier to read and test:
After you copy/paste your code into the editor, select it by dragging your cursor over it then click the (</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)
Manually add three backticks on a new line above your code and on a new line after your code. Note that a backtick is NOT the same as a single quote('). To find the backtick key on your keyboard, see this post .
To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:
Sorry, I did not copy my full updated code. This is what I have been trying to pass through to get to the next step; I am genuinely stuck and do not know how to move forward
ILM
August 17, 2026, 9:18am
6
please format your code so it is readable
but it seems you have too many legend elements, why did you add more?
<!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 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"
required
/>
</div>
<div class="info">
<label for="student-email">Email:</label>
<input
type="email"
name="student-email"
id="student-email"
required
/>
</div>
<div class="info">
<label for="birth-date">Date of Birth:</label>
<input
type="date"
name="birth-date"
id="birth-date"
required
/>
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML Questions</h2>
<div class="question-block">
<h3>
<span class="sr-only">Question</span>1
</h3>
<fieldset class="question" name="html-question-one">
<legend>HTML elements are enclosed in angle brackets.</legend>
<ul class="answers-list">
<li>
<label>
<input type="radio" name="html-question-1" value="true" /> True
</label>
</li>
<li>
<label>
<input type="radio" name="html-question-1" value="false" /> False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<h3>
<span class="sr-only">Question</span>2
</h3>
<fieldset class="question" name="html-question-2">
<legend>Every HTML document must include a doctype declaration.</legend>
<ul class="answers-list">
<li>
<label>
<input type="radio" name="html-question-2" value="true" /> True
</label>
</li>
<li>
<label>
<input type="radio" name="html-question-2" value="false" /> False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
ILM
August 17, 2026, 9:28am
9
is that all your code? why does it end with </section>? can you please post all the code you have in the editor?
<!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 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"
required
/>
</div>
<div class="info">
<label for="student-email">Email:</label>
<input
type="email"
name="student-email"
id="student-email"
required
/>
</div>
<div class="info">
<label for="birth-date">Date of Birth:</label>
<input
type="date"
name="birth-date"
id="birth-date"
required
/>
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML Questions</h2>
<div class="question-block">
<h3>
<span class="sr-only">Question</span>1
</h3>
<fieldset class="question" name="html-question-one">
<legend>HTML elements are enclosed in angle brackets.</legend>
<ul class="answers-list">
<li>
<label>
<input type="radio" name="html-question-1" value="true" /> True
</label>
</li>
<li>
<label>
<input type="radio" name="html-question-1" value="false" /> False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<h3>
<span class="sr-only">Question</span>2
</h3>
<fieldset class="question" name="html-question-2">
<legend>Every HTML document must include a doctype declaration.</legend>
<ul class="answers-list">
<li>
<label>
<input type="radio" name="html-question-2" value="true" /> True
</label>
</li>
<li>
<label>
<input type="radio" name="html-question-2" value="false" /> False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS Questions</h2>
<div class="question-block">
<h3>
<span class="sr-only">Question</span>3
</h3>
<fieldset class="question" name="css-question-1">
<legend>CSS selectors are used to target HTML elements for styling.</legend>
<ul class="answers-list">
<li>
<label>
<input type="radio" name="css-question-1" value="true" /> True
</label>
</li>
<li>
<label>
<input type="radio" name="css-question-1" value="false" /> False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
</form>
</main>
</body>
</html>
ILM
August 17, 2026, 12:05pm
11
you added an extra legend, reset the step, do only as asked
