Criterios de Perceptible
PerceptiblePauta 1.3 Adaptable
1.3.1Información y relaciones
Nivel ALo exige la normativa (EN 301 549).
Qué pide
La estructura visual (títulos, listas, tablas, campos de formulario) está también en el código, para que la tecnología de apoyo la entienda.
A quién ayuda: Usuarios de lector de pantalla y de otras tecnologías de apoyo.
Un caso real
Una página de horarios de tren muestra una tabla y varios encabezados.
BienLos títulos usan h1, h2…, la tabla usa th para las cabeceras y cada campo tiene su label asociado.
MalLos títulos son párrafos en negrita y la tabla está hecha con divs.
Cómo aplicarlo en código
Estructura con elementos semánticos
Encabezados, grupos de campos y tablas con su elemento HTML: así el lector de pantalla transmite la misma estructura que se ve.
<h2>Datos de envío</h2>
<fieldset>
<legend>Tipo de entrega</legend>
<label><input type="radio" name="entrega" value="domicilio"> A domicilio</label>
<label><input type="radio" name="entrega" value="tienda"> Recoger en tienda</label>
</fieldset>
<table>
<caption>Horario de atención</caption>
<tr><th scope="col">Día</th><th scope="col">Horario</th></tr>
<tr><th scope="row">Lunes</th><td>9:00 a 14:00</td></tr>
</table><div class="titulo-grande">Datos de envío</div>
<div class="etiqueta">Tipo de entrega</div>
<input type="radio" name="entrega"> A domicilio
<input type="radio" name="entrega"> Recoger en tienda
<div class="tabla">
<div class="fila"><b>Día</b> <b>Horario</b></div>
<div class="fila">Lunes 9:00 a 14:00</div>
</div>Cómo comprobarlo
Desactiva los estilos CSS o revisa el árbol de accesibilidad: la estructura debe seguir ahí.