CSS accesible: ocultación, contenido generado, reflow y orden visual

El CSS parece inocuo para la accesibilidad: solo cambia el aspecto. Pero «el aspecto» incluye decisiones que afectan de lleno a las tecnologías de apoyo: qué se oculta y para quién, qué contenido se inyecta desde la hoja de estilos, cómo se reorganiza la página al ampliarla y en qué orden aparecen las cosas. Esta lección reúne las técnicas de CSS que debes dominar para no deshacer con estilos lo que hiciste bien en el HTML.

Tres formas de ocultar, tres resultados distintos

Hay que distinguir siempre a quién queremos ocultar algo: a todo el mundo, solo a quien ve la pantalla, o solo a las tecnologías de apoyo.

La clase de ocultación accesible (llamada visually-hidden, sr-only o a11y-hidden según la librería) es la herramienta para texto que solo necesita el lector de pantalla: el «Leer más sobre…» que completa un enlace, el encabezado de una sección que el diseño no muestra, el texto de un botón de icono. Su versión robusta actual:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.visually-hidden:focus-visible {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

La segunda regla hace que un elemento enfocable con esa clase (un enlace de salto) se muestre al recibir el foco; sin ella, el elemento recibiría el foco sin verse (un foco fantasma que incumple 2.4.7).

.oculto { display: none; } /* en el label de un campo */
.sr-only { font-size: 0; }   /* algunos lectores no leen texto de tamaño 0 */
.sr-only { color: transparent; } /* sigue ocupando espacio y es seleccionable */

Contenido generado con ::before y ::after

El texto insertado con content en pseudoelementos sí llega al árbol de accesibilidad en los navegadores actuales y los lectores lo leen. Eso tiene dos consecuencias. La primera: los iconos de fuentes tipográficas insertados así (content: "\e901") se anuncian como caracteres extraños o como letras sueltas; hay que marcarlos con aria-hidden="true" en el elemento o usar la sintaxis de texto alternativo content: "\e901" / "", soportada ya en la mayoría de los navegadores. La segunda: nunca pongas información imprescindible solo en content (un asterisco de «obligatorio», un «Nuevo» junto a un título), porque no todas las combinaciones de navegador y tecnología de apoyo lo exponen igual, algunos modos de lectura y extensiones lo descartan, y no se traduce ni se puede seleccionar. Si es información, va en el HTML.

Reflow y unidades

El criterio 1.4.10 Reajuste de los elementos (AA) exige que el contenido se pueda presentar sin desplazamiento en dos dimensiones a 320 píxeles CSS de ancho (equivalente a un escritorio de 1.280 píxeles al 400 % de zoom), salvo el contenido que requiera dos dimensiones por naturaleza (mapas, tablas de datos, diagramas). Y 1.4.4 Cambio de tamaño del texto exige que el texto pueda ampliarse al 200 % sin pérdida de contenido ni funcionalidad. En CSS esto se traduce en:

• Diseño fluido con media queries, Grid y Flexbox; sin anchos fijos en píxeles para contenedores de texto.
• Tamaños de fuente en rem o em mejor que en px, para que respeten el tamaño base que la persona configure en el navegador. Las media queries también en em.
• Alturas mínimas (min-height) en lugar de alturas fijas (height) en cajas con texto, para que el texto ampliado no se desborde ni se corte.
• Nada de overflow: hidden en contenedores de texto sin un motivo claro.
• Las tablas, en un contenedor con desplazamiento horizontal propio, como vimos en el primer curso.

El criterio 1.4.12 Espaciado del texto (AA) añade que la página debe seguir funcionando si la persona fuerza interlineado 1,5, espacio tras los párrafos de 2 veces el tamaño de letra, entre letras 0,12 em y entre palabras 0,16 em. Las alturas mínimas y la ausencia de recortes son, de nuevo, la clave.

/* Incorrecto: se rompe al ampliar el texto */
.tarjeta { width: 300px; height: 120px; font-size: 14px; overflow: hidden; }

/* Correcto: crece con el contenido y respeta las preferencias */
.tarjeta { max-width: 20rem; min-height: 7.5rem; font-size: 0.875rem; }
@media (max-width: 40em) { .tarjeta { max-width: 100%; } }

Orden visual frente a orden del DOM

Flexbox y Grid permiten reordenar visualmente con order, flex-direction: *-reverse, grid-area o grid-auto-flow: dense. El foco del teclado y el lector de pantalla siguen el DOM, de modo que cualquier reordenación visual crea una discrepancia que afecta a 1.3.2 Secuencia significativa y 2.4.3 Orden del foco. Regla: reordena en el DOM, no en el CSS. Las excepciones aceptables son reordenaciones que no afectan al significado ni a la operación (por ejemplo, cambiar la posición de una imagen decorativa respecto al texto en móvil). Si usas order para algo más que eso, recorre la zona con Tab y comprueba que el salto no desorienta.

Otras reglas de CSS que afectan a la accesibilidad

• Foco: nunca outline: none sin un sustituto en :focus-visible (curso de teclado; en la lección siguiente verás cómo programar un indicador robusto).
• Contraste: los colores en CSS deben cumplir 4,5:1 para texto normal y 3:1 para texto grande y componentes (1.4.3, 1.4.11); los placeholders grises claros son el fallo más común.
• Modo de contraste forzado: en Windows, el modo de alto contraste sustituye los colores. Usa @media (forced-colors: active) para asegurar que los bordes de los controles y los indicadores de foco siguen visibles, y forced-color-adjust: none solo cuando el color sea información (muestras de color). Lo verás a fondo en la lección «Preferencias del usuario en CSS».
• Cursor y puntero: cursor: pointer en algo que no es interactivo engaña al usuario de ratón; pointer-events: none en algo enfocable crea un control que se enfoca pero no se pulsa.
• Texto en mayúsculas: text-transform: uppercase suele ser preferible a escribir en mayúsculas en el HTML, porque el texto original se conserva (al copiarlo, al traducirlo y en muchos lectores), aunque algunos navegadores exponen el texto ya transformado y algún lector puede deletrear palabras cortas; además, reduce la legibilidad en textos largos.
• Hover solamente: cualquier información que aparezca con :hover debe aparecer también con :focus-visible o :focus-within.

Resumen

• Elige la técnica de ocultación según a quién quieras ocultar: display:none/hidden (todos), visually-hidden (solo visual), aria-hidden (solo tecnologías de apoyo).
• El contenido de ::before y ::after se lee; oculta los iconos y no pongas información imprescindible solo ahí.
• Unidades relativas, alturas mínimas y diseño fluido garantizan 1.4.4, 1.4.10 y 1.4.12; comprueba a 320 píxeles o al 400 %.
• Reordena en el DOM, no con order ni grid-area, para respetar 1.3.2 y 2.4.3.
• Cuida el foco, el contraste, el modo de colores forzados y que lo que aparece con :hover aparezca también con el foco.