Las páginas web utilizan enlaces que dirigen a los visitantes a contenido nuevo o adicional. Los enlaces pueden ser texto e imágenes. Son herramientas de navegación importantes y deben estructurarse correctamente para obtener la mejor experiencia.

Las Pautas de accesibilidad al contenido web (WCAG) son requisitos específicos definidos para garantizar que el contenido sea accesible para todos. Según las pautas WCAG 2.1 AA, los enlaces deben determinar el propósito del enlace para que los visitantes puedan decidir si desean seguirlo. Los enlaces deben tener un texto distinguible que indique a los visitantes adónde los enviará.

¿Qué significa texto distinguible?

Por lo general, los enlaces contienen dos datos:

  • URL: dirección web hacia donde el enlace envía a los visitantes cuando lo seleccionan.
  • Texto en pantalla: texto visible que informa a los visitantes lo que encontrarán si seleccionan el enlace.

Consulte este enlace para ver las prácticas recomendadas: prácticas recomendadas para los enlaces. En el código fuente HTML, el enlace de prácticas recomendadas es similar al siguiente: <a href="#best-practices">Best practices for links</a>

Cuando no aparece texto en la pantalla o entre las etiquetas <a>, el enlace no tiene texto distinguible. El texto distinguible es aquel que muestra el propósito del enlace a los visitantes.

Cuando los enlaces no tienen texto distinguible, se considera que hay un problema menor. Corrija los problemas menores para mejorar la experiencia. Los enlaces sin texto distinguible o con texto ambiguo pueden derivar en una navegación confusa y frustrante para las personas con discapacidades.

Cómo utilizan los enlaces las personas con discapacidades - enlace al final de la página

Ally lo ayuda a identificar los enlaces que no tienen texto y le explica cómo corregirlos. Para hacerlo, se verifican los siguientes aspectos:

  • ¿Hay texto entre las etiquetas <a> del hipervínculo?
  • ¿El texto entre las etiquetas <a> se encuentra oculto?
  • ¿Las imágenes que se usan como enlaces tienen descripciones alternativas?

Si el enlace no pasa alguna de las verificaciones, Ally lo marca como un problema.

Usar Ally para encontrar enlaces sin texto

Use el informe de accesibilidad de Ally para detectar y corregir los problemas de accesibilidad de su sitio. Use el enlace proporcionado para el informe e inicie sesión. Abra el informe y mire la lista de problemas en la tabla Problemas de accesibilidad.

La tabla Problemas de accesibilidad se encuentra en las pestañas Descripción general y Dominio. Comience en la pestaña Dominio para ver los problemas específicos de un dominio.

Los enlaces sin texto distinguible se marcan como un problema menor. Use la pestaña Menor de la tabla Problemas de accesibilidad para ver la lista de problemas menores. Seleccione los problemas con los enlaces sin texto distinguible.

Si comienza en la pestaña Descripción general, seleccione el problema y, a continuación, el dominio que lo presenta.

En la lista de problemas en el dominio, seleccione el indicador de puntuación junto a un elemento que presente el problema. Se abrirá el panel de comentarios del editor de contenido.

Obtener una vista preliminar de los enlaces sin texto

El panel de comentarios de Ally le muestra una vista preliminar del contenido, y le brinda los comentarios detallados y el soporte para que pueda corregir los problemas de accesibilidad. Use la vista preliminar para ver los enlaces sin texto.

En la vista preliminar, se indica en qué partes del documento hay problemas de accesibilidad específicos. La información destacada muestra cada instancia de un tipo de problema a la vez. Por ejemplo, para el problema de enlaces sin texto, en la vista preliminar se destacan todas las instancias en las que se produce este problema específico.

Herramientas de vista preliminar

Use las herramientas de la vista preliminar para analizar los problemas del documento.

  • Desplácese por la vista preliminar página por página.
  • Vea cuántas veces aparece un problema determinado.
  • Recorra los distintos problemas resaltados.
  • Oculte o muestre la información destacada.
  • Acerque o aleje el contenido de la vista preliminar.
  • Si el problema se encuentra en un documento adjunto, descargue el archivo original.

Siga las instrucciones de Ally para agregar texto al enlace

