1.3.1 Información y relaciones
Criterio de éxito oficial
La información, la estructura y las relaciones transmitidas a través de la presentación pueden determinarse programáticamente o están disponibles en el texto.
Nota sobre el color
Los valores de color no necesitan determinarse programáticamente. La información transmitida por el color se aborda en el Criterio 1.4.1 (Uso del color), no en este criterio.
¿Qué es?
El contenido web incluye pistas visuales y sonoras que muestran cómo se conectan los elementos: diseño, color, negrita, cursiva, tamaño de fuente, agrupaciones, tablas, efectos de sonido... Estas pistas ayudan a comprender significado y estructura, pero si alguien usa un lector de pantalla o no ve la pantalla, esas pistas pueden perderse.
Este criterio exige que cualquier información o relación que se muestre visualmente (o con sonido) también esté codificada correctamente usando HTML semántico o ARIA, para que la tecnología de asistencia pueda comprenderla y compartirla con los usuarios.
Jerarquía del contenido
<h1>–<h6> Elementos agrupados
<ul> <ol> <li> Datos en filas y columnas
<table> <th> Campos con etiquetas
<label> <fieldset> Áreas de la página
<header> <main> Texto importante
<strong> <em> ¿Por qué es importante?
Las personas que no pueden ver ni oír el contenido podrían no captar todo el significado si este solo se transmite mediante la apariencia o el sonido. Cuando estas señales no están disponibles, la tecnología de asistencia necesita ayuda adicional a través de una codificación adecuada.
Incluso opciones de formato sutiles — como juntar elementos visualmente o cambiar el tamaño de fuente — pueden comunicar relaciones importantes. Sin codificar estas relaciones, pasan desapercibidas para quienes usan lectores de pantalla o pantallas braille.
<div class="big-bold">Título de la página</div>
<div>Un párrafo de texto...</div>
<div class="bold">Subtítulo</div>
<div>- Elemento uno</div>
<div>- Elemento dos</div>
<h1>Título de la página</h1>
<p>Un párrafo de texto...</p>
<h2>Subtítulo</h2>
<ul>
<li>Elemento uno</li>
<li>Elemento dos</li>
</ul>
¿Quién se ve afectado?
Personas con discapacidad visual — Usan lectores de pantalla que se basan en la estructura del código para comprender la página. Si el contenido solo parece estructurado visualmente pero no está codificado como tal, se pierde información crucial.
Personas sordociegas — Usan pantallas braille actualizables que dependen completamente de la estructura programática del código. Sin marcado semántico, no pueden acceder a la información transmitida por color o formato.
Personas con discapacidades cognitivas — Se benefician de una estructura clara y consistente. Los encabezados bien organizados y las etiquetas descriptivas facilitan la navegación y comprensión del contenido.
Cómo implementar 1.3.1
Principio fundamental
Primero HTML semántico, después ARIA. ARIA solo debería usarse cuando no existe una solución HTML nativa. Las etiquetas HTML semánticas son siempre la primera opción.
Regiones de página (landmarks)
Los puntos de referencia ayudan a los usuarios de tecnología de asistencia a acceder a las partes clave de una página sin recorrerla línea por línea:
<header>— Contiene elementos del sitio: logotipo, navegación principal<nav>— Menús o enlaces de navegación<main>— Contenido principal de la página<aside>— Contenido complementario<footer>— Información del pie de página
Encabezados
Más del 70 % de los usuarios de lectores de pantalla navegan mediante encabezados (según la encuesta de WebAIM 2023). Usa <h1> a <h6> en orden lógico sin saltar niveles (no pases de <h1> a <h4>).
Listas
Usa siempre elementos HTML de lista: <ul> para listas desordenadas, <ol> para listas ordenadas, y <li> para cada elemento. No simules listas con guiones, asteriscos o saltos de línea.
Tablas
Para datos en filas y columnas, usa el marcado de tabla HTML con <table>, <tr>, <th>, <td> y <caption>. Evita crear tablas con espaciado o tabulaciones.
<table>
<caption>Horario de autobuses — Línea 5</caption>
<thead>
<tr>
<th scope="col">Parada</th>
<th scope="col">Bus A</th>
<th scope="col">Bus B</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Centro</th>
<td>8:00</td>
<td>8:30</td>
</tr>
</tbody>
</table>Controles de formulario
Cada campo necesita un <label> conectado con for. Para campos relacionados (como dirección), agrúpalos con <fieldset> y <legend>:
<fieldset>
<legend>Dirección de envío</legend>
<label for="calle">Calle:</label>
<input id="calle" type="text">
<label for="cp">Código postal:</label>
<input id="cp" type="text">
</fieldset>Señales de estilo
Si usas color, negrita o iconos para transmitir información (como asteriscos rojos para campos obligatorios), asegúrate de explicarlo también en texto o con marcado adecuado para que los lectores de pantalla lo anuncien.
ARIA como complemento
Cuando no existe una solución HTML nativa, usa atributos ARIA como role, aria-labelledby o aria-describedby.
Regla de oro
Las etiquetas HTML nativas siempre son mejores que los roles ARIA equivalentes. Usa <nav> en lugar de <div role="navigation">, <h2> en lugar de <div role="heading">. ARIA es un complemento, no un sustituto.
Ejemplos prácticos
Formulario Campos obligatorios con color y texto
Un formulario muestra campos obligatorios con etiquetas en rojo y un asterisco (*). Las instrucciones al inicio explican «Todos los campos obligatorios están en rojo y marcados con un asterisco *». Tanto el color rojo como el icono se asocian programáticamente con los campos mediante <label> y aria-required="true".
Tabla Horario de autobuses con encabezados
Un horario de autobús usa una tabla HTML con paradas en la primera columna y autobuses en la primera fila. Las paradas y autobuses se marcan con <th scope="row"> y <th scope="col"> para que la tecnología de asistencia pueda determinar qué autobús y parada corresponden a cada hora.
Formulario Casillas de verificación con etiquetas programáticas
Un grupo de casillas de verificación para seleccionar preferencias de contacto está agrupado con <fieldset> y <legend>. Cada <input type="checkbox"> tiene su <label> asociado mediante el atributo for.
Catálogo Precios con símbolo de moneda
Un catálogo online muestra precios en fuente grande y color rojo. Los precios siempre van precedidos del símbolo de moneda (€), por lo que los usuarios que no perciben el color rojo ni el tamaño de fuente siguen identificando los precios correctamente.
Técnicas recomendadas
| Categoría | Técnicas principales |
|---|---|
| Regiones de página | ARIA11, H101, ARIA13, ARIA20, H97 |
| Encabezados | H42, ARIA12, G141, PDF9 |
| Elementos semánticos | G115 + H49, G117, G140, ARIA24 |
| Tablas | H51, H39, H63, H43, PDF6, PDF20 |
| Formularios | H44, H65, H71, H85, ARIA16, ARIA17 |
| Listas | H48, PDF21 |
| Color como señal | G138 |
Importante
Este es uno de los criterios con más incumplimientos en la web y uno de los más importantes para la accesibilidad en el mundo real. Si tu contenido tiene significado en su diseño, estilo o estructura, asegúrate de que esos significados también estén integrados en el código.
Errores comunes
<a> reales.<blockquote> para indentar en vez de para citas).<th> en tablas de diseño que no son tablas de datos.<pre> para marcar información tabular en lugar de una tabla HTML real.role="presentation" en contenido que transmite información semántica.