El texto debe seguir siendo legible con un espaciado de texto mayor
Muchas personas con dislexia o baja visión usan una extensión del navegador que añade espacio entre líneas, palabras y letras. Cuando los botones, las etiquetas y los menús tienen una altura fija, sus textos se cortan, y los clientes ya no pueden leer los precios, las tallas ni el texto del botón para finalizar la compra.
- ID de la regla
- vs-text-spacing
- Origen
- Comprobación de Validiscan
- Impacto
- Moderado
- Nivel de corrección
- ASSISTED
- en Shopify, Shopware, WooCommerce y Magento
- Estado
- se ejecuta
Qué hace la comprobación
Aplica los ajustes de espaciado de texto de las WCAG (interlineado de 1,5, espaciado entre párrafos de 2, espaciado entre letras de 0,12 y entre palabras de 0,16 veces el tamaño de la fuente) y detecta el texto que queda recortado, se superpone o desaparece (1.4.12).
La comprobación congela las transiciones CSS, mide la página, inyecta los estilos de espaciado y vuelve a medir. El espaciado entre párrafos se aplica a los elementos p como margin-bottom: 2em. Mide cada línea de texto, no la caja del elemento, en hasta 1500 elementos con texto propio.
Un texto se notifica cuando sus líneas sobrepasan ahora en más de 4 px una caja cuyo overflow es hidden o clip, o cuando ahora se solapan en más de 4 px en ambas direcciones con el texto de otro elemento, con una imagen o con un input. El desbordamiento dentro de una caja desplazable no cuenta, como tampoco el texto ya truncado u oculto visualmente. Las capas fijas o sticky nunca se comparan con el contenido que se desplaza por debajo de ellas.
Una tercera medición sin los estilos ya no debe mostrar el problema, así que un carrusel que se movió por sí solo queda descartado. Se ejecuta en cada viewport escaneado, que de forma predeterminada tiene 1440 o 390 px de ancho, y notifica como máximo 15 elementos por página y viewport. El texto en SVG, canvas, textarea y select no se mide.
Cómo corregirlo
Evite las alturas fijas y overflow: hidden en los elementos que contienen texto; use min-height y padding para que los botones, las etiquetas y los elementos de menú crezcan con su contenido.
Criterios de conformidad de las WCAG
- 1.4.12 Text Spacing, nivel AA
Apartados de la norma EN 301 549
| Criterio de las WCAG | Versión 3.2.1 | Versión 4.1.1 |
|---|---|---|
| 1.4.12 | 9.1.4.12 | 9.1.4.12 |
Empiece con una revisión gratuita de su tienda.
Envíe la dirección de su tienda. Validiscan la escanea y le responde con cada fallo que el escaneo pueda demostrar, con la página y el código.
Solicitar revisión gratuitaO escriba a info@validiscan.com.
Qué cubre la revisión gratuita y qué deja fuera- Usted envía
- la dirección de su tienda
- Páginas escaneadas
- hasta 15
- Usted recibe
- todos los fallos que el escaneo puede demostrar, con la página y el código
- En su tienda
- solo páginas públicas; sin inicio de sesión, nada comprado, ningún formulario enviado
- Lo que no es
- una auditoría completa