2526UFV1.4.4-A-001
Edición de la página como formulario
1. Información básica
Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_1/1.4_Distinguible/1.4.4-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
No se ha subido ninguna imagen.
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.1.2. Código HTML:
<head>
<meta charset="UTF-8">
<title>Ficha de producto — No accesible</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 14px; /* tamaño fijo en px */
}
.card {
width: 400px; /* ancho fijo */
height: 200px; /* alto fijo */
border: 1px solid #ccc;
padding: 20px;
overflow: hidden; /* corta el contenido que se desborda */
box-sizing: border-box;
}
.title {
font-size: 18px; /* tamaño fijo */
font-weight: bold;
}
.description {
margin-top: 10px;
font-size: 14px; /* tamaño fijo */
}
</style>
</head>
<body>
<h1>Catálogo</h1>
<div class="card">
<div class="title">Auriculares inalámbricos Pro X500</div>
<p class="description">
Auriculares con cancelación de ruido activa, hasta 30 horas de batería
y conexión multipunto para cambiar rápidamente entre tus dispositivos.
Incluye funda rígida de transporte y cable USB-C.
</p>
</div>
<p>
Prueba a aumentar el zoom del navegador al 200%. Parte del texto de la ficha
quedará cortado y no será visible.
</p>
</body>
Explicación del problema detectado:
El problema aparece cuando una interfaz está construida con tamaños fijos, tanto en el texto como en los contenedores que lo alojan. Cuando el usuario amplía el contenido del navegador al 200 %, tal como exige el criterio WCAG 1.4.4, el texto aumenta de tamaño, pero las cajas que lo contienen permanecen rígidas porque están definidas en píxeles o con alturas fijas. Como consecuencia, parte del contenido se corta, desaparece o queda solapado, impidiendo que el usuario pueda leerlo o interactuar con él. Esto puede ocurrir, por ejemplo, en tarjetas de producto, en paneles laterales, en formularios y en cualquier bloque cuya altura esté fijada artificialmente. La pérdida de contenido o funcionalidad tras el redimensionado hace que la página no cumpla con los requisitos de accesibilidad, ya que el diseño no se adapta de manera flexible al incremento del tamaño del texto y genera situaciones de ilegibilidad o desbordamiento visual.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Este fallo afecta especialmente a personas con baja visión o dificultades visuales que dependen del zoom del navegador para poder leer con comodidad. También perjudica a usuarios que experimentan fatiga visual, presbicia o que utilizan dispositivos con pantallas pequeñas donde el texto predeterminado resulta insuficiente. Cuando el contenido se recorta al aumentar el tamaño, estas personas se encuentran con barreras claras: la información desaparece de la vista sin posibilidad de recuperarla, se dificulta la lectura de textos importantes, se interrumpe la continuidad de tareas como rellenar un formulario o completar una compra, y se genera una sensación de desorientación al no entender si el problema está en la interfaz o en su dispositivo. En casos más severos, el usuario puede quedar completamente bloqueado, ya que ciertos botones o instrucciones necesarias dejan de ser accesibles o visibles.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
No se ha subido ninguna imagen.
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.2.2 Código HTML:
<head>
<meta charset="UTF-8">
<title>Ficha de producto — Accesible</title>
<style>
html {
font-size: 100%; /* base relativa (normalmente 16px) */
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 1rem; /* relativo a la raíz */
margin: 1rem;
line-height: 1.5;
}
.card {
max-width: 25rem; /* ancho máximo relativo */
border: 1px solid #ccc;
padding: 1rem;
box-sizing: border-box;
border-radius: 0.5rem;
}
.title {
font-size: 1.25rem; /* relativo */
font-weight: 600;
margin-bottom: 0.5rem;
}
.description {
font-size: 1rem; /* relativo */
margin: 0;
}
/* Pequeña adaptación para pantallas estrechas */
@media (max-width: 480px) {
body {
margin: 0.5rem;
}
.card {
max-width: 100%; /* ocupa todo el ancho disponible */
}
}
</style>
</head>
<body>
<h1>Catálogo</h1>
<div class="card">
<div class="title">Auriculares inalámbricos Pro X500</div>
<p class="description">
Auriculares con cancelación de ruido activa, hasta 30 horas de batería
y conexión multipunto para cambiar rápidamente entre tus dispositivos.
Incluye funda rígida de transporte y cable USB-C.
</p>
</div>
<p>
Ahora, al aumentar el zoom del navegador al 200%, el texto crece, la tarjeta
aumenta de altura y no se pierde información.
</p>
</body>
Explicación de la solución aplicada:
La solución consiste en diseñar la interfaz de forma flexible, permitiendo que el contenido y el diseño se reajusten de manera natural cuando el usuario amplia el tamaño del texto. Para lograrlo, es fundamental sustituir las unidades absolutas en píxeles por unidades relativas como rem, em o porcentajes, de manera que todos los tamaños escalen adecuadamente. Igualmente, es esencial evitar fijar alturas rígidas en contenedores que alberguen texto, permitiendo que estos se expandan según sea necesario. También debe evitarse el uso indiscriminado de overflow: hidden, ya que puede ocultar contenido crítico cuando las dimensiones cambian. Al aplicar estas medidas, la interfaz responde de forma fluida al aumento del zoom, el texto se hace más grande sin provocar cortes, la información permanece accesible y la página mantiene su funcionalidad y legibilidad, cumpliendo así con el criterio WCAG que exige que el usuario pueda ampliar el contenido sin perder nada por el camino.
