WCAG 1.4.4: Redimensionar texto

Qué significa esta regla

WCAG 1.4.4 Redimensionar texto (Nivel AA) establece que el texto debe poder redimensionarse hasta un 200 por ciento sin el uso de tecnología de apoyo y sin pérdida de contenido o funcionalidad. En términos sencillos, cuando una persona usuaria amplía su navegador al 200% o aumenta el tamaño de fuente base mediante la configuración del navegador o del sistema operativo, todo el texto de la página debe seguir siendo legible y toda la funcionalidad debe permanecer intacta.

El criterio se aplica de forma amplia a todo el texto renderizado en una página web, incluyendo el cuerpo del texto, encabezados, etiquetas, texto de botones, texto de marcador de posición dentro de campos de formulario, enlaces de navegación, contenido de tablas y subtítulos. No se aplica al texto que forma parte de un logotipo o nombre de marca, ni al texto decorativo que no transmite información y se presenta únicamente como contenido de imagen (como una fotografía escaneada de una nota manuscrita donde el propio texto no es el contenido accesible).

Para aprobar se requiere que, al 200% de zoom —ya sea mediante el zoom de página integrado del navegador (Ctrl/Cmd + tecla de más o el menú Ver > Zoom) o mediante la configuración de tamaño mínimo de fuente del navegador—, se cumplan las siguientes condiciones: ningún texto es recortado u ocultado por su contenedor, ningún texto se superpone a otro texto o a elementos interactivos, no aparece una barra de desplazamiento horizontal a ancho completo de la ventana gráfica (salvo para contenido que realmente requiera desplazamiento bidimensional, como mapas o tablas de datos), y todos los controles interactivos siguen siendo operables.

Se registra un fallo cuando los valores fijos en píxeles bloquean el texto en un tamaño que no puede crecer, cuando los contenedores usan alturas fijas que recortan el texto desbordado, cuando las metaetiquetas de la ventana gráfica usan user-scalable=no o maximum-scale=1.0 para bloquear el gesto de pellizcar para hacer zoom en dispositivos móviles, o cuando JavaScript intercepta los gestos de zoom para impedir la escala. El criterio es explícitamente independiente de la tecnología: ya sea que la implementación use CSS, texto SVG o texto renderizado en canvas, lo que importa es el resultado para la persona usuaria. Nótese que el texto SVG y el texto renderizado en canvas son intrínsecamente difíciles de redimensionar y a menudo requieren atención de ingeniería adicional.

Por qué es importante

Aproximadamente 2,2 mil millones de personas en todo el mundo tienen algún tipo de discapacidad visual, según la Organización Mundial de la Salud. Entre ellas, una proporción muy grande experimenta baja visión, una condición en la que la visión no puede corregirse completamente con gafas o lentes de contacto pero la persona no es totalmente ciega. Las personas con baja visión suelen configurar el zoom de su navegador al 150%, 200% o más, o configuran su sistema operativo para mostrar el texto con un tamaño base mayor. Cuando los sitios web bloquean o rompen este comportamiento, estas personas quedan totalmente excluidas del contenido.

Más allá de la baja visión diagnosticada, factores situacionales afectan prácticamente a toda persona usuaria de internet en algún momento: pantallas pequeñas, luz solar intensa, fatiga, envejecimiento de la vista o leer en un idioma poco familiar pueden hacer que el texto pequeño sea más difícil de procesar. Las personas mayores en particular —un grupo demográfico que crece rápidamente a nivel global y en Turquía— dependen con frecuencia del zoom como primera medida de accesibilidad antes de recurrir a tecnología de apoyo especializada.

Considere un escenario concreto: una paciente de unos sesenta años intenta leer en su smartphone la confirmación de una cita en línea desde el portal de un hospital. La hoja de estilos móvil del hospital establece el tamaño de fuente del cuerpo en 12px usando un valor fijo en píxeles y la metaetiqueta de la ventana gráfica incluye maximum-scale=1.0. La paciente intenta hacer zoom con un pellizco, pero la interfaz se bloquea. No puede leer la fecha ni el nombre del departamento con suficiente claridad como para estar segura. Llama al servicio de ayuda del hospital, consumiendo tiempo del personal y generando ansiedad para la paciente, un resultado totalmente evitable si se hubiera cumplido el criterio.

