Addaw, ir a inicio Donar

Fallo común WCAG 2.2

F80Campos de formulario que no crecen al agrandar el texto

Nombre oficial en el W3C: Fallo del criterio de conformidad 1.4.4 cuando los controles de formulario basados en texto no cambian de tamaño al ampliar el texto hasta el 200 %

En pocas palabras

Algunas personas agrandan el texto de las webs para poder leerlas. El fallo ocurre cuando el texto de la página crece, pero el de los campos y botones del formulario no. Suele pasar porque su letra tiene un tamaño fijo en píxeles o puntos, o porque no sigue el tamaño de la página.

Por qué es importante

Las personas con baja visión suelen aumentar el tamaño de letra del navegador. Si las etiquetas crecen y los campos no, pueden leer la pregunta, pero no lo que escriben. No pueden revisar si han escrito bien su DNI, su teléfono o su correo.

También les cuesta leer los botones, como «Enviar» o «Pedir cita». El criterio 1.4.4 pide que todo el texto pueda ampliarse hasta el 200 % sin perder contenido ni funciones.

Cómo evitarlo

  1. Defina la letra de los campos con unidades relativas: rem, em o %. Evite px y pt en la letra de los controles.
  2. Haga que los controles usen la misma letra que la página. Por defecto, los navegadores les ponen un tamaño propio que no sigue al resto. La regla font-family: inherit junto a un tamaño en rem lo corrige.
  3. Aplíquelo a input, textarea, select y button.
  4. Evite altos y anchos fijos en píxeles que corten el texto ampliado. Use padding y medidas en em.

Cómo comprobarlo

  1. Escriba algo en cada campo de texto del formulario.
  2. Duplique el tamaño de letra del navegador, de 16 a 32. En Chrome está en Configuración, Aspecto, Personalizar fuentes. En Firefox, en Ajustes, General, Tipografía.
  3. Vuelva al formulario. Compruebe que la letra de los campos y botones ha crecido igual que la del resto de la página.
  4. Compruebe que lo escrito se lee completo y no queda cortado.

Ejemplo

Con un tamaño en puntos, la letra de los campos no crece; con rem y la letra heredada, sí.

/* Error: tamaño fijo que no sigue al texto ampliado */
input { font-size: 12pt; }

/* Correcto: misma letra que la página y tamaño relativo */
input, textarea, select, button {
  font-family: inherit;
  font-size: 1rem;
}
Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica F80 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

HTML y CSS

Descripción

El objetivo de esta condición de fallo es describir un problema que se produce cuando cambiar el tamaño del texto no hace que los controles de formulario basados en texto cambien de tamaño en consecuencia. Esto significa que el usuario puede tener dificultades para introducir texto y para leer lo que ha introducido, porque el texto no se muestra con el tamaño que necesita.

Los controles de formulario basados en texto incluyen los cuadros de entrada (text y textarea) y también los botones.

Ejemplos

Un formulario de contacto

Un formulario de contacto tiene cierta información introductoria y, a continuación, controles de formulario para que los usuarios introduzcan su nombre, apellidos, número de teléfono y dirección de correo electrónico. El encabezado, el texto introductorio y las etiquetas de los controles de formulario se han implementado de forma escalable, pero los propios controles de formulario no.

El componente HTML:

<h1>Contact Us</h1>
<p>Please provide us with your details and we will contact you as soon as we can.
   Note that all of the form fields are required.</p>
<div>
  <label for="fname">First Name</label>
  <input type="text" name="fname" id="fname">
</div>
<div>
  <label for="lname">Last Name</label>
  <input type="text" name="lname" id="lname">
</div>
<div>
  <label for="phone">Telephone</label>
  <input type="text" name="phone" id="phone">
</div>
<div>
  <label for="email">Email</label>
  <input type="text" name="email" id="email">
</div>  
<input type="submit" name="Submit" value="Submit" id="Submit">

El componente CSS:

h1 { font-size: 2em; }
p, label { font-size: 1em; }
input {font-size: 12pt;}

Pruebas

Procedimiento

  1. Introducir texto en los controles de formulario basados en texto que reciben texto escrito por el usuario.
  2. Aumentar el tamaño del texto del contenido en un 200 %.
  3. Comprobar que el texto de los controles de formulario basados en texto ha aumentado en un 200 %.

Resultados esperados

  • Si la comprobación n.º 3 es falsa, se da la condición de fallo y el contenido falla estos criterios de conformidad.

Cómo lo comprobamos en ADDAW

Este error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.

Solicitar una auditoría

Basado en la técnica F80 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.