Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

Reto

Referente al curso IA generativa en Front-End: trabajando con semántica y HTML, en el capítulo Técnicas de revisión de código y actividad Desafío: principios de la semántica HTML - Navegación

por andres felipe barragan nino 88
| 6.9k xp | 7 posts
Estudiante

Código antes de refactorización: 

<a>
  <img class="encabezado__logo--icono" alt="" src="./img/logoproviblanca-1@2x.png" />
</a>
<div class="encabezado__navegacion">
  <a class="encabezado__navegacion--elemento" href="">Blog</a>
  <a class="encabezado__navegacion--elemento" href="">Paquete de viaje</a>
  <a class="encabezado__navegacion--elemento" href="">Contacto</a>
</div>

Código después de aplicar la refactorización: 

<div class="encabezado__container">
        <header class="encabezado">
            <a href="" class="encabezado__logo" aria-label="Ir a la página principal">
                <img class="encabezado__logo--icono" alt="Logo Jornada" src="./img/logoprovisriablanca-1@2x.png" />
            </a>
            <nav class="encabezado__navegacion">
                <ul>
                    <li><a class="encabezado__navegacion--elemento" href="" aria-label="Ir a el blog">Blog</a></li>
                    <li><a class="encabezado__navegacion--elemento" href="" aria-label="Ir a paquetes de viaje">Paquetes de viaje</a></li>
                    <li><a class="encabezado__navegacion--elemento" href="" aria-label="Ir a contacto">Contacto</a></li>
                </ul>
            </nav>
        </header>
    </div>
2 respuestas
por andres felipe barragan nino 88
| 6.9k xp | 7 posts
Estudiante

Hola soy estudiante de Alura

por Brenda Souza
| 6084.4k xp | 22259 posts
Instructor

Hola Andres, espero que estés bien

Veo que has hecho un gran trabajo refactorizando el código para mejorar la semántica y accesibilidad del HTML. Aquí te dejo algunos puntos clave sobre los cambios que has realizado:

  1. Uso de etiquetas semánticas: Has envuelto el contenido en un <header> que es una práctica recomendada para definir la cabecera de una página o sección.

  2. Navegación clara: Has utilizado la etiqueta <nav> para la barra de navegación, lo cual es ideal ya que indica claramente a los lectores de pantalla que este es un menú de navegación.

  3. Listas para elementos de navegación: Al usar una lista <ul> para los enlaces de navegación, has mejorado la estructura del HTML, lo que es una práctica común para menús de navegación.

  4. Atributos aria-label: Has añadido aria-label a los enlaces, lo cual es excelente para mejorar la accesibilidad, ya que proporciona descripciones más claras para los usuarios que utilizan tecnologías asistivas.

  5. Texto alternativo en imágenes: Has añadido un texto alternativo significativo al <img>, lo cual es crucial para la accesibilidad.

Estos cambios no solo mejoran la accesibilidad del sitio, sino que también hacen que el código sea más legible y fácil de mantener. ¡Buen trabajo!

Espero haber ayudado y buenos estudios!