ACCESIBILIDAD ≠ OVERLAY · 37

Enlaces accesibles: saber adónde vas antes de hacer clic

📅 10 de noviembre de 2026   ·   ⏱ 7 min de lectura

Un enlace debe ayudar a decidir, no obligar a adivinar. Su texto, su contexto y su comportamiento determinan si una persona puede orientarse con lector de pantalla, teclado, voz o ampliación.

01. Cuando todos los caminos se llaman «aquí»

Imagina una página de servicios con ocho enlaces que dicen «más información». Al verla completa, quizá relacionas cada enlace con la tarjeta que lo rodea. Pero una persona que escucha una lista de enlaces puede recibir ocho nombres idénticos. Tiene que volver al contenido, localizar cada bloque y reconstruir su relación con el destino. Una operación sencilla se convierte en una búsqueda innecesaria.

No es un problema exclusivo de las personas ciegas. Quien utiliza ampliación puede ver solo una pequeña parte de la tarjeta; quien navega con teclado debe decidir si le interesa cada parada. Un enlace descriptivo reduce esfuerzo antes de activarlo. La pregunta útil es: ¿qué puede anticipar la persona con la información que realmente tiene disponible?

02. Escribe el propósito, no una orden vacía

«Consulta los horarios de atención» permite anticipar mejor el destino que «pulsa aquí». «Descargar la guía de inscripción» explica más que «descargar». No hace falta convertir cada enlace en una frase interminable: selecciona las palabras que distinguen ese recurso de los demás y evita repetir todo el párrafo.

El texto debe corresponder con el contenido al que conduce. Si prometes «Tarifas del servicio» y abres una portada comercial sin tarifas, la etiqueta no resuelve la tarea. Revisa también los enlaces después de actualizar documentos o reorganizar páginas. Un nombre que fue correcto puede dejar de serlo aunque la URL todavía responda. La precisión editorial forma parte de la accesibilidad y del mantenimiento cotidiano.

03. Contexto válido y comprensión fuera de contexto

WCAG 2.2 distingue el propósito del enlace en su contexto de la exigencia más estricta de comprenderlo solo por su nombre. El criterio 2.4.4, de nivel A, permite utilizar el texto del enlace junto con un contexto que pueda determinarse mediante software. Un párrafo, un elemento de lista o una celda relacionados pueden aportar información pertinente.

Por tanto, «leer más» no es un incumplimiento automático en cualquier situación. Hay que examinar la asociación real, no solo la cercanía visual. Aun cuando el contexto permita satisfacer el criterio, un nombre específico suele facilitar las listas de enlaces y la exploración rápida. Diferencia la comprobación normativa de la decisión de ofrecer una experiencia más clara; no conviertas una recomendación útil en una regla inventada.

04. Lo que se ve y lo que se anuncia deben encajar

El nombre accesible de un enlace puede proceder de su texto, de una imagen o de un mecanismo como aria-label. Si la etiqueta visible dice «Contactar» pero el nombre accesible es completamente diferente, una persona que utiliza control por voz puede tener dificultades para activarlo diciendo lo que ve. El criterio 2.5.3 exige que el nombre contenga el texto de la etiqueta visible cuando corresponde.

La primera opción suele ser mejorar el texto visible para todas las personas. Evita añadir descripciones ocultas largas a cada enlace sin revisar qué nombre resulta finalmente. El atributo title tampoco debe ser el único lugar donde explicas el destino: su acceso no es equivalente con todos los dispositivos. Comprueba el nombre calculado y escucha cómo se anuncia en el contexto real.

05. Una imagen enlazada también necesita propósito

Si una imagen es el único contenido de un enlace, su alternativa textual debe transmitir la función del enlace. En un logotipo que lleva al inicio, interesa identificar esa navegación, no describir cada curva del dibujo. Una lupa enlazada no debería quedarse con un nombre de archivo como «icono-final-2.svg».

Cuando imagen y texto pertenecen al mismo enlace y el texto ya explica el propósito, la imagen decorativa puede tener una alternativa vacía para evitar repeticiones. Revisa además las tarjetas que incluyen una imagen, un título y un botón hacia el mismo destino. Varios enlaces consecutivos pueden introducir paradas redundantes. Busca una solución coherente sin crear enlaces anidados ni hacer que un contenedor entero pierda su semántica o su interacción nativa.

06. Enlace y botón no hacen el mismo trabajo

Un enlace navega hacia un recurso o una ubicación. Un botón ejecuta una acción, como abrir un panel o enviar un formulario. Su apariencia puede ser similar, pero el comportamiento y las expectativas cambian. Utiliza elementos nativos acordes con la función; un enlace sin un destino real no es una solución general para cualquier control.

No sustituyas esa base por un div con un evento de clic y un rol añadido de manera improvisada. También habría que resolver el foco, la activación con teclado y otros comportamientos que el elemento nativo ya proporciona. Comprueba que los enlaces funcionan con Intro y que los botones responden según su interacción esperada. La tecnología elegida debe acompañar la tarea, no obligar a la persona a descubrir un comportamiento distinto en cada componente.

07. Descargas y cambios de contexto previsibles

Si un enlace conduce a un documento, indica su tema de forma clara. Añadir el formato y, cuando sea útil, el tamaño permite decidir si conviene abrirlo desde un móvil o con una conexión limitada. «Guía de inscripción, PDF» resulta más informativo que una dirección larga o un icono sin explicación.