Desde una perspectiva puramente comercial, un dimensionamiento de texto accesible se correlaciona con mejoras generales de usabilidad que benefician a todas las personas usuarias. Los motores de búsqueda también recompensan a los sitios que muestran texto legible en tamaños normales y ampliados, porque Googlebot evalúa señales de legibilidad como parte de Core Web Vitals y de los factores de clasificación de experiencia de página. Corregir los problemas de redimensionamiento, por tanto, mejora simultáneamente el SEO, reduce la carga de soporte y amplía el público potencial.

Reglas relacionadas de Axe-core

WCAG 1.4.4 es principalmente un criterio de prueba manual. Las herramientas automatizadas pueden señalar un conjunto limitado de condiciones que se sabe que impiden el redimensionamiento del texto, pero no pueden simular y evaluar de forma fiable todos los resultados de diseño al 200% de zoom. Las siguientes condiciones son las que las herramientas automatizadas intentan detectar y las que requieren seguimiento manual:

• metaetiqueta de la ventana gráfica que bloquea el zoom (requiere comprobación manual): Axe-core incluye la regla meta-viewport, que marca cualquier etiqueta <meta name='viewport'> que establezca user-scalable=no o maximum-scale en un valor de 1.0 o menos. Este es el único escenario en el que es posible una detección totalmente automatizada, porque la infracción es declarativa y no depende del resultado del diseño. Sin embargo, ni siquiera esta regla puede determinar si un sitio usa JavaScript para impedir programáticamente el zoom, por lo que siempre se necesita verificación manual.
• Tamaños de fuente fijos en píxeles (requiere comprobación manual): Las herramientas automatizadas pueden informar cuando los valores de CSS font-size se establecen en unidades absolutas de píxeles (px) en lugar de unidades relativas (em, rem, % o unidades relativas a la ventana gráfica). Sin embargo, los navegadores modernos anulan los tamaños de fuente absolutos en píxeles cuando la persona usuaria cambia el tamaño de fuente predeterminado del navegador, por lo que un valor en píxeles por sí solo no constituye un fallo garantizado: depende del comportamiento del navegador y de si el sitio respeta la herencia de font-size. Se requiere inspección manual de los estilos calculados y verificación visual para confirmar un fallo real.
• Desbordamiento de contenido y recorte al 200% de zoom (solo manual): Ninguna herramienta automatizada puede renderizar de forma fiable una página al 200% y evaluar si todo el texto sigue siendo visible y todos los elementos interactivos siguen siendo operables. Esto requiere que una persona evaluadora configure el nivel de zoom del navegador, recorra la página y verifique cada área de contenido. Las herramientas automatizadas no tienen acceso al estado renderizado posterior al zoom.
• Texto en imágenes y canvas (solo manual): El texto incrustado en imágenes ráster (etiquetas <img> que contienen capturas de pantalla de texto) o renderizado en un elemento <canvas> no puede ser redimensionado por el navegador en absoluto. Las herramientas automatizadas pueden marcar la presencia de elementos canvas para revisión manual, pero no pueden determinar si esos elementos canvas contienen texto significativo que la persona usuaria necesite leer.

Cómo hacer la prueba

