Back to the original French page Read this page in Italian by Google Translation Read this page in Portuguese by Google Translation Read this page in English by Google Translation Read this page in German by Google Translation Read this page in Spanish by Google Translation Read this page in Arabic by Google Translation Read this page in Hebrew by Google Translation

Crear enlaces de texto disponibles

Ir al inicio del contenido sin necesidad de utilizar la Consulta y Participación de barras Cómo utilizar la barra de Consulta y Participación Escuche el contenido principal de esta página
Imprimir Imprimir el contenido principal de esta página Enviar Correo electrónico el contenido principal de esta página Compartir Compartir en TwitThis Compartir en Facebook Comparte este artículo en Wikio Comparte este artículo en Google Compartir en LinkedIn Compartir en Digg Compartir el artículo en del.icio.us Compartir esta página en Netvibes

Advertencia: la versión original de este documento es Enlaces y hipertexto: Enlace del texto y la apariencia . Esta traducción al francés fue realizada por Ideos bajo un acuerdo entre WebAIM y Ideos .

Nota: Consulte la página los documentos sobre la accesibilidad web de una lista de todos los documentos traducidos. Otros recursos sobre la accesibilidad web también aparecen en el portal digital accesible .

Los enlaces de texto

Evite las relaciones que son frases sin información

Como se indica en la página 1, los vínculos son más útiles cuando tengan sentido fuera de contexto. Los autores deben evitar frases que se usan como no informativos enlaces, tales como:

  • haga clic aquí
  • aquí
  • más
  • Leer más
  • link [destino del enlace]
  • info

De hecho, el término "pincha aquí" no sirve para nada, aunque le precede una expresión más significativa. Por ejemplo, un enlace "Haga clic aquí para el tiempo de hoy" puede ser reducido a "el tiempo de hoy." En algunos casos puede tener sentido para preceder un enlace con "más" o "más información" (por ejemplo, "más sobre el calentamiento global"), pero si estas palabras adicionales se pueden evitar, es mejor no ponerlas (por ejemplo, el "calentamiento global", según el contexto puede transmitir el mismo significado que "sobre el calentamiento global").

URL

Direcciones Web o direcciones URL presentes s dos tipos de retos:

  1. legibilidad
  2. longitud
Legibilidad de la s URL

El primer reto es que la URL s no siempre son legibles o escuchar fácilmente a través de un lector de pantalla. URL muchos s sentido que contienen combinaciones de números, letras, guiones, guiones y otros caracteres que tienen significado para scripts y bases de datos, pero tienen poco o nada a la media personas. En muchos casos, tiene sentido utilizar el texto legible por humanos en lugar de la URL. Enlace legible construcción de sitios web accesibles es más fácil que usar el enlace se compone de 108 caracteres - llena de números, barras - un texto que no es muy legible. ( http://www.amazon.com/exec/obidos/ASIN/
1590591488/qid 1116957951/sr = = 2 -
1/ref = pd_bbs_b_2_1/103-5755258-8204633 ).

¿Significa esto que la URL s que nunca se debe utilizar como enlaces? No. Si la URL es relativamente corto, es probable que haya ningún problema para utilizar la dirección URL como texto del vínculo. El punto clave es considerar a los usuarios de lectores de pantalla que hay que escuchar a la dirección URL que es más largo y menos inteligible.

Longitud de URL s

El segundo problema es que algunos s URL son muy largas y algunos navegadores se niegan a ir a la línea de URL s largo y dejamos los links URL a la derecha se extienden más allá del área visible del navegador. Estas URL larga s suelen ser generados por los sitios Web con bases de datos o aplicaciones web que la transferencia de un número de variables a través de la dirección del sitio web. El enlace de arriba para el libro en Amazon.com es un ejemplo perfecto. De hecho, el texto del enlace de largo fue modificada mediante la adición de dos saltos de línea ( <br> ) en el centro de la URL, por lo que puede pasar a la siguiente línea. Navegadores basados ​​en Mozilla como Firefox o Netscape no permiten URL larga s para pasar a la línea a menos que el autor no presenta una nueva línea en alguna parte.

El ancho de la pantalla de abajo sería más de 2000 píxeles (equivalente a dos monitores). Imagine un enlace para ver como mucho de una página web. Los usuarios deben navegar horizontalmente tiempo para leer todo el enlace.

