Semántica y accesibilidad en HTML

Importancia de etiquetas semánticas

Las etiquetas semánticas ayudan a estructurar mejor el contenido y a que tanto los navegadores como las tecnologías asistivas (lectores de pantalla) comprendan el propósito de cada sección en una página web. Ejemplos de etiquetas semánticas comunes incluyen:

• : Define el encabezado de una página o sección.
• : Define el pie de página.
• : Contiene el contenido principal de la página.
• : Representa un contenido independiente, como un artículo de blog.
• : Agrupa contenido relacionado dentro de una página.
• : Define una sección de navegación.

Buenas prácticas para mejorar la accesibilidad

1. Texto alternativo: Usa el atributo alt en imágenes para describirlas.
2. Etiquetas de formulario: Vincula etiquetas <label> con sus respectivos campos de entrada.
3. Colores y contraste: Asegúrate de que el texto sea legible para personas con daltonismo o baja visión.
4. Teclado accesible: Diseña elementos interactivos accesibles mediante el teclado.
5. Uso de ARIA: Aplica atributos ARIA (aria-label, aria-hidden, etc.) para mejorar la accesibilidad.

Actividades

1. Identifica las etiquetas semánticas en una página web famosa (como Wikipedia).
2. Crea una estructura HTML con las etiquetas <header>, <footer>, <main>, <article> y <section>.
3. Revisa la accesibilidad de una página utilizando herramientas como Lighthouse o Axe.