Criterios de Perceptible
PerceptiblePauta 1.4 Distinguible
1.4.4Cambio de tamaño del texto
Nivel AALo exige la normativa (EN 301 549).
Qué pide
El texto se puede ampliar al 200 % sin perder contenido ni funciones.
A quién ayuda: Personas con baja visión.
Un caso real
Una persona amplía el texto de una web de seguros.
BienLos bloques crecen y el texto se reorganiza sin cortarse. Prueba los botones A+ de esta misma página.
MalAl ampliar, los textos se solapan o quedan cortados dentro de cajas de altura fija.
Cómo aplicarlo en código
Tamaños relativos y zoom permitido
Usa rem para el texto y deja que los contenedores crezcan. Nunca bloquees el zoom en la etiqueta viewport.
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-size: 1.0625rem; } /* respeta el tamaño elegido en el navegador */
.tarjeta { min-height: 10rem; padding: 1rem; } /* crece con el texto */
</style><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
body { font-size: 14px; }
.tarjeta { height: 120px; overflow: hidden; } /* al ampliar, el texto se corta */
</style>Cómo comprobarlo
Amplía al 200 % con el zoom del navegador y revisa cada página.