Learn Accessibility by Building a Quiz - Step 23

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

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

   **Your browser information:**

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

Challenge: Learn Accessibility by Building a Quiz - Step 23

Link to the challenge:

1 Like

Thanks for your response!

but my problem is the number 23 of the project that says I should add span element to the third label on my code with a class, which I did it right and it didn’t go through

label for=“birth-date”><span=“sr-only”>D.O.B

Step 23

Arguably, D.O.B. is not descriptive enough. This is especially true for visually impaired users. One way to get around such an issue, without having to add visible text to the label, is to add text only a screen reader can read.

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

there is syntax error, you forgot to append a class to it.


<example class="sr-only">

it still not going through

<label for="birth-date" >D.O.B: <span class="sr-only"></span></label>
1 Like

you forgot to append span to the current text D.O.B:

did this hint You should place the span after the text content D.O.B. , mislead you?

Edit: your first code only needed class in it, I am wondering what pushed you into changing it?


I have don it that way, yet it wouldn’t through

Hi @Enumoh24 ,

This was close.

You have changed the original text which was


So, please replace the : with a . and remove the space after it.

Thank you so much, that was the issue.
I appreciated :+1: :+1:


@Enumoh24 I am sorry, about my earlier comment, they would have misled you.

1 Like

Thank you this helped, I was having a similar issue.

I think the wording is WITHIN, thats the key. It just has to be inside the LABEL element.

HI, I’ve just figure it all. Did you got it already or are you having trouble yet?

Oh, sorry. I’m glad that you’ve make it!