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">
 <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"><span="sr-only">D.O.B</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>
       </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/103.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 23

Link to the challenge:

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

<example class="sr-only">
2 Likes

it still not going through

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

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?

<span="sr-only">D.O.B</span>

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

Hi @Enumoh24 ,

This was close.

You have changed the original text which was

D.O.B.

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

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

1 Like

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

1 Like