Hipervínculos

por 2-5 org

Usar texto descriptivo para los hipervínculos ayuda a los visitantes del sitio web a escanear información relevante, identificar recursos externos y elegir qué enlaces son los más relevantes para sus necesidades.

Además, algunas tecnologías de asistencia, como los lectores de pantalla para personas ciegas y con discapacidad visual, tienen la capacidad de escanear y presentar una lista de todos los hipervínculos disponibles en una página web. Esto permite a una persona saltar rápidamente al enlace relevante en lugar de tener que escuchar toda la página línea por línea.

Consejos para los hipervínculos:

  • Comunica el propósito o la función del hipervínculo como parte del nombre del enlace.
  • Sé lo más descriptivo posible sin ser excesivamente largo, ya que algunas tecnologías de asistencia (por ejemplo, lectores de pantalla) leerán todo el texto del enlace antes de pasar al siguiente contenido. Intenta mantener el texto del hipervínculo por debajo de 120 caracteres.
  • Integra el enlace en tu oración, los usuarios videntes verán el enlace y los lectores de pantalla lo escucharán.
  • Al escribir un texto de enlace, pregúntate: "¿Sabrá el lector a dónde va solo con el texto del enlace?"

Tecnología de asistencia y hipervínculos:

Algunas tecnologías de asistencia pueden extraer todos los hipervínculos de una página web y presentar esa información al usuario. Esto permite a una persona escanear rápidamente los hipervínculos y saltar al hipervínculo más relevante en la página.

 

 

El ejemplo anterior muestra cómo un lector de pantalla podría presentar la lista de hipervínculos del sitio web de Stanford. Proporcionar texto de enlace descriptivo puede simplificar la interacción con el contenido electrónico y brindar una mayor oportunidad para que el visitante del sitio web encuentre y se involucre con la información que está buscando.

Ejemplos de texto de enlace apropiado:

Ejemplos de texto de enlace inapropiado:

Enlaces de Imágenes

Cuando se utiliza una imagen como enlace, hay algunas reglas específicas que deben seguirse. Como se discute en las páginas de conceptos de texto ALT de imágenes, usar un texto ALT vacío está bien para imágenes que son puramente decorativas. Sin embargo, tan pronto como colocas una imagen dentro de un enlace (ancla), entonces esa imagen ya no es decorativa, es funcional y el texto ALT de la imagen debe seguir la función y no describir la imagen real. Por ejemplo:

 

<a href="https://2-5.org">

   <img src="image.jpg" alt="Página de inicio de la Organización 2-5">

</a>

 

Existen algunas variaciones en este patrón que deben ser abordadas. Si hay texto de enlace además de la imagen, entonces se prefiere que el texto ALT esté vacío.

 

<a href="https://2-5.org">

   <img src="image.jpg" alt="">2-5 Organización

</a>

 

Si el enlace de la imagen es redundante con otro enlace que está adyacente al enlace de la imagen, entonces se prefiere eliminar completamente ese primer enlace de la tecnología de asistencia. Esto implica dos pasos. Primero, eliminar el enlace de la imagen del orden de pestañas utilizando un valor de tabindex negativo. Segundo, agregar un atributo aria-hidden al enlace de la imagen (agregar un role de presentación al enlace también funcionaría). En este caso, sin embargo, necesitamos agregar el texto ALT nuevamente en los casos en que un usuario pueda estar usando tanto un lector de pantalla como un mouse (usuarios con baja visión).

 

<a href="https://2-5.org" tabindex="-1" aria-hidden="true">

   <img src="image.jpg" alt="2-5 Organización">

</a>

[... snip ...]

<a href="https://2-5.org">

   2-5 Organización

</a>

Volver a Informaciones