Learn Accessibility by Building a Quiz - Step 23

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

It is saying to put the span element after the D.O.B. element, but then it is saying append it within the third element

   **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. </label><span class="sr-only"></span>
           <input type="date" name="birth-date" id="birth-date" />
         </div>
       </section>
       <section role="region" aria-labelledby="html-questions">
         <h2 id="html-questions">HTML</h2>
       </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;
}


   **Your browser information:**

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

Challenge: Learn Accessibility by Building a Quiz - Step 23

Link to the challenge:

2

“Append a span element with a class of sr-only to the current text content of the third label element.”

This telling you to add the span to the end of the text that is in the label. In other words, the span will be inside the label as well.

3

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