Se asume que usted tiene conocimiento básico sobre HTML y sabe cómo usar su sistema de gestión de contenido (CMS). Para seguir las instrucciones, debe saber cómo editar una página web en HTML o el código fuente de su CMS.

Junto con la vista preliminar, Ally le ofrece una guía detallada para corregir el problema. Estos comentarios se organizan en un árbol de decisiones. Lea las instrucciones y responda a cada indicación. Podrá saber cuál es el problema, conocer su importancia y aprender a corregirlo adecuadamente.

Seleccione Cómo arreglar el texto del enlace y siga los pasos.

Formas de agregar texto a los enlaces

Existe más de una forma de corregir el problema de enlaces sin texto en las páginas web.

  • HTML: las instrucciones de Ally le indicarán cómo encontrar y corregir el texto en los enlaces en HTML. Solo debe buscar la página web con el enlace y editar la página. En el código HTML, agregue texto entre las etiquetas <a>. y guarde la página.
  • RTE: algunos CMS tienen un editor de texto enriquecido (RTE) que puede ofrecer formas sencillas de corregir los enlaces. Busque el enlace en la página web. Seleccione el enlace y utilice las herramientas del CMS para agregar texto y guarde la página.

Visite w3schools para obtener más información sobre HTML y CSS

Prácticas recomendadas para los enlaces

  • El texto del enlace debe ser significativo. Indique a los visitantes adónde se dirigen. Describa lo que el usuario puede encontrar al seleccionar el enlace.
    • Evite usar frases como "haga clic aquí" y "ver más". Estas no indican a los visitantes lo que encontrarán cuando seleccionen el enlace. Algunas tecnologías de asistencia tienen una herramienta que enumera solo los enlaces de la página. Estas frases no tendrán ningún significado si se sacan del contexto de la página y se muestran en una lista.
    • Evite que el texto visible del enlace sea una URL. Es posible que una URL no sea descriptiva. Los lectores de pantalla también leen cada letra de una URL por separado, lo que puede resultar frustrante para los visitantes que los usan.
  • El texto del enlace debe ser único. Cada enlace debe ser único con respecto a los demás enlaces de la página. La repetición del texto del enlace puede resultar confusa cuando se saca del contexto de la página y se muestra en la herramienta de lista de enlaces.
  • Los enlaces deben destacarse visualmente. Debe quedar claro que se trata de un enlace. Si no le gusta el estilo del enlace, puede actualizar la plantilla.
    • Los enlaces deben distinguirse del texto que los rodea de una manera que no dependa únicamente del color. WCAG 2.1 - 1.4.1

      El aspecto del enlace suele definirse en la guía de estilo de un sitio y puede reflejar la marca. Antes de realizar cambios, consulte la guía de estilo del sitio y al administrador.

  • Indique a los usuarios si el enlace se abre en una ventana nueva. Si los enlaces se abren en una ventana nueva, puede resultar confuso. Informe a los usuarios cuando se los envíe a una ventana o pestaña nueva.
  • No utilice una imagen para representar algo que pueda crear en HTML. Por ejemplo, no use la imagen de un botón en lugar de un botón real. No utilice una imagen de una tabla en lugar de una tabla creada en el código fuente HTML.

Cómo usan los enlaces las personas con discapacidad

Los enlaces adecuados que contienen texto de enlace significativo posibilitan una experiencia mucho mejor para todos. Los enlaces con una buena estructura son poderosas herramientas de navegación y dejan claro lo que se debe esperar de ellos. Sin embargo, los enlaces adecuados son esenciales para los visitantes con problemas de visión.

Los enlaces que tienen un texto único y significativo suponen una navegación rápida para muchos usuarios.

  • Los usuarios de lectores de pantalla no necesitan escuchar toda la página. En cambio, pueden optar por escuchar e interactuar con una lista de enlaces.
  • Los usuarios que utilizan el reconocimiento de voz interactúan con los enlaces diciendo en voz alta el que quieren seleccionar.

Los enlaces que están bien estructurados son más fáciles de visualizar y los usuarios pueden interactuar con ellos.

  • Los usuarios que solo utilizan el teclado, sin el ratón, pueden usar el teclado para navegar hacia elementos de la página como los enlaces.
  • Es posible que los usuarios con daltonismo no vean la variación de color, pero sí un enlace subrayado.