Addaw, ir a inicio Donar

Técnica CSS WCAG 2.2

C33Partir las URL y palabras muy largas para que no se salgan de la pantalla

Nombre oficial en el W3C: Permitir que las URL largas se partan para que el contenido se reajuste (reflow)

En pocas palabras

Una dirección web larga o una palabra sin espacios no se puede cortar de forma natural. Al ampliar la página, sobresale y obliga a desplazarse de lado. Con la propiedad CSS overflow-wrap se permite partirla en varias líneas.

Por qué es importante

Al ampliar al 400 %, una sola URL larga, como el enlace a un PDF de una convocatoria, puede ensanchar toda la página. Aparece una barra horizontal y el resto del texto queda fuera de la vista.

Esto afecta sobre todo a personas con baja visión y a quien consulta la web en un móvil.

Cómo se hace

  1. Siempre que se pueda, use un texto de enlace legible («Bases de la convocatoria (PDF)») en lugar de mostrar la URL completa.
  2. Si la URL debe verse, aplique overflow-wrap: break-word al texto que la contiene.
  3. Añada también word-wrap: break-word, que es el nombre antiguo de la misma propiedad, para navegadores viejos.
  4. Aplíquelo también a códigos largos, números de expediente o direcciones de correo en tablas y tarjetas estrechas.

Cómo comprobarlo

  1. Busque en la página textos largos sin espacios: URL, correos, códigos.
  2. Abra la página en una ventana de 1280 píxeles de ancho y amplíe al 400 %.
  3. Compruebe que esos textos se parten en varias líneas.
  4. Confirme que no aparece barra de desplazamiento horizontal.

Ejemplo

Párrafo con la dirección completa de un documento, que se parte cuando no cabe.

<style>
  .enlace-largo { overflow-wrap: break-word; word-wrap: break-word; }
</style>
<p class="enlace-largo">
  Descargue las bases en
  <a href="/docs/convocatoria-ayudas-2026-bases-reguladoras.pdf">https://www.ejemplo.es/docs/convocatoria-ayudas-2026-bases-reguladoras.pdf</a>
</p>
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 C33 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

CSS y HTML.

Descripción

Las cadenas largas de caracteres sin espacios, como las URL mostradas como contenido, pueden romper el reajuste (reflow) cuando se amplía la página. El objetivo de esta técnica es presentar las URL sin introducir una barra de desplazamiento horizontal a un ancho equivalente a 320 píxeles CSS, ni una barra de desplazamiento vertical a una altura equivalente a 256 píxeles CSS. Esto se consigue mediante técnicas CSS que se adaptan al espacio disponible en la ventana gráfica (viewport). Nota: usar un texto de enlace legible para las personas, en lugar de una URL larga, es mejor para la usabilidad y la accesibilidad.

Por defecto, la mayoría de los navegadores parten las URL largas en los siguientes caracteres:

  • "&" Ampersand (et)
  • "/" Barra
  • "-" Guion
  • "?" Signo de interrogación

A veces estos no bastan para garantizar que las URL largas no desborden la ventana gráfica.

Ejemplos

Partir URL largas

Usar el siguiente CSS hará que las URL largas se partan en los lugares adecuados (guiones, barras, etc.) y dentro de las palabras sin romper el reajuste.

Lista de declaraciones CSS usadas y motivo de su uso:

  • overflow-wrap: break-word: permite partir las palabras y saltar de línea dentro de ellas.
  • word-wrap: break-word: permite partir las palabras y saltar de línea dentro de ellas.
a {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

Ejemplo funcional

Pruebas

Procedimiento

Para las cadenas de texto de más de 320px de ancho, comprobar:

  1. Mostrar la página web en un agente de usuario capaz de ampliar al 400 % y establecer las dimensiones de la ventana gráfica (en píxeles CSS) en 1280 de ancho y 1024 de alto.
  2. Ampliar al 400 %.
  3. Para el contenido que se lee horizontalmente, comprobar que todo el contenido y la funcionalidad están disponibles sin desplazamiento horizontal.
  4. Para el contenido que se lee verticalmente, comprobar que todo el contenido y la funcionalidad están disponibles sin desplazamiento vertical.

Si el navegador no es capaz de ampliar al 400 %, puede reducir el ancho del navegador de forma proporcional. Por ejemplo, con un zoom del 300 % la ventana gráfica debería tener 960px de ancho.

Resultados esperados

Las comprobaciones n.º 3 y n.º 4 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 C33 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.