Diferencia entre revisiones de «Principio 1/1.4 Distinguible/1.4.4-A»

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Línea 4: Línea 4:
|wcag_titulo_criterio=1.4.4-A. Redimensionar texto sin pérdida
|wcag_titulo_criterio=1.4.4-A. Redimensionar texto sin pérdida
|wcag_nivel=AA
|wcag_nivel=AA
|wcag_version=2.2
|wcag_version=2.0
|wcag_principio=1_Perceptible
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_principio_url=Principio_1
Línea 23: Línea 23:


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
Todo el texto puede ser ajustado sin productos de apoyo hasta un 200% sin pérdida de contenido o de funcionalidad. Este criterio no aplica ni a los subtítulos ni a las imágenes de texto.
Se debe poder aumentar el texto hasta el doble de su tamaño y que la página siga siendo legible sin que se pierda contenido o funcionalidad.


|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
El texto debe poder ampliarse hasta un 200% desde las herramientas del navegador sin perder contenido ni funcionalidad.   
El texto debe poder ampliarse hasta un 200% desde las herramientas del navegador sin perder contenido ni funcionalidad.  
   
La interfaz debe adaptarse correctamente y no provocar solapamientos, cortes o textos ilegibles.
La interfaz debe adaptarse correctamente y no provocar solapamientos, cortes o textos ilegibles.


Línea 33: Línea 34:


|wcag_importancia=
|wcag_importancia=
Si el texto no se adapta correctamente cuando aumenta el tamaño, se puede perder información y usabilidad.   
Si el texto no se adapta correctamente cuando aumenta el tamaño, se puede perder información y usabilidad.  
El diseño flexible y el uso de unidades relativas (como `em` o `%`) facilitan el cumplimiento del criterio.
   
El diseño flexible y el uso de unidades relativas (como em'' o '%') facilitan el cumplimiento del criterio.


|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li>G142: Uso de tecnologías con soporte de zoom en navegadores comunes</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G142 G142: Using a technology that has commonly-available user agents that support zoom]</span></li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<ul>
<li>Usar unidades relativas (`em`, `rem`, `%`) y no valores fijos.</li>
<li>Usar unidades relativas (`em`, `rem`, `%`) y no valores fijos.</li>
Línea 49: Línea 52:
</ul>
</ul>


|wcag_tipo_evaluacion=Comprobación manual
|wcag_tipo_evaluacion=Manual


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Aumentar el zoom del navegador hasta el 200%.</li>
<li><span class="paso-badge">Paso 1.</span>
<li><span class="paso-badge">Paso 2.</span> Verificar que el contenido sigue siendo completamente legible y funcional.</li>
Utilizando el navegador, aumentar el zoom hasta el <strong>200%</strong>.
<li><span class="paso-badge">Paso 3.</span> Comprobar formularios, botones, menús y navegación.</li>
</li>
<li><span class="paso-badge">Paso 2.</span>
Verificar que todos los contenidos de la página son legibles.
</li>
</ol>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Línea 62: Línea 70:


|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
Ejemplo accesible:
Codigo HTML con visualización flexible, se indica unidad REM para indicar el tamaño del texto.
 
<div class="accessibility-card">
<div class="accessibility-card">
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
Línea 70: Línea 79:
</pre>
</pre>
<p>El uso de unidades relativas permite el escalado correcto del texto.</p>
<p>El uso de unidades relativas permite el escalado correcto del texto.</p>
</div>
Ejemplo no accesible:
<div class="accessibility-card-error">
<pre class="wcag-codigo-html">
<style>
body { font-size: 14px; }
</style>
</pre>
<p>Texto fijado en px, puede impedir escalado adecuado.</p>
</div>
</div>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Zoom del navegador</li>
<li>'''Aumento del texto en navegador''': ampliar solo el tamaño del texto hasta el 200% (sin zoom completo), usando la opción “Tamaño de texto” o “Solo texto”, y comprobar que no se pierde contenido ni funcionalidad.</li>
<li>Herramientas de inspección</li>
<li>'''Inspección visual''': verificar que el texto no se solapa, corta, ni obliga a hacer scroll horizontal excesivo; comprobar que botones, menús y formularios siguen siendo legibles y utilizables.</li>
<li>'''Inspección del navegador''': revisar estilos CSS para evitar unidades fijas (p. ej., <code>px</code>) y asegurar el uso de unidades relativas (<code>rem</code>, <code>em</code>, <code>%</code>) para el texto.</li>
<li>'''Pruebas con tecnologías asistivas''': (ZoomText, herramientas de ampliación del Sistema Operativo) comprobar que la funcionalidad se mantiene y el foco no se pierde al aumentar el tamaño del texto.</li>
</ul>
</ul>
}}
}}

Revisión del 10:31 5 nov 2025

1.4.4-A. Redimensionar texto sin pérdida

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • Se debe poder aumentar el texto hasta el doble de su tamaño y que la página siga siendo legible sin que se pierda contenido o funcionalidad.

Comprensión del criterio

Descripción resumida

El texto debe poder ampliarse hasta un 200% desde las herramientas del navegador sin perder contenido ni funcionalidad. La interfaz debe adaptarse correctamente y no provocar solapamientos, cortes o textos ilegibles.

Objetivo

Permitir que las personas con baja visión accedan al contenido aumentando el tamaño del texto sin depender de magnificadores externos ni perder comprensión o funcionalidad.

Importancia de cumplir el criterio

Si el texto no se adapta correctamente cuando aumenta el tamaño, se puede perder información y usabilidad. El diseño flexible y el uso de unidades relativas (como em o '%') facilitan el cumplimiento del criterio.

Referencias WCAG

Recursos de apoyo

Consejos
  • Usar unidades relativas (`em`, `rem`, `%`) y no valores fijos.
  • Verificar que el contenido no se corta, solapa ni desaparece al aumentar texto.
  • Permitir ampliación del 200% sin pérdida de funcionalidad.
  • Ofrecer controles propios de aumento de texto como mejora opcional.

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Utilizando el navegador, aumentar el zoom hasta el 200%.
  2. Paso 2. Verificar que todos los contenidos de la página son legibles.

Resultado esperado

El texto se puede ampliar hasta el 200% sin pérdida de contenido ni de funcionalidad y sin necesidad de herramientas externas.

Ejemplo

Codigo HTML con visualización flexible, se indica unidad REM para indicar el tamaño del texto. 
<style>
body { font-size: 1rem; }
</style>

El uso de unidades relativas permite el escalado correcto del texto.

Otras herramientas de evaluación

  • Aumento del texto en navegador: ampliar solo el tamaño del texto hasta el 200% (sin zoom completo), usando la opción “Tamaño de texto” o “Solo texto”, y comprobar que no se pierde contenido ni funcionalidad.
  • Inspección visual: verificar que el texto no se solapa, corta, ni obliga a hacer scroll horizontal excesivo; comprobar que botones, menús y formularios siguen siendo legibles y utilizables.
  • Inspección del navegador: revisar estilos CSS para evitar unidades fijas (p. ej., px) y asegurar el uso de unidades relativas (rem, em, %) para el texto.
  • Pruebas con tecnologías asistivas: (ZoomText, herramientas de ampliación del Sistema Operativo) comprobar que la funcionalidad se mantiene y el foco no se pierde al aumentar el tamaño del texto.










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.4.4-A. Redimensionar texto sin pérdida

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.4_Distinguible/1.4.4-A&oldid=3446»