Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Refactorizar el codigo

dejo mi propuesta

Logo de la fundación
1 respuesta

¡Hola Carlos!

Para refactorizar el código HTML y hacerlo más accesible y semántico, puedes seguir estas recomendaciones:

  1. Utiliza las etiquetas semánticas de HTML para estructurar el contenido. En este caso, puedes usar la etiqueta <nav> para envolver la barra de navegación, y la etiqueta <ul> para la lista de enlaces.

  2. Añade atributos role y aria-label para mejorar la accesibilidad. El atributo role="navigation" indica que es una sección de navegación y el atributo aria-label proporciona una etiqueta descriptiva para el enlace de inicio.

Aquí tienes un ejemplo de cómo podrías refactorizar el código:

<header class="encabezado">
  <a href="/" aria-label="Inicio" role="navigation">
    <img class="encabezado__logo--icono" alt="Logo de la fundación" src="./img/logoproviblanca-1@2x.png" />
  </a>
  <nav class="encabezado__navegacion">
    <ul role="menubar">
      <li><a class="encabezado__navegacion--elemento" href="/blog">Blog</a></li>
      <li><a class="encabezado__navegacion--elemento" href="/paquetes">Paquete de viaje</a></li>
      <li><a class="encabezado__navegacion--elemento" href="/contacto">Contacto</a></li>
    </ul>
  </nav>
</header>

Espero que estas recomendaciones te sean útiles para mejorar la accesibilidad y semántica del sitio web de "Jornada". ¡Buena suerte con la refactorización!

Espero haber ayudado y ¡buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!