Addaw, ir a inicio Donar

Técnica CSS WCAG 2.2

C35Dejar sitio en textos cortos para que admitan más espaciado

Nombre oficial en el W3C: Permitir el espaciado del texto sin ajuste de línea

En pocas palabras

Algunas personas aumentan el espacio entre letras, palabras y líneas para leer mejor. En textos cortos que no deben partirse, como las opciones de un menú, la caja debe tener hueco de sobra o crecer con el texto. Si no, el texto se corta o se monta encima de otro.

Por qué es importante

Personas con baja visión o con dislexia usan extensiones del navegador que separan letras y palabras. El texto ocupa entonces más ancho.

Si un botón o una pestaña del menú tiene un ancho exacto, la palabra «Contratación» puede quedar cortada en «Contrataci». La persona ya no sabe a dónde lleva ese enlace.

Cómo se hace

  1. Deje que la caja crezca con el texto: use display: inline-block o inline-flex y no fije el ancho.
  2. Si el ancho debe ser fijo, calcúlelo con un 20 % de margen sobre el texto más largo. Por ejemplo, sitio para 24 caracteres si el texto tiene 20.
  3. Mida en unidades relativas al texto, como em, ch o ex, y no en píxeles.
  4. Evite márgenes negativos y overflow: hidden en estos contenedores.
  5. Si los elementos crecen, permita que su contenedor los pase a otra fila con flex-wrap: wrap.

Cómo comprobarlo

  1. Ponga el zoom del navegador al 100 %.
  2. Aplique el espaciado ampliado con un marcador como «Text Spacing Bookmarklet» o una extensión de estilos de usuario. Los valores son: altura de línea 1,5; párrafos 2 veces el tamaño de letra; letras 0,12 y palabras 0,16 veces el tamaño de letra.
  3. Revise menús, botones, pestañas y etiquetas cortas. Ningún texto debe quedar cortado ni encima de otro.
  4. Repita la prueba en la versión de móvil si el diseño cambia.

Ejemplo

Menú cuyas opciones se ensanchan solas cuando aumenta el espacio entre letras.

<style>
  .menu { display: flex; flex-wrap: wrap; gap: .5em; }
  .menu a { display: inline-block; padding: .5em 1em; }
</style>
<nav class="menu">
  <a href="/tramites">Trámites</a>
  <a href="/contratacion">Contratación</a>
  <a href="/contacto">Contacto</a>
</nav>
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 C35 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.

Descripción

El objetivo de esta técnica es permitir que el usuario modifique el espaciado del texto mediante una hoja de estilos de usuario, un bookmarklet, una extensión o una aplicación. Aumentar el espaciado entre párrafos, líneas, palabras y caracteres beneficia a las personas con baja visión o con algunas discapacidades cognitivas. El contenido debe admitir cambios de espaciado sin pérdida de contenido ni de funcionalidad, permitiendo que los elementos que contienen el texto se expandan según sea necesario.

Cuando el texto no está pensado para ajustarse en varias líneas, los autores deberían, o bien:

  • dimensionar los contenedores con un valor mayor que la anchura predeterminada del texto, o bien
  • permitir que los contenedores se expandan en la dirección del texto.

Existe cierta variabilidad en la anchura que alcanzan las palabras o frases al establecer el espaciado entre letras y entre palabras. Si los elementos deben usar una anchura fija, un valor seguro es un 20 % más que la anchura máxima predeterminada. Por ejemplo, si un contenedor de texto pequeño permite 20 caracteres, dejar anchura suficiente para 24 caracteres debería dar espacio bastante para aplicar el espaciado del texto.

Para las cajas que pueden expandirse con el texto, los autores pueden aprovechar el valor inline-block de la propiedad display de CSS y no establecer márgenes negativos, para permitir que se modifique el espaciado del texto.

Ejemplos

Cuando el usuario adapta la página para aumentar el espaciado del texto, el texto cabe dentro de los límites de su caja contenedora.

Se ha utilizado la unidad ex por ser la unidad disponible más cercana a la anchura de un carácter; ex representa la altura de la x de la fuente del elemento (página de MDN sobre las unidades CSS). No es perfecta: los distintos caracteres tienen anchuras predeterminadas diferentes.

Una caja dimensionada con espacio para permitir la expansión

Los contenedores se dimensionan con un valor mayor que la anchura predeterminada del texto.

El CSS

<style>
/* Links are less than 8em wide,
so 10em width of each li allows for expanded letter and word width */
nav li { width: 10em; }
</style>

El HTML

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/contact/">Contact</a></li>
  <ul>
</nav>

Si el elemento de navegación usara contenedores de anchura fija del mismo tamaño, la anchura tendría que admitir un texto un 20 % mayor que la palabra más larga.

Una caja que se expande con el tamaño del texto

El CSS

<style>
/* CSS containers are given a display of inline-block. No negative margins set. */
 nav li { display: inline-block; }
 </style>

El HTML

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/contact/">Contact</a></li>
  <ul>
</nav>

En el caso de contenedores de texto de anchura variable para cada elemento, puede que el elemento padre tenga que permitir que los elementos se ajusten en varias líneas.

Están disponibles los ejemplos prácticos de los ejemplos n.º 1 y n.º 2.

Pruebas

Procedimiento

Para los elementos que contienen texto que no está pensado para ajustarse en varias líneas:

  1. Establecer el nivel de zoom al 100 %.
  2. Usar una herramienta u otro mecanismo para aplicar las métricas de espaciado del texto (altura de línea y espaciado entre párrafos, letras y palabras), como el Text Spacing Bookmarklet o un complemento del navegador de estilos de usuario.
  3. Comprobar que todo el contenido y la funcionalidad siguen disponibles; p. ej., que el texto de los contenedores no queda truncado ni se solapa con otro contenido.

Resultados esperados

  • La comprobación n.º 3 es verdadera.

Cuando una página tiene varias disposiciones (p. ej., en un diseño adaptable), el espaciado del texto debe probarse en cada una de ellas.

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 C35 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.