¿Cuál es la diferencia entre semántica y…

La semántica ayuda a las máquinas (navegadores, analizadores, robots de búsqueda) a entender la estructura y el significado del contenido. La accesibilidad (a11y) está dirigida a que el contenido sea comprensible y útil para personas con diferentes limitaciones físicas o cognitivas que utilizan tecnologías de asistencia.

Etiquetas semánticas

El uso de etiquetas HTML semánticas, como <article>, <nav>, <aside>, <footer>, <h1>-<h6>, otorga significado a los elementos de la página. Por ejemplo:

<article>
  <h2>Título del artículo</h2>
  <p>Texto del artículo...</p>
</article>

Esto ayuda a los navegadores a interpretar correctamente la estructura del documento.

Accesibilidad (a11y)

La accesibilidad abarca muchos aspectos:

Semántica: El uso correcto de etiquetas semánticas ya forma parte de la accesibilidad, ya que ayuda a las tecnologías de asistencia (lectores de pantalla) a entender la estructura y la función de los elementos.
Atributos ARIA: Atributos adicionales, como aria-label, aria-describedby, aria-hidden, role, proporcionan información adicional para las tecnologías de asistencia cuando la semántica HTML no es suficiente.
```
<button aria-label="Cerrar ventana de diálogo">
  <img src="close.svg" alt="">
</button>
```
Contraste: Contraste suficiente entre el texto y el fondo para personas con discapacidad visual.
Navegación por teclado: Capacidad de navegar por la página e interactuar con los elementos usando solo el teclado.
Texto alternativo para imágenes (alt): Descripción del contenido de la imagen para usuarios que no la ven.
```
<img src="cat.jpg" alt="Gata negra durmiendo en el alféizar de la ventana.">
```
Estructura de encabezados: Jerarquía lógica de encabezados (<h1> - <h6>) para facilitar la navegación mediante lectores de pantalla.

Relación

La semántica es una base importante para la accesibilidad. Una página bien estructurada con elementos semánticos es mucho más fácil de hacer accesible. Sin embargo, la semántica por sí sola no es suficiente para una accesibilidad completa; a menudo se requieren medidas adicionales, como atributos ARIA, gestión del foco y garantizar un contraste adecuado.

Aspecto	Semántica	Accesibilidad (a11y)
Objetivo	Dar significado a los elementos	Garantizar la comprensión y el uso del contenido por todos
Herramientas	Etiquetas HTML (`<nav>`, `<article>`, `<h1>`...)	Semántica, ARIA, contraste, foco, texto `alt`, etc.
Usuario	Navegadores, analizadores, motores de búsqueda	Personas con diferentes necesidades, tecnologías de asistencia

¿Cuál es la diferencia entre semántica y accesibilidad (a11y)?