Técnica CSS WCAG 2.2
C17Hacer que los campos y botones de formulario crezcan al ampliar el texto
Nombre oficial en el W3C: Escalar los elementos de formulario que contienen texto
En pocas palabras
Por defecto, los navegadores no aplican a los campos y botones el tamaño de letra de la página. Si la persona agranda el texto, el resto crece pero lo que escribe en los campos sigue pequeño. Esta técnica usa CSS para que campos de texto, áreas de texto y botones hereden el tamaño de letra y crezcan con él.
Por qué es importante
Una persona con baja visión que amplía el texto al 200 % necesita leer también lo que escribe. Si el campo del DNI o del correo sigue con letra diminuta, no puede revisar si se ha equivocado.
Lo mismo ocurre con el texto de los botones, como «Enviar solicitud». Si no crece, cuesta saber qué hace cada uno.
Cómo se hace
- Haga que los controles hereden la letra:
input, textarea, select, button { font-size: 100%; }ofont: inherit. - Defina el tamaño de la letra del resto de la página con unidades relativas (
%,emorem). - Dé el ancho y el alto de los campos en
em, no en píxeles. Así la caja crece con la letra. - No fije una altura en píxeles en los botones, para que el texto no se corte.
Cómo comprobarlo
- Escriba algo en cada campo de texto del formulario.
- En Firefox, active «Ampliar solo el texto» (menú Ver, Zoom) y amplíe hasta el 200 %.
- Compruebe que el texto escrito, las etiquetas y los botones han crecido igual que el resto.
- Compruebe que nada se corta dentro de los campos ni de los botones.
Ejemplo
Formulario de contacto cuyos campos y botón crecen con el texto de la página.
body { font-size: 100%; }
input, textarea, select, button {
font-size: 100%;
font-family: inherit;
}
input[type="text"], input[type="email"] {
width: 20em;
padding: 0.4em;
}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 C17 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, CSS
Descripción
El objetivo de esta técnica es garantizar que los controles de formulario basados en texto cambien de tamaño cuando se cambia el tamaño del texto en el agente de usuario. Esto permitirá a los usuarios introducir texto y leer lo que han escrito en los campos de entrada, porque el texto se muestra en el tamaño que el usuario necesita.
Los controles de formulario basados en texto incluyen los campos input (text y textarea), así como 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. Todo el texto y los controles de formulario se han implementado de forma escalable.
El 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 autocomplete="given-name" id="fname" name="fname" type="text">
</div>
<div>
<label for="lname">Last Name</label>
<input autocomplete="family-name" id="lname" name="lname" type="text">
</div>
<div>
<label for="phone">Telephone</label>
<input autocomplete="tel" id="phone" name="phone" type="text">
</div>
<div>
<label for="email">Email</label>
<input autocomplete="email" id="email" name="email" type="text">
</div>
<input id="submit" name="submit" type="submit" value="Submit">El componente CSS
h1 { font-size: 2em; }
p, label { font-size: 1em; }
label { display:block; }
input { font: inherit; }
div { margin-bottom: 1rem; }Ejemplo funcional de este código: Ejemplo de cambio de tamaño de campos de entrada con CSS.
Pruebas
Procedimiento
- Introducir texto en los controles de formulario basados en texto que reciben texto escrito por el usuario.
- Aumentar el tamaño del texto del contenido al 200 %.
- Comprobar que el texto de los controles de formulario basados en texto ha aumentado al 200 %.
Resultados esperados
- La comprobación n.º 3 es verdadera.
Cómo lo comprobamos en ADDAW
En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica C17 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.