accesskey_mod_content

Navegación, lenguaje y comprensión

  • Escuchar
  • Imprimir PDF
  • Compartir

El texto de los enlaces debe indicar claramente cuál es su propósito, el contenido o información que se encuentra en el documento de destino. Los enlaces del tipo “click aquí” no son significativos y no describen su destino.

Siempre que sea posible, se ha de procurar que los enlaces sean lo suficientemente claros cuando se lean fuera de su contexto ya que los usuarios de lectores de pantalla navegan con el tabulador saltando de enlace en enlace o extraen el listado de enlaces de una página, de forma que si el texto no es descriptivo no aportará información sobre su propósito.

En caso de necesitar algún tipo de información adicional podrá ser añadida por medio del atributo title, el cuál contendrá todo el texto del enlace además de dicha información adicional. También se podrá incluir la información adicional como una parte oculta del texto del enlace mediante una técnica de ocultación con CSS accesible (por ejemplo, posicionamiento absoluto fuera de la pantalla).

Excepcionalmente, cuando el texto del enlace no es descriptivo por sí mismo, al menos debe serlo mediante su contexto más inmediato. Se entiende por contexto inmediato aquellos elementos que un lector de pantalla puede obtener a partir del enlace como el texto de la frase, el párrafo, el encabezado, la celda de tabla o el elemento de lista que contiene al enlace.

Si el vínculo enlaza con un documento adjunto se podrá mostrar el formato del mismo en el propio texto del enlace, mediante un icono representativo de dicho formato con el correspondiente texto alternativo y al atributo title. Es recomendable además indicar el tamaño de los documentos adjuntos para que los usuarios puedan decidir si los descargan o no.

Se debería evitar que los enlaces abran nuevas ventanas del navegador, pero en el caso de que no se pueda evitar se informar de ello al usuario siguiendo las normas dictadas en la respuesta a la pregunta ¿Cómo se informa de la apertura de nueva ventana en un enlace?

Por último, el estilo de los propios enlaces deberá permitir que el usuario los identifique adecuadamente, distinguiéndolos fácilmente del resto de los contenidos de los documentos

Aunque sea un requisito para un nivel de conformidad AAA, es recomendable especificar la expansión de cada abreviatura o acrónimo, mediante los marcadores HTML adecuados. Además, la forma expandida de la abreviatura o acrónimo se debería indicar expresamente en el texto de la página la primera vez que se emplee.

Un acrónimo es un conjunto de letras formado por las iniciales de otras palabras, por ejemplo, URL (Uniform Resource Locator). Los acrónimos se marcar mediante el elemento acronym y su expansión mediante el atributo title del elemento.

Una abreviatura es la representación escrita de una o varias palabras mediante una o varias de sus letras, a fin de que la palabra o palabras en cuestión resulten más cortas en el texto. Las abreviaturas se marcan mediante el elemento abbr y su expansión mediante el atributo title del elemento.

Ejemplo de código para un acrónimo

<acronym title=”Organización de las Naciones Unidas”>ONU</acronym>


Ejemplo de código para una abreviatura

<abbr title=”Avenida”>Avd</abbr>

 

En el caso de que la gramática empleada sea HTML5 se puede emplear siempre el elemento ABBR tanto para marcar abreviaturas como acrónimos ya que el elemento ACRONYM pasa a considerarse obsoleto.

Si en un documento existe algún extracto en un idioma diferente al utilizado en el contenido general del mismo, se deben realizar las siguientes acciones:

  1. Asegurarse de que está correctamente marcado el idioma principal de la página.
Ejemplo de código HTML
 <!-- para gramáticas HTML -->
<html lang=”es”> <!-- para gramáticas xHTML 1.0 -->
<html lang=”es” xml:lang=”es”>

  

  1. Marcar el contenido que se encuentre en otro idioma, mediante los atributos HTML con el código de idioma correspondiente. 
Ejemplo de código HTML
<!-- para gramáticas HTML -->
A las 14:00 horas está previsto un <span lang=”en”>meeting</span> en la plaza. <!-- para gramáticas xHTML 1.0 -->
A las 14:00 horas está previsto un <span lang=”en” xml:lang="en">meeting</span> en la plaza.

  

  1. Opcionalmente, si se trata de un enlace a una página que se encuentra en otro idioma, se recomienda utilizar el atributo hreflang del enlace para indicar este cambio de idioma.
Ejemplo de código CSS
<a href=”guia.html” hreflang=”en”>Guía de HTML en inglés</a>

 

Para ampliar la información sobre los código de idioma disponibles se recomienda consultar la lista de códigos de idioma (fuente: Iana)(Abre en nueva ventana)

