Aprende accesibilidad construyendo un cuestionario - Paso 38

Cuéntanos qué está pasando:
Me pide que enlace label con select, le he dado 20 atributos a select diferentes pero no me acepta.
Tu código hasta el momento(Esto es el ejercicio)


Are you a frontend developer?




ADVERTENCIA

El código semilla del desafío y/o tu solución excedió la longitud máxima que podemos transferir del desafío.

Tendrás que dar un paso adicional aquí para que el código que escribiste se presente en un formato fácil de leer.

Por favor, copia/pega todo el código del editor que se muestra en el desafío desde el que acabas de enlazar.

<!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.<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">
**Información de tu navegador:**

AQUI EL EJERCICIO

  <div class="question-block">
              <label for="block">Are you a frontend developer?</label>
            </div>
            <div class="question" name="question-block">
              <select id="option">
                <option value="">Select an option</option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
              </select>
            </div>

El agente de usuario es: <code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36</code>

**Desafío:**  Aprende accesibilidad construyendo un cuestionario - Paso 38

**Enlaza al desafío:**
https://www.freecodecamp.org/espanol/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-38

¡Hola!

Lo que tienes que hacer esta en las siguientes lineas de codigo:

La etiqueta label debe tener un atributo for, que ya tienes.

La etiqueta select debe contener un atriburo id que cuyo valor debe ser igual al for, en tu caso “block”, o ambos puedes cambiarlos a “option” y ademas la etiqueta select debe contener un atributo name cuyo valor puede ser cualquiera pero te recominedo que tambien sea “block” u “option”, el que hayas elegido.

Por ultimo la etiqueta select contenia un atributo required, ese no se debe de quitar

saludos

1 Like

Muchas gracias!!!

Lo he escrito asi y me sigue diciendo que debo darle un atributo a select id. No entiendo. he probado con block y lo mismo

<div class="question-block">
              <label for="option"> Are you a frontend developer?</label>
              </div>
              <div class="question" name="question-block">
              <select id="option" name="block" required>
                <option value="">Select an option</option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
              </select>
              
            </div>```

¡Hola!

Si escribo el codigo que tu tienes en las lineas que te mencione a mi me funciona y me permite pasar el desafio.

Supongo que ahora el error debe esta en otra parte, posiblemente en el “div” que envuelve al select, en mi pantalla ese “div” venia por default asi:
<div class="answer">

en tu caso veo que dice:
<div class="question" name="question-block">

no se si lo modificaste por accidente, pero puedes intentarlo a ver si eso soluciona el problema.

saludos

Gracias, me has salvado la vida. Llevaba 3 días con el mismo problema. Mil gracias