Un ejemplo de una URL muy larga, con más de 300 caracteres (a partir de una búsqueda de imágenes en google.com)

Lo que es peor, imagina escuchar a este enlace con un lector de pantalla! Casi nadie tiene la paciencia para escuchar a todo este contenido indescifrable. El enlace de arriba podría ser acortado a "fotos de las gaviotas de California", debido a que el enlace lleva a una página con fotos de las gaviotas de California.

La aparición de enlaces

Los enlaces que debe ser similar a los enlaces y por el contrario debe nada más. Los usuarios se sienten frustrados cuando tratan de hacer clic en el texto o las imágenes que se parecen a los enlaces, pero no lo son. También se verán frustrados si tienen que mover el ratón sobre la página para tratar de descubrir los vínculos que no se parecen a los enlaces.

Subrayando

Navegadores subrayan los hipervínculos de forma predeterminada. Es posible quitar el subrayado el uso de CSS, pero es una mala idea la mayoría del tiempo. Los usuarios están acostumbrados a ver los enlaces subrayados. Ellos pueden o no ser capaz de saber lo que el texto es un enlace, si el acuerdo no se cumple con un guión bajo.

Ejemplo

¿Qué palabras o frases en la pantalla de abajo son los vínculos y cuáles no lo son?

Texto en negro se presenta "soluciones", entonces hay 11 palabras en azul no se enfatiza.

Resulta que todos los presentes están los enlaces de texto. Los usuarios pueden hacer clic en el texto en negro o azul. Este tipo de diseños gráficos pide a los usuarios a adivinar o buscar por eliminación o por casualidad. Lo mejor es hacer hincapié en los enlaces en el contenido principal de una página web.

Como con la mayoría de los reclamos, hay excepciones. Aunque los usuarios están acostumbrados a ver los enlaces subrayados en el contenido principal, también están acostumbrados a las principales funciones de navegación de pestañas (a menudo creadas como imágenes en lugar de texto) no aparecen subrayados. De hecho, es muy difícil encontrar un sitio importante que pone de relieve los vínculos de navegación principal.

Ejemplos

Varios sitios Web de relieve los vínculos en el contenido principal, pero no en el menú de navegación como se muestra en las siguientes imágenes.

Principal de navegación en el sitio es un texto sin subrayar IBM.com

IBM utiliza el texto. Curiosamente, cuando los usuarios volar sobre el texto con el ratón, el guión parece tranquilizar a los usuarios que son en realidad enlaces. La mayoría de los usuarios ya han dado cuenta de que se trata de enlaces, ya que se asemejan a los de la barra de navegación principal del sitio. Sin embargo, la repentina aparición de atención puede ser útil para algunas personas.

7 imágenes en el lado izquierdo de la página se utilizan para la navegación en el sitio web a 10.000 aldeas.

10.000 aldeas para que el sitio utiliza imágenes en lugar de texto. El texto no está subrayado.

Un área horizontal de 3 dimensiones sirve de fondo a la navegación principal del sitio web Macromedia.com.

Navegación principal del sitio web se basa en Macromedia Flash. El texto no está subrayado.

Vuelcos y el enfoque

Muchos sitios web han implementado efectos de rollover y el enfoque. Estos efectos se utilizan con fines estéticos (los efectos son "cool" y artística). También se utilizan para acceder a la medida en que ayudan a los usuarios saber que el ratón o el teclado en un enlace en particular y el enlace está activo.

En la mayoría de los casos, los efectos son de destacar el enlace de arriba o por debajo del texto.

En otros casos, los colores de cambiar el texto del vínculo.

Esta técnica no se limita a la navegación principal del sitio. También se puede utilizar en los enlaces en el contenido principal.

Para que esto sea independiente del dispositivo, es necesario asegurarse de que puede ser activado por el ratón y el teclado. En CSS, esto significa usar dos clases :hover y :focus . Clase :active también se puede utilizar.

Ejemplo

El siguiente CSS va a cambiar el fondo de una luz de enlace amarillo y marrón el enlace de texto cuando el usuario flotar su ratón, el teclado de tabulación para o hace clic en el enlace ya sea con el ratón o con las tecla Enter.

a: hover,
uno: el foco,
a: active
{
background-color: # ffffcc;
color: # 990000;
}

WebAIM es una iniciativa de:
Centro para Personas con Discapacidad (CPD) Utah State University

Derechos de autor 1999-2009 WebAIM

Inicio de la página