I’m lost. The error is as follows: “You should nest one label element within the third li element”. The second set of li’s is cut and pasted from the previous one. Why would the message be that the third li is wrong if the 1st and 2nd aren’t? They are duplicates except for the different name.
Your code so far
<!-- file: index.html -->
<!-- User Editable Region -->
<ul class="answers-list">
<li>
<label for="item1">Item 1</label>
<input type="checkbox" id="item1" name="answers-list">
</li>
<li>
<label for="item1">Item 1</label>
<input type="checkbox" id="item2" name="answers-list">
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="question-block">
<li>
<label for="item1">Item 1</label>
<input type="checkbox" id="item1" name="question-block">
</li>
<li>
<label for="item1">Item 1</label>
<input type="checkbox" id="item2" name="question-block">
</li>
</ul>
<!-- User Editable Region -->
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:143.0) Gecko/20100101 Firefox/143.0
Same problem. I’ve tried that before. I’ve since updated this to radio buttons rather than checkboxes, within the same group, because of the request that “we need a set of inputs which do not allow both to be selected at the same time.”
<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>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="item1">Item 1</label>
<input type="radio" id="item1" name="answers-list">
</li>
<li>
<label for="item2">Item 2</label>
<input type="radio" id="item2" name="answers-list">
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="question-block">
<li>
<label for="item3">Item 3</label>
<input type="radio" id="item3" name="question-block">
</li>
<li>
<label for="item4">Item 4</label>
<input type="radio" id="item4" name="question-block">
</li>
</ul>
<ul class="answers-list">
<li>
<label for="item1">Item 1<input type="radio" id="item1" name="answers-list"></label>
</li>
<li>
<label for="item2">Item 2<input type="radio" id="item2" name="answers-list"></label>
</li>
</ul>
</fieldset>
</div>
<div class="answers-list">
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="item3">Item 3<input type="radio" id="item3" name="answers-list"></label>
</li>
<li>
<label for="item4">Item 4<input type="radio" id="item4" name="answers-list"></label>
</li>
</ul>