Actualizar HTML para Mejorar la Accesibilidad del Sitio Web

Yo agregue etiquetas label, de esta manera también seria correcto? y de igual manera agregar los aria-label o ya estarían de mas?

así quedo mi código del Form…

        <label for="nombre">Nombre</label>
        <input
          aria-label="nombre"
          name="nombre"
          type="text"
          placeholder="Ingresa tu nombre"
        />
        <br />
        <label for="correo">Correo</label>
        <input
          aria-label="correo"
          name="correo"
          type="text"
          placeholder="Ingresa tu correo"
        />
        <br />
        <label for="mensaje">Mensaje</label>
        <textarea
          aria-label="mensaje"
          name="mensaje"
          cols="30"
          rows="10"
          placeholder="Ingresa tu mensaje"
        ></textarea>
        <button class="send-button">Enviar</button>
      </form>

Definitivamente es mejor arrancar un proyecto teniendo la accesibilidad en mente, que refactorizarlo para añadirla.
Dará menos dolores de cabeza 😅

Después de refactorizar

¡Así voy por ahora con mi portafolio! Gracias Juliana 💕

Como tengo multilenguaje los Alt y Aria-label los cargué con la traducción también, así, si eligen cambiar el idioma estos cambiarán también.

Adjunto pagina con mejoras:

![](

Ha estado calidad la refactorización del HTML 😃

Me gusto que este video ya que es de las respuestas a los retos de videos previos, esto porque, porque asi podemos verificar si lo hicimos parecido o similar los que lo hicieron o resolver las dudas para los que no, en ambos caso es util, debieran copiar esta idea en otros cursos donde dejan retos pero posteriormente ni se acuerdan de ellos y no sabemos si los hicimos correctamente. es una sugerencia.

El sitio ya se volvió mucho más accesible con todo lo que llevamos

Yo le pusé un aria-label al elemento input del mensaje.

Este es el código de mi formulario. Añadí etiquetas label con su correspondiente for y el aria-label para los inputs

<form class="form-container">
      <label for="nombre">Nombre</label>
      <input type="text" id="nombre" aria-label="nombre" />
      <label for="correo">Correo</label>
      <input type="text" id="correo" aria-label="correo" />
      <label for="mensaje">Mensaje</label>
      <textarea class="message-input" type="text" id="mensaje" aria-label="mensaje"></textarea>
      <button class="send-button" aria-label="enviar formulario">Enviar</button>
    </form>

De 10 😄 !!!

Con este curso uno se da cuenta de lo importante que es el tema de la accesibilidad en la web. Todo debe ser pensado para mejorar la navegación del otro.

Pienso que falta un label para el form de mensaje.

Asi quedo mi portfolio 😄…!!

Bastante genial!, nunca había visto a fondo lo importante que es la accesibilidad para los sitios web.

Después de refactorizar el html:

Se me hace muy impresionante cómo mejora tanto la accesibilidad solamente con HTML semántico

excelente

Ya los había realizado, el footer me quedo así:

<footer class="contact-section">
      <h2 class="header">Contacto</h2>
      <form class="form-container">
        <label for="Nombre">Nombre:</label>
        <input type="text" aria-label="Tu Nombre" id="Nombre" /> <br />
        <label for="Correo">Correo</label>
        <input type="email" aria-label="Tu Correo" id="Correo" /> <br />
        <label for="Mensaje">Mensaje</label>
        <textarea
          id="Mensaje"
          aria-label="Tu Mensaje"
          cols="48"
          rows="10"
        ></textarea>
        <br />
        <button class="send-button">Enviar</button>
      </form>
    </footer>

Poniendo label y el input email para correo y textarea para el mensaje. Además borre ese div y sus estilos se los aplique al textarea

Que genial curso, ahora antes de empezar a desarrollar la pagina, tambien pensare en la accesibilidad que le voy a dar

👌