TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Las personas usuarias con dislexia o discapacidad cognitiva a menudo utilizan extensiones del navegador para forzar el interlineado (line-height) a 1.5, y separar las letras y párrafos. Si tu CSS declara cajas con altura en píxeles fijos (height: 100px), el texto engordará, se superpondrá y se volverá ilegible.
La resistencia al ecosistema de la persona usuaria
La WCAG 1.4.12 (Espaciado del Texto) es una prueba de fuego para los maquetadores. Tu sitio debe sobrevivir intacto si una persona usuaria inyecta unilateralmente: Altura de línea x 1.5, Espacio entre párrafos x 2, Espacio entre letras (0.12em) y Espacio entre palabras (0.16em).
El patrón erróneo: Código Accesible Deficiente
Cajas rígidas y alturas de línea declaradas en unidades absolutas inalterables.
/* MAL: Diseño frágil que no soporta mutaciones de volumen */
.news-card {
height: 250px; /* El texto modificado desbordará la caja */
}
.news-card p {
line-height: 18px;
}La Solución Accesible: Código Recomendado
Evitar la propiedad height explícita. Usar min-height si es necesario, y declarar el espaciado interno en valores multiplicadores adimensionales o relativos.
/* BIEN: Cajas elásticas y espaciado proporcional */
.news-card {
min-height: 15rem;
height: auto; /* Crece orgánicamente con el texto */
}
.news-card p {
line-height: 1.5; /* Sin unidad, actúa como multiplicador del font-size */
letter-spacing: 0.05em;
}Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Inyectar una hoja de estilos personalizada (bookmarklet de Text Spacing) que aumente line-height a 1.5×, letter-spacing a 0.12em, word-spacing a 0.16em y paragraph-spacing a 2×. Verificar que ningún contenido se superponga, se recorte o se vuelva ilegible tras la inyección.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, seleccionar el elemento afectado en el panel Elements, luego abrir la pestaña Accessibility. Verificar que las propiedades Role, Name y State reflejen correctamente la intención del componente según el criterio WCAG 1.4.12.
Herramientas Automatizadas
Ejecutar Axe DevTools o WAVE sobre la vista afectada. Buscar violaciones relacionadas con el criterio WCAG 1.4.12. Complementar con una auditoría manual para los aspectos que las herramientas automatizadas no pueden verificar (interacción dinámica, calidad del contenido).
