@MohammedOnGit
Posted
Hola Bryan Chiang!!!
¡Felicidades por completar el desafío! Tu código HTML está bien estructurado; sin embargo, aquí tienes algunas recomendaciones para mejorar la accesibilidad, el SEO y el cumplimiento de WCAG en tu código:
Accesibilidad
Texto alternativo para imágenes:
Proporciona un texto alternativo significativo para las imágenes para mejorar la accesibilidad. Por ejemplo:
<img class="card__image" src="assets/images/illustration-article.svg" alt="Ilustración relacionada con el tema del artículo">
<img class="author__image" src="assets/images/image-avatar.webp" alt="Foto del autor Greg Hooper">
- HTML semántico:
Usa elementos HTML5 semánticos (como <article>, <header>, <footer>, etc.) para mejorar la legibilidad para tecnologías de asistencia y mejorar el SEO. Por ejemplo:
<article class="card">
<header>
<span class="status">Aprendizaje</span>
<time datetime="2023-12-21" class="publish__date">Publicado el 21 de diciembre de 2023</time>
</header>
<!-- Contenido aquí -->
</article>
- Etiquetas accesibles para fechas:
Envuelve las fechas o tiempos en etiquetas <time> para mayor claridad, como ya lo has hecho. Asegúrate de que los atributos datetime sean precisos para los lectores de pantalla.
- SEO
Jerarquía de encabezados:
Considera ajustar los niveles de encabezado para seguir una estructura lógica para SEO. Por ejemplo, si esta tarjeta es un componente independiente en una página, un <h1> podría ser adecuado para el encabezado principal si es el contenido principal. De lo contrario, asegúrate de que siga una jerarquía lógica en la página.
- Meta descripción:
Incluye una etiqueta <meta name="description" content="Breve descripción de la página"> en la sección <head> para mejorar la comprensión de los motores de búsqueda y fomentar los clics.
- Título descriptivo:
Asegúrate de que la etiqueta <title> describa bien el contenido de la página para SEO, por ejemplo, “Tarjeta de vista previa de blog | Fundamentos de HTML y CSS.”
Usa font-display: swap; en tu enlace de Google Fonts para evitar retrasos en la carga de fuentes y asegurar que el texto sea legible mientras se cargan las fuentes.
- Landmarks ARIA:
Agregar landmarks ARIA (como role="main" en el contenedor de contenido principal) puede ayudar a los lectores de pantalla a entender mejor la estructura de la página.
Esta estructura revisada debería mejorar el SEO, la accesibilidad y el cumplimiento de WCAG.
¡Hiciste un gran trabajo, sigue así!
