Addaw, ir a inicio Donar

Técnica Técnicas generales WCAG 2.2

G178Ofrecer botones para agrandar y reducir el texto de la página

Nombre oficial en el W3C: Proporcionar en la página web controles que permitan a los usuarios cambiar de forma progresiva el tamaño de todo el texto de la página hasta el 200 por ciento

En pocas palabras

La web incluye controles propios, como «A+» y «A-», para aumentar o reducir el tamaño del texto paso a paso. Deben permitir llegar al menos al doble del tamaño normal sin que se pierda contenido. Es una ayuda para quien no sabe usar el zoom del navegador.

Por qué es importante

Muchas personas con baja visión no usan programas de ampliación y no conocen el zoom del navegador. Es frecuente en personas mayores que han empezado a usar el ordenador tarde y que ven peor con la edad.

Unos botones visibles en la propia página les permiten leer sin pedir ayuda. También sirven en webs antiguas cuyo texto no crece bien con el navegador.

Cómo se hace

  1. Coloque los controles en un lugar fácil de encontrar, por ejemplo arriba de la página, con buen contraste y tamaño suficiente.
  2. Use botones o enlaces con un nombre claro: «Aumentar texto» y «Reducir texto». Si usa iconos, añada un texto alternativo.
  3. Haga que cada pulsación cambie el tamaño de todo el texto de la página, no solo de una parte.
  4. Permita llegar como mínimo al 200 % del tamaño original y volver al tamaño normal.
  5. Use unidades relativas en el CSS para que el diseño se adapte y nada se corte ni se superponga al agrandar.

Cómo comprobarlo

  1. Use una ventana de al menos 1024 × 768 píxeles.
  2. Pulse el control de aumentar y compruebe que el texto crece.
  3. Siga pulsando hasta llegar al doble del tamaño original.
  4. Compruebe que no hay textos cortados, cajas superpuestas ni controles separados de sus etiquetas.
  5. Vuelva al tamaño normal y compruebe que el texto recupera su tamaño inicial.

Ejemplo

Dos botones cambian el tamaño de letra base y todo el texto, definido en rem, crece o se reduce con él.

<button type="button" onclick="cambiarTexto(1)">Aumentar texto</button>
<button type="button" onclick="cambiarTexto(-1)">Reducir texto</button>
<script>
  let nivel = 0; // de 0 a 4: 100 % a 200 %
  function cambiarTexto(paso) {
    nivel = Math.min(4, Math.max(0, nivel + paso));
    document.documentElement.style.fontSize = (100 + nivel * 25) + '%';
  }
</script>
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 G178 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

Todas las tecnologías.

Descripción

El propósito de esta técnica es proporcionar en la página web un mecanismo para aumentar de forma progresiva el tamaño del texto. Muchas personas con baja visión no utilizan software de magnificación y es posible que no conozcan los ajustes de tamaño de texto de su navegador. Esto puede ser especialmente cierto en el caso de personas mayores que se están iniciando en la informática a una edad avanzada y que pueden estar experimentando una pérdida de visión asociada a la edad. También puede ocurrir con algunas personas con discapacidad cognitiva que necesitan un tamaño de letra mayor.

Esta técnica proporciona un mecanismo que a algunos usuarios les resultará más fácil de usar. El mecanismo puede consistir en enlaces o botones que cambien la presentación visual a una hoja de estilos diferente, o en scripts que modifiquen el tamaño del texto de forma dinámica.

Para aplicar esta técnica, el autor proporciona controles que permiten al usuario aumentar o reducir de forma progresiva el tamaño de todo el texto de la página hasta un tamaño del 200 % respecto al tamaño de texto predeterminado.

Esto puede lograrse mediante enlaces, botones o imágenes enlazadas, y los propios controles deben ser lo más fáciles de encontrar posible (p. ej., situados en un lugar destacado de la página, presentados con un tamaño de texto mayor, con alto contraste, etc.).

Esta técnica también puede utilizarse en circunstancias en las que no es posible usar tipografías escalables, como en situaciones con código heredado.

Esta técnica puede usarse en combinación con una técnica de cambio de estilos para presentar una página que sea una versión alternativa conforme de un contenido no conforme. Para más información, consulte C29: Usar un selector de estilos para proporcionar una versión alternativa conforme y Comprender las versiones alternativas conformes.

Ejemplos

  • Un artículo de periódico tiene dos botones cerca de la parte superior de la página. El botón «aumentar el tamaño del texto» muestra una letra «T» grande con una flecha hacia arriba y el botón «reducir el tamaño del texto» muestra una letra «T» pequeña con una flecha hacia abajo. Cada botón tiene un texto alt.
  • Un sitio dispone de varias hojas de estilo con distintos tamaños de texto. El usuario puede elegir cualquiera de las hojas de estilo si su navegador ofrece esta funcionalidad. Además, cada página incluye los enlaces «Aumentar el tamaño del texto» y «Reducir el tamaño del texto», que cambian la hoja de estilos aplicada en ese momento por la hoja de estilos alternativa correspondiente.
  • Un sitio incluye en todas las páginas web el texto «Cambiar el tamaño del texto:» seguido de los enlaces de texto «Subir» y «Bajar». Los enlaces ejecutan un JavaScript que modifica el valor de la propiedad de tamaño de texto en consecuencia.
  • Un sitio incluye en todas las páginas un enlace que dice «Cambiar el tamaño del texto». La página resultante incluye una serie de enlaces con opciones que representan los tamaños disponibles. Los enlaces dicen «Tamaño de letra mínimo», «Tamaño de letra pequeño», «Tamaño de letra predeterminado», «Tamaño de letra grande», etc. Unas instrucciones que preceden a la lista indican a los usuarios que elijan un enlace para cambiar al tamaño de letra deseado.

Pruebas

Procedimiento

  1. Ajustar el tamaño de la ventana gráfica (viewport) a 1024 px por 768 px o más.
  2. Aumentar el tamaño del texto y comprobar si el tamaño del texto ha aumentado.
  3. Comprobar que el tamaño del texto puede aumentarse hasta el 200 % del tamaño original.
  4. Comprobar que, tras aumentar el tamaño del texto al 200 % del tamaño original, no hay pérdida de contenido ni de funcionalidad (p. ej., ninguna parte del texto queda recortada, las cajas no se superponen, los controles no quedan ocultos ni separados de sus etiquetas, etc.).
  5. Reducir el tamaño del texto hasta su valor predeterminado y comprobar si efectivamente ha vuelto al tamaño predeterminado.

Resultados esperados

  • Las comprobaciones n.º 2, n.º 3, n.º 4 y n.º 5 son verdaderas.

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.

Solicitar una auditoría

Basado en la técnica G178 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.