Introducción

Ocultar visualmente los títulos de los widgets en WordPress puede ser deseable por motivos de diseño, pero hacerlo incorrectamente puede romper la accesibilidad para usuarios que dependen de lectores de pantalla o de la navegación por teclado. En este artículo explico, con todo lujo de detalles, cómo ocultar títulos de widgets de forma segura para mantener la accesibilidad: técnicas CSS modernas y probadas, ejemplos prácticos para WordPress y recomendaciones de pruebas y buenas prácticas.

El problema y principios básicos

Muchos desarrolladores eliminan títulos simplemente con display:none o visibility:hidden, o añaden aria-hidden=true. Esas técnicas ocultan el contenido tanto visualmente como a las tecnologías de asistencia, lo que perjudica la experiencia de usuarios que necesitan la estructura y la información de los títulos. El objetivo aquí es:

• Ocultar visualmente el título para usuarios que ven la pantalla.
• Conservar el título en el DOM para que los lectores de pantalla y la navegación por teclado sigan teniendo sentido.

La técnica recomendada: clases screen-reader-text / sr-only

La práctica estándar accesible consiste en aplicar una clase que haga que el texto sea visualmente invisible pero disponible para lectores de pantalla. La clave es usar un CSS que:

• saque el elemento del flujo visual sin eliminarlo del árbol DOM
• evite romper el reflujo, el zoom, el modo alto contraste o la impresión por defecto
• permita que el texto vuelva a ser visible cuando recibe foco (útil cuando el título contiene enlaces o puede ser focusable).

CSS recomendado (moderno y compatible)

.screen-reader-text {
  position: absolute !important
  height: 1px
  width: 1px
  overflow: hidden
  clip: rect(1px, 1px, 1px, 1px) / compatibilidad antigua /
  clip-path: inset(50%)           / forma moderna /
  white-space: nowrap
  border: 0
  padding: 0
  margin: -1px
}

/ Restaurar visibilidad si el elemento recibe foco (útil para accesibilidad teclado) /
.screen-reader-text:focus,
.screen-reader-text:active {
  position: static !important
  height: auto
  width: auto
  clip: auto
  clip-path: none
  white-space: normal
  margin: 0
}

/ Asegura que el texto esté visible al imprimir /
@media print {
  .screen-reader-text {
    position: static !important
    height: auto
    width: auto
    clip: auto
    clip-path: none
    overflow: visible
    white-space: normal
  }
}

Explicación de las propiedades clave

• position: absolute dimensiones mínimas: saca el elemento del flujo y lo reduce visualmente.
• clip y clip-path: recortan la zona visible clip-path: inset(50%) es la opción moderna.
• overflow: hidden y white-space: nowrap: evitan que se muestre contenido adicional ni roturas de línea invisibles.
• margin: -1px: garantiza que no ocupe espacio visual.
• Regla :focus/:active: permite que el texto vuelva a mostrarse si recibe foco con el teclado, lo cual es importante para enlaces o controles focusables.
• @media print: muestra el texto en impresiones, donde normalmente queremos conservar el contenido.

Aplicarlo en WordPress: opciones prácticas

Hay varias formas de aplicar la clase accesible a los títulos de widgets. Las dos más comunes y seguras son:

• Agregar la clase CSS a la plantilla CSS del tema y, en el título del widget, envolver el texto en un elemento con esa clase (idealmente manteniendo la etiqueta semántica de encabezado, por ejemplo lth2 class=widget-titlegtltspan class=screen-reader-textgtTítulolt/spangtlt/h2gt).
• Usar un filtro en functions.php para transformar determinados títulos automáticamente (por ejemplo, usar un prefijo especial en el texto del título para indicar que debe ocultarse visualmente).

Ejemplo: comportamiento automático con un prefijo (sr:)

La idea: si un administrador escribe el título del widget comenzando por sr:, el código en functions.php envolverá el texto restante en una etiqueta con la clase .screen-reader-text. Así se puede decidir qué títulos ocultar sin tocar plantillas.

 . esc_html( texto ) . 
    }
    return title
}
add_filter( widget_title, mi_ocultar_titulo_widget, 10, 3 )
?>

Notas sobre este enfoque:

