Learn Accessibility by Building a Quiz - Step 39

mir · July 28, 2022, 10:24pm

Tell us what’s happening:

I´m getting this error again n again : You should give the label element a for attribute.

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

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 39

Link to the challenge:

bbsmooth · July 28, 2022, 11:06pm

We will need to see your HTML in order to help you. To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

mir · July 29, 2022, 2:57am

<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.<span class="sr-only">(Date of Birth)</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>
          <div class="question-block">
            <p>1</p>
            <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="q1-a1">
                    <input type="radio" id="q1-a1" name="q1" value="true" />
                    True
                  </label>
                </li>
                <li>
                  <label for="q1-a2">
                    <input type="radio" id="q1-a2" name="q1" value="false" />
                    False
                  </label>
                </li>
              </ul>
            </fieldset>
          </div>
          <div class="question-block">
            <p>2</p>
            <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="q2-a1">
                    <input type="radio" id="q2-a1" name="q2" value="true" />
                    True
                  </label>
                </li>
                <li>
                  <label for="q2-a2">
                    <input type="radio" id="q2-a2" name="q2" value="false" />
                    False
                  </label>
                </li>
              </ul>
            </fieldset>
          </div>
        </section>
        <section role="region" aria-labelledby="css-questions">
          <h2 id="css-questions">CSS</h2>
          <div class="formrow">
            <div class="question-block">
              <label for="customer">Are you a frontend developer?</label>
            </div>
            <div class="answer">
              <select name="customer" id="customer" required>
                <option value="">Select an option</option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
              </select>
            </div>
            <div class="question-block">
              <label>Do you have any questions:</label>
            </div>
            <div class="answer">
            <label for="text-area">  
            <textarea rows="5" cols="24" placeholder="Who is flexbox...">
              </textarea>
              </label>

            </div>
          </div>
        </section>
      </form>
    </main>
  </body>
</html> ```

bbsmooth · July 29, 2022, 3:14am

You added a new label. You want to use the one that is already there above the textarea. You are correct, you use the for attribute to link the label to the textarea. But you can’t just make up the value of the for attribute. Look at some of the other labels in your HTML. For example, the label with the text “Are you a frontend developer?” that is linked to the select. Why did you use “customer” as the value of the for attribute?

mir · July 29, 2022, 5:09am

I have no idea about customer value, I just reset the lesson and this come along selfly

mir · July 29, 2022, 5:10am

I´m still getting the same issue You should give the label element a for attribute.

bbsmooth · July 29, 2022, 5:16am

But you added every bit of HTML in this form so far yourself. Do you not remember why the for attribute on that label is set to “customer”. You’ve even done a whole course on creating a registration form (at least I’m assuming you did these in order). I’m sure the registration form course covered labels and for attributes as well.

I’m not trying to be mean here, but I think at this point you should be far enough along to be able to solve this, or at least use the googles to help you find the answer. Did you at least get rid of the extra label you added?

And did you add a for attribute to the original label? That’s what the hint is telling you to do.

Have you made any changes to the HTML since my last post? If so, please show us so we can see what you did. To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

mir · July 29, 2022, 5:25am

Sir I actually added the “question” label but when i reset the page, it converts in customer i´dont know why and i came to know when you highlighted that.

mir · July 29, 2022, 5:29am

Yes I have Here are these:

<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.<span class="sr-only">(Date of Birth)</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>
          <div class="question-block">
            <p>1</p>
            <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="q1-a1">
                    <input type="radio" id="q1-a1" name="q1" value="true" />
                    True
                  </label>
                </li>
                <li>
                  <label for="q1-a2">
                    <input type="radio" id="q1-a2" name="q1" value="false" />
                    False
                  </label>
                </li>
              </ul>
            </fieldset>
          </div>
          <div class="question-block">
            <p>2</p>
            <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="q2-a1">
                    <input type="radio" id="q2-a1" name="q2" value="true" />
                    True
                  </label>
                </li>
                <li>
                  <label for="q2-a2">
                    <input type="radio" id="q2-a2" name="q2" value="false" />
                    False
                  </label>
                </li>
              </ul>
            </fieldset>
          </div>
        </section>
        <section role="region" aria-labelledby="css-questions">
          <h2 id="css-questions">CSS</h2>
          <div class="formrow">
            <div class="question-block">
              <label for="question">Are you a frontend developer?</label>
            </div>
            <div class="answer">
              <select name="option" id="option" required>
                <option value="">Select an option</option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
              </select>
            </div>
            <div class="question-block">
              <label>Do you have any questions:</label>
            </div>
           <div class="answer">
          <label for="text-area">    
       <textarea for="text-area" rows="5" cols="24" placeholder="Who is flexbox...">
         </textarea> 
             </label>
            </div>
          </div>
        </section>
      </form>
    </main>
  </body>
</html> ```

bbsmooth · July 29, 2022, 5:31am

mir:

<div class="question-block">
              <label>Do you have any questions:</label>
            </div>
           <div class="answer">
          <label for="text-area">    
       <textarea for="text-area" rows="5" cols="24" placeholder="Who is flexbox...">
         </textarea> 
             </label>
            </div>

You still have the same issue I pointed out in the beginning. You added a new label above the textarea. You don’t want to do that. You want to use the existing label that is already there, the one with the text that reads “Do you have any questions:” That is the label for the textarea. Your job is to link it to the textarea with a for attribute and to give it a name attribute.

mir · July 29, 2022, 5:37am

Thanks alot!
I got really stucked there!

srazuk · October 21, 2022, 4:26am

I guess that’s he’ telling to give a for atribute to the label that’s already above . And then the hints will get you throught it.

system · April 21, 2023, 4:27pm

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