Diferencia entre revisiones de «Principio 1/1.4 Distinguible/1.4.4-A»
De WCAG Wiki
Sin resumen de edición |
Sin resumen de edición |
||
| (No se muestra una edición intermedia del mismo usuario) | |||
| 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. | |wcag_version=2.0 | ||
|wcag_principio=1_Perceptible | |wcag_principio=1_Perceptible | ||
|wcag_principio_url=Principio_1 | |wcag_principio_url=Principio_1 | ||
|wcag_pauta=1. | |wcag_pauta=1.4_Distinguible | ||
|wcag_pauta_url=Principio_1/1. | |wcag_pauta_url=Principio_1/1.4_Distinguible | ||
|wcag_grupo=Texto | |wcag_grupo=Texto | ||
|wcag_subgrupo=Redimensionar | |wcag_subgrupo=Redimensionar | ||
| Línea 23: | Línea 23: | ||
|wcag_texto_criterioOAW= | |wcag_texto_criterioOAW= | ||
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 | |||
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: | <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= | |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> | <li><span class="paso-badge">Paso 1.</span> | ||
<li><span class="paso-badge">Paso 2.</span> Verificar que | Utilizando el navegador, aumentar el zoom hasta el <strong>200%</strong>. | ||
</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= | ||
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> | </div> | ||
|wcag_otras_herramientas_evaluacion= | |wcag_otras_herramientas_evaluacion= | ||
<ul> | <ul> | ||
<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> | <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 actual - 12:38 6 nov 2025
1.4.4-A. Redimensionar texto sin pérdida
- Nivel: AA
- Versión: 2.0
- Principio: 1_Perceptible
- Pauta: 1.4_Distinguible
- Grupo: Texto
- Subgrupo: Redimensionar
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Baja visión –
Barrera grave
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
- Paso 1. Utilizando el navegador, aumentar el zoom hasta el 200%.
- 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...