Un documento que posea varios enlaces con el mismo texto cuyos destinos son diferentes podrá desorientar a los usuarios. El texto de dichos vínculos no será lo suficientemente claro como para identificar el destino de cada uno de los enlaces leídos fuera de contexto. Esto es un problema especialmente para los usuarios que utilizan lectores de pantalla, ya que encontrarán dificultades si deciden realizar una navegación a través de los enlaces del documento.

En el caso de que se desee que visualmente haya varios enlaces que posean el mismo texto se recomienda ocultar mediante técnicas accesibles la parte del texto del enlace que lo distingue de los demás.

En las WCAG 2.0 la obligatoriedad de avisar de la apertura de nuevas ventanas o pestañas del navegador pasa a ser un requisito de AAA, aunque sigue siendo una buena práctica y se recomienda su uso ya que mejora tanto la accesibilidad como la usabilidad de la página.

Las posibles formas de informar sobre la apertura de nuevas ventanas variarán dependiendo de la situación en la que nos encontremos.

Para los enlaces de texto:

  • En el texto del propio enlace:
Ejemplo de código
<a href="nueva_ventana.html">Texto del vínculo (se abre en ventana nueva)</a>

 

  • Aportando un elemento gráfico ( ) que indique al usuario visualmente (y a través de su alternativa) la apertura de nueva ventana:
Ejemplo de código
<a href="nueva_ventana.html">Texto del vínculo <img alt="Se abre en ventana nueva" src="icono.gif" /></a>

 

  •  Otra posible solución consiste en incluir el texto "Se abre en nueva ventana" en el propio enlace, mostrándolo a modo de tooltip mediante técnicas CSS cuando se fija el foco sobre el enlace.

 Para los enlaces gráficos:

  • Como texto del enlace, o bien, aportando un elemento gráfico ( ) que indique al usuario visualmente ( y a través de su alternativa) la apertura de una nueva ventana.
  • Aportando la información de apertura en nueva ventana  en el contenido de la imagen. Para ello se puede incluir el elemento gráfico de apertura dentro de la propia imagen, indicando al usuario visualmente y a través de su alternativa la nueva apertura de nueva ventana.
  • Otra posible solución consiste en incluir el texto "Se abre en nueva ventana" en el propio enlace y mostrarlo a modo de tooltip mediante técnicas CSS al fijar el foco sobre el enlace.

 

Cuando el contenido completo de un sitio Web no se puede incluir en los menús de navegación, se debe proporcionar un Mapa Web o una función de búsqueda dentro del sitio para facilitar a los usuarios encontrar el contenido.

Para que un mapa web sea correcto debe incluir enlaces a todas las secciones y páginas importantes del sitio web. Además, el mapa web debe estar enlazado, al menos, desde cada una de las páginas que se listan en el mapa web aunque se recomienda incluir un enlace al mapa web desde todas las páginas del sitio web. Finalmente, todas las páginas del sitio web deben ser accesibles, directa o indirectamente, desde el mapa web.

La presentación y la estructura del mapa web deben reflejar la organización del sitio web. Para ello se usarán los elementos estructurales de forma adecuada. Así, por ejemplo, se podrán usar encabezados, listas, listas anidadas o una combinación de las anteriores siempre que la estructura del mapa coincida con la del sitio web.

 Asimismo, el orden de lectura y el orden de tabulación por el mapa web debe ser el correcto.

Las pautas de accesibilidad no definen el conjunto de metadatos mínimo que debe incluirse en una página web, salvo el título de la página, pero los metadatos se pueden usar para cumplir algunos de los requisitos de dichas pautas.

Así, todas las páginas deberán incluir un título, elemento TITLE, que de forma breve identifique el contenido de la página y tenga sentido cuando se lea fuera de su contexto. Aunque no sea necesario, es recomendable que en el título de la página se incluya también el nombre del sitio web. De igual forma, también se recomienda que los títulos sean únicos para todas las páginas del sitio web. En todo caso, el título de las páginas debe tener relación con su contenido de forma que éste se pueda identificar claramente a partir del título.

Otros metadatos que se pueden usar para cumplir otros requisitos de las pautas son:

  • Declaración de tipo del documento (DOCTYPE) para facilitar que los navegadores y demás aplicaciones de usuarios reconozcan la gramática usada en las páginas web.
  • La codificación de caracteres (encoding) para evitar que se produzcan inconsistencias entre navegadores en la interpretación de los caracteres especiales contenidos en la página.
  • Atributos title para proporcionar etiquetas descriptivas cuando sea necesario. Por ejemplo, para identificar el contenido de los marcos, para describir la función de los campos de formulario que carecen de una etiqueta visible, para aportar información adicional en los enlaces, etc.