01 · Concepto
El esqueleto invisible de una interfaz
La semántica es el significado que el código aporta a cada parte del contenido: qué es un título, una lista, una tabla, un grupo de opciones o una instrucción.
Una persona puede percibir visualmente que un texto grande inicia una sección o que varias filas forman una tabla. Una tecnología de asistencia necesita que esas relaciones estén expresadas mediante HTML.
Principio esencial
El código debe comunicar la misma jerarquía y las mismas relaciones que presenta el diseño visual.
Presentación visual
Tipografía, espacio, alineación y color ayudan a reconocer grupos y niveles.
Estructura programática
Elementos y relaciones permiten que esa organización sea anunciada, recorrida y reutilizada.
02 · Piezas del esqueleto
Cuatro relaciones que el código debe expresar
Estas piezas proceden de la checklist de la presentación y convierten la forma visual en información disponible para todas las personas.
Encabezados
Crean un esquema lógico. El nivel indica la relación entre una sección y sus subsecciones, no el tamaño que tendrá el texto.
Listas
Agrupan elementos relacionados e informan cuántos contiene el conjunto. No deben simularse con guiones o saltos de línea.
Tablas
Relacionan encabezados de fila o columna con datos. Se reservan para información tabular, no para acomodar el diseño.
Grupos
fieldset y legend comunican la pregunta común de controles como radios o casillas.
03 · Personas y contextos
¿A quién beneficia?
Una estructura explícita permite comprender y recorrer el contenido de maneras distintas.
- Personas que utilizan lectores de pantalla: pueden explorar encabezados, listas, tablas y grupos sin leer toda la página linealmente.
- Personas con baja visión: conservan las relaciones aunque personalicen tamaños, colores o espaciado.
- Personas con discapacidades cognitivas o de aprendizaje: encuentran bloques previsibles, títulos claros e instrucciones menos ambiguas.
- Personas que usan lectura simplificada o modos de lectura: obtienen mejores resultados cuando el navegador puede reconocer cada parte.
- Equipos de contenido y desarrollo: mantienen una base más consistente, reutilizable y fácil de revisar.
04 · Barreras frecuentes
Cuando el aspecto y el significado se separan
05 · Criterios de diseño
Qué debe comprobarse
La estructura puede evaluarse observando tanto la interfaz como el código que expresa sus relaciones.
Un esquema de encabezados coherente
Usa un encabezado principal y niveles que representen secciones y subsecciones. No elijas el nivel por su estilo visual.
Relacionado: WCAG 1.3.1 y 2.4.6
Listas reales para conjuntos
Utiliza listas ordenadas cuando la secuencia importe y listas no ordenadas cuando los elementos formen un conjunto sin orden obligatorio.
Relacionado: WCAG 1.3.1 · Nivel A
Tablas reservadas para datos
Incluye una descripción o título cuando ayude y relaciona cada dato con encabezados definidos mediante th y el alcance correspondiente.
Relacionado: WCAG 1.3.1 · Nivel A
Grupos con un nombre compartido
Agrupa controles relacionados con fieldset y comunica la pregunta o categoría mediante legend.
Relacionado: WCAG 1.3.1 y 3.3.2
Instrucciones independientes de los sentidos
Nombra el control, la etiqueta o la finalidad, sin depender únicamente de color, forma, sonido, tamaño o ubicación.
Relacionado: WCAG 1.3.3 · Nivel A
06 · Ejemplo aplicado
De bloques visuales a contenido comprensible
Problema
Todo es un contenedor genérico
<div class="titulo">Cursos</div>
<div>– Diseño<br>– Programación</div>
<div>Modalidad: Presencial</div>- El título no forma parte del esquema.
- Los cursos no se anuncian como lista.
- La relación “Modalidad–Presencial” depende de la lectura visual.
Solución
Cada relación tiene un elemento
<h2>Cursos</h2>
<ul><li>Diseño</li><li>Programación</li></ul>
<dl><dt>Modalidad</dt><dd>Presencial</dd></dl>- El encabezado crea una sección.
- La lista comunica el conjunto.
- La lista descriptiva conserva la relación entre término y valor.
Decisión clave: primero identifica qué significa el contenido; después elige el elemento que expresa ese significado y finalmente define su apariencia.
07 · Práctica
Comprueba lo aprendido
Estas actividades examinan jerarquía, elección de elementos y reparación de relaciones semánticas.
Actividad 1: detecta el esquema correcto
Selecciona la opción cuya jerarquía representa una página con un título principal, dos secciones y una subsección dentro de “Servicios”.
Actividad 2: construye el esqueleto
Elige el elemento que mejor comunica cada relación. Cada fila funciona como un grupo de botones seleccionables.
Tres requisitos sin orden obligatorio
Horario con días, horas y aulas
Opciones de modalidad para una misma pregunta
Actividad 3: repara tres relaciones
Activa cada reparación y observa cómo cambia la información que comunica el código.
Lista simulada
Diseño<br>Programación<br>Investigación
<ul><li>Diseño</li>…</ul>Ahora se reconoce como un conjunto de tres elementos.
Opciones sin pregunta común
<input type="radio"> Presencial …
<fieldset><legend>Modalidad</legend>…</fieldset>Las opciones comparten ahora el nombre “Modalidad”.
Instrucción sensorial
“Pulsa el botón rojo de la derecha”.
“Selecciona Enviar solicitud”.La instrucción identifica el control por su nombre y propósito.
Repara los tres casos.
08 · Ficha rápida
Estructura y semántica en cinco preguntas
- ¿El esquema es lógico?
- Lee únicamente los encabezados y comprueba si explican la organización.
- ¿Los conjuntos son listas?
- Evita simularlos con guiones, iconos o saltos de línea.
- ¿Los datos conservan relaciones?
- Asocia cada celda con sus encabezados de fila o columna.
- ¿Los controles forman grupos?
- Comunica la pregunta común mediante una leyenda.
- ¿Las instrucciones conservan sentido?
- Nombra el control o la acción sin depender de características sensoriales.
Resultado
Progreso de las actividades
Completa las tres actividades para terminar el tutorial.