1. Ejecute primero un análisis automatizado. Abra la página en Chrome o Firefox y ejecute axe DevTools (extensión del navegador) o Lighthouse (Chrome DevTools, pestaña Lighthouse). Busque específicamente la infracción de la regla meta-viewport. Si se marca, anótela como un fallo crítico. Revise también la auditoría de CSS para cualquier declaración de font-size en unidades px que aparezca en las advertencias de buenas prácticas de axe.
2. Compruebe la metaetiqueta de la ventana gráfica en el código fuente. Abra DevTools (F12), vaya a la pestaña Elements y busque meta name='viewport'. Lea con atención el atributo content. Si contiene user-scalable=no, user-scalable=0 o maximum-scale=1 (o cualquier valor inferior a 2), esto es un fallo directo de 1.4.4.
3. Configure el zoom del navegador al 200%. En Chrome o Firefox, presione Ctrl + Más (Windows/Linux) o Cmd + Más (macOS) repetidamente hasta que el indicador de zoom del navegador muestre 200%. Alternativamente, vaya a Ver > Acercar. En Safari para macOS, use Ver > Acercar. No use la escala de pantalla a nivel de sistema operativo para esta prueba: use específicamente el zoom del navegador.
4. Desplácese por todas las secciones de la página al 200% de zoom. Desplácese de forma sistemática de arriba abajo. Busque: texto que esté cortado u oculto por su contenedor, texto que se desborde de su caja y se superponga al contenido adyacente, etiquetas de formulario que desaparecen detrás de sus campos de entrada, botones cuyo texto esté truncado, menús desplegables que se extienden fuera de la pantalla y no puedan desplazarse a la vista, y cuadros de diálogo modales que excedan la ventana gráfica y no puedan desplazarse.
5. Pruebe toda la funcionalidad interactiva al 200% de zoom. Active cada menú de navegación, abra cada modal, envíe formularios, dispare tooltips y popovers, e interactúe con cualquier carrusel o acordeón. Verifique que todos ellos sigan siendo completamente operables, no solo visualmente presentes.
6. Pruebe con NVDA + Firefox (Windows). Active NVDA y abra Firefox al 200% de zoom. Navegue usando la tecla Tab y las teclas de flecha. Confirme que los elementos enfocables reciben el foco, que los indicadores de foco son visibles (superposición con WCAG 2.4.7, pero útil de comprobar) y que el orden de lectura coincide con el orden visual al tamaño ampliado.
7. Pruebe con VoiceOver + Safari (macOS/iOS). Active VoiceOver. En iOS, vaya a Configuración > Accesibilidad > Pantalla y tamaño del texto y active Texto más grande. Navegue por la misma página y verifique la integridad del contenido. Use también el gesto de pellizcar para hacer zoom para confirmar que no está bloqueado.
8. Pruebe la configuración de tamaño mínimo de fuente del navegador. En Firefox, vaya a Configuración > General > Fuentes y colores y establezca el tamaño mínimo de fuente en 24px. Recargue la página y verifique que todo el texto cumple este mínimo y que el diseño no se rompe. Esto prueba un vector diferente del mismo criterio.
9. Pruebe con JAWS + Chrome (Windows). Abra la página en Chrome al 200% de zoom con JAWS activo. Use los comandos de lectura de JAWS (Insert + Flecha abajo para leer desde el cursor) para confirmar que se anuncia todo el contenido de texto y que no se omite contenido debido a que esté oculto por recorte de desbordamiento.

Cómo corregir

Metaetiqueta de la ventana gráfica que bloquea el zoom — Incorrecto

<!-- WRONG: user-scalable=no prevents pinch-to-zoom on mobile,
     directly violating WCAG 1.4.4 -->
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>

Metaetiqueta de la ventana gráfica que bloquea el zoom — Correcto

<!-- CORRECT: Remove user-scalable=no and do not cap maximum-scale below 2.
     Allowing zoom to at least 2 (200%) satisfies WCAG 1.4.4. -->
<meta name='viewport' content='width=device-width, initial-scale=1.0'>

Tamaños de fuente fijos en píxeles — Incorrecto

<!-- WRONG: font-size in px ignores the user's browser font-size preference.
     If the user sets a larger default, px values override that preference. -->
<style>
  body {
    font-size: 14px;
  }
  h1 {
    font-size: 24px;
  }
  .caption {
    font-size: 11px;
  }
</style>
<p>Your appointment is confirmed.</p>

Tamaños de fuente fijos en píxeles — Correcto

<!-- CORRECT: Use rem units relative to the root font size (typically 16px browser default).
     1rem = 16px by default, but scales with user preference.
     Setting font-size on :root in % rather than px also respects user settings. -->
<style>
  :root {
    font-size: 100%; /* inherits browser default, typically 16px */
  }
  body {
    font-size: 0.875rem; /* ~14px at default, but scales with user preference */
  }
  h1 {
    font-size: 1.5rem; /* ~24px at default */
  }
  .caption {
    font-size: 0.75rem; /* ~12px at default — still scalable */
  }