• La mayoría de los themes imprimen el título dentro de una etiqueta semántica (lth2gt / lth3gt). Al devolver solo el texto envuelto en un ltspangt, se mantiene la estructura de encabezados en el HTML.
• Usa esc_html() para evitar inyecciones XSS si el contenido del título proviene del administrador.
• Si tu theme imprime el título sin envoltorio (poco común), deberás adaptar la lógica para mantener la semántica.

Alternativa: añadir una clase CSS desde el filtro

Si prefieres que el markup del título mantenga su texto visible pero con una clase en la etiqueta de encabezado (por ejemplo lth2 class=widget-title sr-hiddengtTítulolt/h2gt), puedes filtrar el marcado que rodea al título o usar las acciones before/after según el theme. La forma exacta depende del tema el ejemplo anterior (envolver el texto) es más portátil.

Ocultar títulos solo en áreas concretas (ejemplo: barra lateral)

Puedes aplicar la clase CSS a títulos en zonas concretas usando los selectores de tu theme (por ejemplo la clase .sidebar o el ID del widget). Por ejemplo:

/ Oculta visualmente los títulos solo en la barra lateral /
.sidebar .widget .widget-title {
  / En vez de ocultar toda la etiqueta, envolvemos el texto en .screen-reader-text.
     Si no puedes cambiar HTML, aquí un equivalente que no rompe lectores: /
  position: relative
  color: transparent / visible a screen readers, invisible visualmente /
  text-shadow: none
  pointer-events: none / evita interacción accidental /
}

Sin embargo, la técnica CSS pura que cambia color a transparent puede producir algunos efectos no deseados (por ejemplo en modo alto contraste o impresión). Por eso es preferible usar el patrón .screen-reader-text sobre el contenido textual real.

Qué NO hacer

• No usar display:none o visibility:hidden si quieres que el contenido siga disponible para lectores de pantalla.
• No usar aria-hidden=true en algo que debería ser leído por tecnologías de asistencia.
• No eliminar el título del DOM sin ofrecer alternativa semántica (p. ej., si quitas un encabezado, la estructura de encabezados de la página puede quedar rota).

Consideraciones adicionales y buenas prácticas

• Mantén la semántica: si el título del widget es un encabezado (h2/h3), conserva la etiqueta y oculta solo el texto interno. Así se respetan los niveles de encabezado para usuarios de lectores de pantalla.
• Haz que sea focusable si tiene enlaces: si el título contiene un enlace o control, asegúrate de que pueda recibir foco y que tu CSS de .screen-reader-text permita mostrarlo al enfocarlo (.screen-reader-text:focus).
• Impresión: recuerda la regla @media print para mostrar títulos en la versión impresa si corresponde.
• Compatibilidad: combina clip (retrocompatible) con clip-path para soporte tanto en navegadores antiguos como modernos.
• Documenta la convención: si usas prefijos como sr: documenta esa convención para que el equipo de contenido lo sepa.

Cómo probar que sigue siendo accesible

1. Prueba con lector de pantalla (NVDA en Windows, VoiceOver en macOS/iOS): navega por la página y verifica que los títulos ocultos se anuncian en el orden esperado.
2. Prueba navegación por teclado: tabula y asegúrate de que elementos focusables dentro del widget sean accesibles si el título es un enlace, asegúrate de que pueda recibir foco.
3. Usa herramientas automáticas: Lighthouse, Axe o el auditor de accesibilidad de Chrome DevTools para detectar problemas comunes.
4. Revisa impresión (Ctrl P) para verificar que el contenido relevante aparece si procede.
5. Prueba en modo alto contraste y con zoom al 200% para asegurarte de que no dependes de colores que oculten información.

Resumen y recomendaciones finales

Para ocultar títulos de widgets en WordPress sin sacrificar accesibilidad: usa una clase CSS que haga el texto visualmente invisible pero mantenlo en el DOM y asegúrate de permitir que se muestre al recibir foco o al imprimir. Implementa la mecánica vía CSS global y, si quieres comodidad, añade un filtro en functions.php que permita marcar títulos que deben ocultarse (p. ej. con el prefijo sr:). Evita display:none, visibility:hidden y aria-hidden en elementos que deben ser accesibles.

Recuerda

• Ocultar visualmente no debe significar borrar semántica.
• Documenta cualquier convención en el equipo editorial.
• Prueba con usuarios reales o con herramientas de accesibilidad para validar los cambios.