Técnica CSS WCAG 2.2
C33Permitir que las URL largas se partan para que el contenido se reajuste (reflow)
En resumen
Las URL u otras cadenas largas sin espacios pueden desbordar la ventana y obligar a desplazarse horizontalmente al ampliar la página. Esta técnica usa las propiedades CSS overflow-wrap y word-wrap para que esas cadenas se partan y el contenido se reajuste. Beneficia a quien usa zoom o pantallas estrechas. Úsela cuando muestre URL completas como texto y necesite cumplir el criterio 1.4.10 Reajuste de elementos.
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;
}Pruebas
Procedimiento
Para las cadenas de texto de más de 320px de ancho, comprobar:
- 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.
- Ampliar al 400 %.
- Para el contenido que se lee horizontalmente, comprobar que todo el contenido y la funcionalidad están disponibles sin desplazamiento horizontal.
- 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 las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica C33 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