</style>
<p>Your appointment is confirmed.</p>

Contenedores de altura fija que recortan texto — Incorrecto

<!-- WRONG: A fixed height with overflow:hidden will clip enlarged text.
     At 200% zoom, the text grows but the box does not, hiding content. -->
<style>
  .card {
    height: 120px;
    overflow: hidden;
  }
</style>
<div class='card'>
  <h2>Flight Confirmation</h2>
  <p>Your flight TK0001 to Istanbul departs at 09:30 on 15 July 2025. Gate B12.</p>
</div>

Contenedores de altura fija que recortan texto — Correcto

<!-- CORRECT: Use min-height instead of height so the container grows
     with the content when text is enlarged. -->
<style>
  .card {
    min-height: 7.5rem; /* sets a minimum but allows growth */
    overflow: visible; /* or remove overflow:hidden entirely */
  }
</style>
<div class='card'>
  <h2>Flight Confirmation</h2>
  <p>Your flight TK0001 to Istanbul departs at 09:30 on 15 July 2025. Gate B12.</p>
</div>

Texto incrustado en imágenes — Incorrecto

<!-- WRONG: A banner image containing text cannot be resized by the browser.
     Even with alt text, the visual text is inaccessible at high zoom levels. -->
<img src='promo-banner-with-text.jpg' alt='50% indirim — sadece bu hafta sonu'>

Texto incrustado en imágenes — Correcto

<!-- CORRECT: Use real HTML text over a background image so the browser
     can resize it. The image is decorative background; text is live HTML. -->
<div class='promo-banner' role='region' aria-label='Promosyon'>
  <p class='promo-text'>50% İndirim &mdash; Sadece Bu Hafta Sonu</p>
</div>
<!-- CSS sets the background image on .promo-banner, while .promo-text
     uses rem font-size and contrasts safely against the background. -->

Errores comunes

• Añadir user-scalable=no a la metaetiqueta de la ventana gráfica para evitar que el diseño se "rompa" en móviles: esto es una infracción directa y comprobable de 1.4.4 y nunca debe usarse. Corrija el diseño en lugar de suprimir la capacidad de la persona usuaria de hacer zoom.
• Establecer maximum-scale=1.0 o cualquier valor inferior a 2.0: incluso sin user-scalable=no, limitar el zoom a 1.0 o 1.5 impide que las personas usuarias alcancen el 200% y no cumple el criterio.
• Usar escuchadores de eventos de JavaScript para llamar a event.preventDefault() en gestos de pellizcar para hacer zoom o en eventos de rueda: bloquear el zoom nativo de forma programática es funcionalmente equivalente al enfoque de la metaetiqueta de la ventana gráfica y falla el mismo criterio.
• Establecer font-size en píxeles en el elemento <html> o <body> y luego usar unidades em para todo lo demás: si el tamaño de fuente raíz está fijado en px, todos los descendientes em/rem también quedan efectivamente fijos y no responderán a la preferencia de tamaño de fuente del navegador de la persona usuaria.
• Usar height en lugar de min-height en componentes de tarjetas, barras laterales o cuerpos de modales: al 200% de zoom, el texto ampliado se desborda de las cajas de altura fija y es recortado por overflow: hidden, ocultando contenido crítico.
• Colocar texto importante exclusivamente dentro de elementos <canvas>: el texto renderizado en canvas es un mapa de bits rasterizado y no puede escalarse mediante los mecanismos de redimensionamiento de texto o zoom del navegador. Cualquier texto significativo que una persona usuaria necesite leer debe estar disponible como texto HTML real o, como mínimo, como texto alternativo accesible.
• Usar elementos SVG <text> con coordenadas absolutas y sin escalado viewBox: el texto SVG puede ser escalable cuando el SVG usa un viewBox y se dimensiona con unidades relativas, pero el texto SVG con atributos fijos x, y, font-size establecidos en píxeles dentro de un SVG con width y height fijos no se redimensiona con el zoom del navegador en todos los navegadores.
• Suponer que el zoom del navegador gestiona automáticamente el criterio y omitir las pruebas manuales: el zoom del navegador escala toda la página, incluidas imágenes y diseño, pero el texto que ya era demasiado pequeño, estaba recortado o se superponía al 100% se convierte en un problema mayor al 200%. Siempre se requiere verificación manual al nivel de zoom.
• Olvidar probar los widgets incrustados de terceros: los widgets de chat, iframes de pago, banners de consentimiento de cookies y superposiciones de analítica suelen ser desarrollados por terceros usando tamaños fijos en px y pueden bloquear el zoom. Aunque el código sea de terceros, el criterio se aplica a toda la página tal como se entrega a la persona usuaria.
• Corregir el diseño de escritorio para el zoom pero descuidar el punto de corte móvil: muchos equipos prueban el zoom en escritorio y declaran éxito, pero las ventanas gráficas móviles al 200% de zoom presentan un conjunto diferente de desafíos de diseño, especialmente para menús de navegación, encabezados fijos y barras de navegación inferiores que dependen de alturas fijas en píxeles.

