Introducción

Quitar el subrayado de enlaces dentro de botones en WordPress es una petición habitual de diseño. Sin embargo, hacerlo de forma inapropiada puede romper la accesibilidad: perder la indicación visual del foco para usuarios de teclado, perjudicar el contraste o eliminar la pista para usuarios con baja visión. Este artículo explica, paso a paso y con ejemplos listos para usar, cómo eliminar el subrayado visual manteniendo (o incluso mejorando) la accesibilidad.

Qué objetivo perseguimos

• Eliminar el subrayado por defecto en enlaces que están estilizados como botones.
• Mantener siempre una indicación clara de foco para usuarios de teclado.
• Conservar un contraste suficiente y ofrecer alternativas visuales (outline, box-shadow, cambio de fondo o underline sólo en foco).
• Proponer soluciones específicas para WordPress (block editor / botones y cómo añadir el CSS).

Principios de accesibilidad a respetar

1. Nunca eliminar la indicación de foco. Si quitas el subrayado, añade un estilo de foco visible (outline, box-shadow o un subrayado en :focus).
2. Los enlaces deben permanecer enlaces. No conviertas anchor (a) en elementos no semánticos. Si usas role=button en un enlace por motivos ARIA, asegúrate de que siga comportándose como enlace (teclado/enter) o añade manejadores de teclado correctos.
3. Texto accesible. Si el botón es solo un icono, proporciona aria-label o texto oculto accesible.
4. Contraste. Mantén contraste suficiente en todos los estados (normal, hover, focus) según WCAG.

Selector específico de WordPress

Si usas el editor de bloques (Gutenberg), los botones generados por el bloque predeterminado usan la clase .wp-block-button__link. Es recomendable dirigir tu CSS a ese selector para evitar afectar enlaces normales.

Ejemplo de HTML típico (bloque de WordPress o enlace-actuando-como-botón)

Comprar ahora

Solución recomendada: quitar subrayado visual y añadir foco accesible

Dos enfoques válidos y accesibles:

1. Quitar subrayado por defecto y añadir un estilo de foco visible (outline o box-shadow).
2. Quitar subrayado por defecto y mostrar un subrayado o cambio visual solo en :focus/:focus-visible.

CSS — enfoque 1: outline / box-shadow para foco

/ Aplica solo a botones del bloque de WordPress /
.wp-block-button__link {
  text-decoration: none           / elimina subrayado visual /
  background-color: #0073aa       / ejemplo de botón con fondo /
  color: #ffffff
  padding: 0.6rem 1.0rem
  border-radius: 4px
  display: inline-block
  transition: box-shadow 120ms ease, transform 120ms ease
  text-decoration-skip-ink: none  / opcional: controla el comportamiento de la tinta de subrayado /
}

/ Hover visual /
.wp-block-button__link:hover {
  background-color: #006799
  text-decoration: none
}

/ Foco accesible: visible y con buen contraste /
.wp-block-button__link:focus,
.wp-block-button__link:focus-visible {
  outline: none / eliminamos el outline por defecto para aplicar uno personalizado /
  box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.25), 0 0 0 1px rgba(0,0,0,0.05) inset
  transform: translateY(-1px)
}

/ Alternativa: añadir subrayado solo en foco /
.wp-block-button__link:focus-visible {
  text-decoration: underline
}

CSS — enfoque 2: subrayado solo en foco (si prefieres conservar la semántica del subrayado)

.wp-block-button__link {
  text-decoration: none
}

/ Mantén una indicación de foco clara, aquí reutilizamos subrayado en foco /
.wp-block-button__link:focus,
.wp-block-button__link:focus-visible {
  text-decoration: underline
  outline: 3px solid rgba(0,0,0,0.12) / opcional, combinar para mayor visibilidad /
  outline-offset: 3px
}

¿Cómo añadir este CSS en WordPress?

Dos métodos seguros y recomendados:

1. Customizer > Apariencia > Personalizar > CSS Adicional: pega el CSS ahí para cambios rápidos.
2. Enqueue desde functions.php en tu tema hijo para mantener el código versionado y más controlable.

Ejemplo de functions.php para encolar un stylesheet en un tema hijo

En style-child.css incluyen las reglas CSS mostradas arriba.

Casos especiales y buenas prácticas

• Iconos sin texto: si el botón es solo un icono, añade aria-label=Acción o un span oculto accesible con texto para lectores de pantalla.
• Usar :focus-visible cuando sea posible: evita mostrar estilos de foco al hacer clic con ratón en navegadores que soportan :focus-visible así no molestan visualmente pero siguen presentes para teclado.
• No uses display:none ni visibility:hidden para ocultar el texto accesible usa técnicas que mantengan el texto en el árbol accesible (por ejemplo, .sr-only con posiciones fuera de pantalla).
• Prueba en modos de alto contraste: en Windows, modos de alto contraste pueden ignorar sombras y outlines comprueba que la distinción siga siendo clara.

Ejemplo: botón con icono accesible

Pruebas recomendadas (checklist)

1. Navegar solo con teclado (Tab, Shift Tab, Enter) y comprobar que el foco siempre queda visible.
2. Probar con lector de pantalla (NVDA, VoiceOver) para comprobar que el texto/aria-label es adecuado.
3. Comprobar en dispositivos móviles que el tamaño táctil del botón es suficiente (al menos 44x44px recomendado).
4. Ver contraste de color en herramientas (axe, Lighthouse, Colour Contrast Analyser).
5. Probar en modo alto contraste del sistema operativo.

Resumen y recomendaciones finales

Eliminar el subrayado de enlaces dentro de botones es perfectamente válido desde el punto de vista del diseño siempre que no se comprometa la accesibilidad. Regla práctica:

• Quitar el subrayado por defecto (text-decoration: none).
• Agregar un indicador de foco claro y visible (:focus / :focus-visible con outline o box-shadow).
• Asegurar texto legible, etiquetas ARIA cuando sea necesario, y suficiente contraste.

Notas finales

Para WordPress, apunta tus reglas al selector adecuado (.wp-block-button__link) o a la clase de tu tema para evitar afectar links que deben conservar subrayado. Mantén estos cambios en un tema hijo o encolados desde functions.php para evitar perderlos con actualizaciones. Con las técnicas mostradas tendrás botones limpios visualmente y plenamente accesibles.