Evita abrir nuevas pestañas por costumbre. Cuando exista una razón para hacerlo, avisar de ese comportamiento ayuda a mantener la orientación. Es una buena práctica que debe distinguirse de afirmar que toda pestaña nueva incumple automáticamente las WCAG. El enlace tampoco convierte en accesible el archivo de destino. Un PDF sin estructura sigue planteando barreras aunque su nombre sea perfecto. Revisa el recorrido completo desde la elección hasta la consulta del recurso.

08. Visibilidad, foco y espacio para activar

Los enlaces dentro de un párrafo deben poder identificarse sin depender únicamente del color; el subrayado suele ser una solución clara y estable. Comprueba además el contraste y evita que el estado visitado o el foco vuelvan ilegible el texto. El diseño debe permitir reconocer la interacción antes de pasar el ratón.

Recorre los enlaces con Tab y Mayús+Tab. El indicador de foco debe ser visible y no quedar completamente oculto por contenido creado por el sitio cuando recibe el foco; WCAG 2.2 aborda este último caso en 2.4.11. Revisa también la separación entre acciones y los requisitos aplicables al tamaño del objetivo, considerando sus excepciones. Ampliar una zona clicable no debe crear solapamientos que activen otro destino por error.

09. Prueba la decisión antes de comprobar el clic

Selecciona una tarea real: encontrar los horarios o llegar al contacto de soporte. Lee los nombres de los enlaces sin activar ninguno y anota qué destino esperas. Después sigue el recorrido y compara la expectativa con el resultado. Repite con un lector de pantalla, una lista de enlaces, teclado y ampliación cuando corresponda.

Las herramientas automáticas pueden detectar determinados nombres ausentes o problemas de contraste, pero no decidir si «más información» promete el recurso correcto ni si la traducción conserva el sentido. Documenta ambigüedades con la ubicación, el nombre anunciado y el destino esperado. No califiques toda la web a partir de un enlace aislado: revisa menús, tarjetas, pie de página y contenido editorial, porque suelen proceder de componentes diferentes.

10. Corrige el origen y conserva la claridad al publicar

En WordPress y Divi, revisa tanto el texto del editor como el HTML y el nombre accesible del resultado. Corrige el módulo compartido cuando muchas tarjetas repitan el problema. Traduce los nombres y verifica que apuntan al idioma adecuado; una etiqueta localizada no ayuda si el destino cambia inesperadamente a otra lengua.

Un overlay no conoce por sí solo la intención editorial de cada enlace ni puede garantizar que un nombre genérico describa el recurso correcto. Los ajustes de presentación pueden complementar el trabajo, pero no sustituyen esa decisión. Incorpora a la revisión una pregunta sencilla: ¿puede la persona elegir con criterio antes de activar? La accesibilidad mejora cuando sabe adónde va, llega al contenido esperado y puede continuar con autonomía.

🧑‍🦯 Blind Reader
Narrador listo.

Guía para invidentes

Esto es un resumen funcional, no una lectura literal.

Ir al objetivo principal Salta al área principal de acción (formulario, listado o contacto).

Estás en una página tipo: artículo. El objetivo principal parece ser: informarte.

Hay 18 secciones a las que puedes saltar.

Antes de continuar:

  • Gestionar cookies o avisos Motivo: Detecté un aviso relacionado con cookies/consentimiento. — Vía recomendada: Contenido principal

Ir por objetivos

Elige qué quieres hacer. Te lo explico y luego te pregunto antes de saltar.

  • Gestionar cookies o avisos Importante: esto puede bloquear la navegación.
  • Ir al contenido del artículo
  • Ir a comentarios
  • Ir al final del artículo
  • Volver a Noticias (blog)
  • Noticia anterior
  • Ir a Inicio
  • Ir a About
  • Ir a Blind Reader
  • Ir a Withdrawal Button
  • Ir a Servicios
  • Ir a Blog
  • Ir a Contacto
  • Ir a English
  • Ir a Català
  • Ir a Polski
  • Ir a Română
  • Ir a Italiano
  • Ir a Français
  • Ir a Svenska
  • Ir a Deutsch
  • Ir a Nederlands
  • Ir a Português
Opciones de los objetivos
Modo de confirmación

Elige cada cuánto debo preguntar antes de saltar.



Alcance del aprendizaje (solo para “primera vez”)

Sitio: recuerda este objetivo en toda la web. Página: recuerda por URL.


Guía progresiva

La guía anuncia una sección cada vez.

Cómo funciona: Iniciar guía anuncia la primera sección clave y la muestra en pantalla. Siguiente avanza a la siguiente sección. Para llevar el foco a la sección, usa Ir a la sección actual. Detener sale.

Estado: Guía inactiva

Ir a la sección actual Este enlace se actualiza conforme avanza la guía.

Este artículo tiene aproximadamente 1410 palabras.

Mueve el foco al inicio del contenido, saltando menús y elementos secundarios.

Acerca de Blind Reader

Blind Reader es un asistente de accesibilidad que analiza cada página y narra su propósito, secciones clave y acciones recomendadas — diseñado para usuarios de lectores de pantalla.

Constructores compatibles: Funciona con cualquier tema o constructor de WordPress: Divi, Elementor, Gutenberg, WPBakery, Avada y otros. Lee el contenido real de la página, no el marcado del constructor.

¿Interfiere en tu contenido? No cambia tus textos ni tu diseño. Solo añade un panel accesible y corrige atributos técnicos de accesibilidad (por ejemplo, nombres de botones sin texto) para que los lectores de pantalla los anuncien bien.

¿Cómo funciona? Analiza la estructura de la página (encabezados, enlaces, formularios, landmarks) y genera un resumen funcional. La guía y los objetivos ayudan a navegar sin tener que recorrer toda la página.

Atajo de teclado: Pulsa Alt + G para saltar directamente al primer objetivo.