Relación con la normativa de accesibilidad de Turquía

La Circular Presidencial 2025/10 de Turquía, publicada en el Boletín Oficial n.º 32933 el 21 de junio de 2025, establece requisitos obligatorios de accesibilidad web y móvil para un conjunto definido de organizaciones que operan en Turquía. La circular hace referencia a normas de accesibilidad reconocidas internacionalmente, alineando de hecho los requisitos turcos con WCAG 2.1 y WCAG 2.2 Nivel AA como referencia para la conformidad.

WCAG 1.4.4 Redimensionar texto es un criterio de Nivel AA, y la conformidad de Nivel AA es el umbral requerido para obtener el Logotipo de Accesibilidad (Erişilebilirlik Logosu) emitido por el Ministerio de Familia y Servicios Sociales (Aile ve Sosyal Hizmetler Bakanlığı). El Logotipo de Accesibilidad es tanto una señal de confianza pública como un punto de control regulatorio: las organizaciones sujetas a la circular que deseen mostrar el logotipo o demostrar conformidad ante auditores deben cumplir todos los criterios de Nivel AA, incluido el 1.4.4.

Las categorías de entidades cubiertas por la Circular Presidencial 2025/10 incluyen: instituciones y organismos públicos en todos los niveles de gobierno; plataformas de comercio electrónico y mercados en línea; bancos y proveedores de servicios financieros regulados por la Agencia de Regulación y Supervisión Bancaria (BDDK); hospitales, centros de salud y otras organizaciones sanitarias con servicios digitales dirigidos a pacientes; operadores de telecomunicaciones con 200,000 o más abonados; agencias de viajes y plataformas de viajes en línea; empresas de transporte privado que ofrecen servicios digitales de emisión de billetes o reservas; y escuelas privadas e instituciones educativas autorizadas por el Ministerio de Educación Nacional (Millî Eğitim Bakanlığı, MoNE).

Para cada uno de estos tipos de entidades, la implicación práctica de 1.4.4 es significativa. El portal de banca en línea de un banco que bloquea el gesto de pellizcar para hacer zoom en móviles no es solo un fallo de usabilidad: es una falta de conformidad normativa que podría dar lugar a hallazgos de auditoría o a la exclusión del programa del Logotipo de Accesibilidad. Un sistema de reserva de citas de un hospital que usa tamaños de fuente fijos en píxeles dentro de contenedores que recortan el contenido no solo deja de atender a pacientes con baja visión, sino que también incumple sus obligaciones en virtud de la circular. La plataforma de inscripción de una escuela privada que incrusta texto en imágenes en lugar de usar texto HTML escalable es igualmente no conforme.

Las organizaciones deben tratar WCAG 1.4.4 no como una casilla técnica estrecha que marcar, sino como una expectativa básica de respeto hacia las personas usuarias con discapacidad visual, una expectativa en la que convergen la legislación turca, las mejores prácticas internacionales y la usabilidad básica. El SDK de superposición de Accsible admite el cumplimiento del redimensionamiento de texto proporcionando controles configurables de escala de fuente que permiten a las personas usuarias finales aumentar el tamaño del texto de forma independiente del zoom del navegador, ofreciendo una capa adicional de adaptación por encima de los requisitos básicos que los propios sitios deben implementar.