Dos herramientas: anunciar o quitar target="_blank", y estilo global opcional de subrayado en enlaces.
Qué hace
- Enlaces en nueva pestaña: etiqueta para tecnología de apoyo y/o eliminar la apertura forzada en nueva pestaña
- Estilos globales de enlace: subrayado y grosor para que el enlace no dependa solo del color
Configuración guiada en el área de administración
Los dos módulos se muestran como tarjetas independientes y pueden activarse por separado. Los campos dependientes solo aparecen cuando son relevantes. Una vista previa muestra el aviso de nueva pestaña, el icono opcional y el subrayado del texto. Permanece fija junto a los ajustes en escritorio y los precede en pantallas más pequeñas. La página también avisa si la preferencia Toolbar → Colores → Subrayar todos los enlaces puede afectar a los mismos enlaces; las excepciones y los detalles de hover permanecen en secciones desplegables compactas.
Por qué importa
- Lectores de pantalla: oyen cuándo un enlace abre una ventana nueva
- Todas las personas: los subrayados mejoran el barrido visual
- WCAG: apoya 2.4.4 (finalidad del enlace en contexto), 3.2.5 (cambio bajo petición al quitar nuevas pestañas), 1.4.1 (uso del color), 1.4.3 / 1.4.11 (contraste)
Notas WCAG
- 2.4.4: la etiqueta aclara el comportamiento «abre en nueva pestaña»
- 3.2.5: quitar target=»_blank» evita cambios de contexto inesperados
Parte 1 — Nueva pestaña
Actúa sobre enlaces con target="_blank".
Opción A — Anunciar
- Texto oculto visualmente para TA (p. ej. «Se abre en una pestaña nueva»)
- Icono SVG opcional tras el enlace
Opción B — Quitar
- Elimina target=»_blank» para que los enlaces permanezcan en la misma pestaña
Ajustes de anuncio: texto para TA, icono sí/no, variante de icono, tamaño 8–32px, alineación vertical + ajuste fino, selectores de exclusión.
Parte 2 — Estilos globales de enlace
Aplica reglas de subrayado en todo el sitio (con exclusiones).
- Por qué: WCAG 1.4.1: no depender solo del color
- Por defecto: text-decoration: underline, color opcional, offset (~0.15em), grosor (~0.1em)
- Hover: subrayado más grueso (+~0.04em), colores de hover opcionales
- Exclusiones: selectores para navegación, enlaces tipo botón, etc.
Ejemplos
Ejemplo 1: Anunciar nuevas pestañas
Activa anuncio + icono visible (glifo por defecto, 16px). Texto TA: «Se abre en una pestaña nueva». Excluye la navegación principal.
Ejemplo 2: Quitar nuevas pestañas
Activa el modo eliminar: todo permanece en el mismo contexto de navegación.
Ejemplo 3: Subrayado global
Subrayado azul 0.1em, 0.14em en hover; excluye navegación y clases de botón.
Ejemplo 4: Combinado
Iconos para enlaces externos/nueva pestaña + paleta de subrayado global; excluye enlaces de utilidad del pie si necesitan estilo propio.
Consejos
- O bien quita el comportamiento de nueva pestaña o bien anúncialo: no dejes _blank silencioso
- Mantén iconos/subrayados con contraste suficiente
- Prueba la alineación del icono al 200 % de zoom
- Activa subrayados globales cuando el tema solo colorea enlaces
- Excluye patrones que deban parecer botones
- Evita animaciones de hover competidoras
- Prueba básica en varios navegadores
- Si Toolbar → Colores → Subrayar todos los enlaces está activo, desactiva uno de los dos sistemas para evitar reglas dobles
Problemas frecuentes
Falta el icono
Confirma «icono visible»; revisa tamaño/alineación; el tema no debe ocultar el SVG en línea.
No se aplican estilos globales
¿Función activada? ¿Los selectores excluyen todo? ¿!important del tema?
Conflicto con la Toolbar
Desactiva Toolbar → Colores → Subrayar todos los enlaces o los estilos globales: usa un solo sistema.
Notas técnicas
- Detección/ajuste de nueva pestaña con JS en el front-end
- Iconos en SVG en línea
- Estilos globales en CSS; funcionan sin JS
- Usa text-decoration-thickness / text-underline-offset con reservas
Disponible para: Todos los planes Free