Navegación, Lenguaje y Comprensión

Listado de buenas prácticas sobre Navegacion, lenguaje y comprensión

¿Qué debe cumplir un enlace para que sea accesible?

El texto de los enlaces debe ser lo suficientemente claro para identificar su destino cuando es leído fuera de contexto.

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.

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 gracias al atributo title.

Se deberá evitar que los enlaces abran nuevas ventanas del navegador, pero en el caso de que no se pueda evitar se deberá 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.

Volver al listado de buenas prácticas

¿Cómo se deben marcar los acrónimos y abreviaturas, y cómo diferenciarlos?

Se debe 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 debe 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>

Volver al listado de buenas prácticas

¿Qué puntos se deben tener en cuenta cuando en una página web aparecen palabras o frases en un idioma diferente al del contenido general de la página?

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 CSS:

    <!-- para gramáticas HTML -->
    <html lang=”es”>

    <!-- para gramáticas xHTML 1.0 -->
    <html lang=”es” xml:lang=”es”>

  2. Marcar el contenido que se encuentre en otro idioma, mediante los atributos HTML con el código de idioma correspondiente.

    Ejemplo de código CSS:

    <!-- 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.

  3. Si se trata de un enlace a una página que se encuentra en otro idioma, se debe 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).

Volver al listado de buenas prácticas

¿Qué problemas puede ocasionar tener varios enlaces con el mismo texto y distinto destino? ¿Cómo se puede solucionar?

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.

Volver al listado de buenas prácticas

¿Cómo se informa de la apertura de nueva ventana en un enlace?

Es importante intentar evitar la apertura de nuevas ventanas del navegador ya que esta acción puede llegar a desorientar a los usuarios, no obstante en caso de necesitar realizar dicha apertura se puede informar de alguna de las formas que se exponen a continuación.

Para los enlaces de texto:

  • En el texto del propio enlace:

    <a href="nueva_ventana.html">Texto del vínculo (se abre en ventana nueva)</a>

  • Aportando un elemento gráfico (icono de ventana nueva) que indique al usuario visualmente (y a través de su alternativa) la apertura de nueva ventana:

    <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 (icono de ventana nueva) que indique al usuario visualmente (y a través de su alternativa) la apertura de 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 en nueva ventana (icono de ventana nueva) dentro de la propia imagen, indicando al usuario visualmente y a través de su alternativa la 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.

Volver al listado de buenas prácticas

¿Cómo debe ser un Mapa Web y que información debe contener?

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 En el Mapa Web se deben reunir enlaces a todas las secciones y páginas importantes del sitio Web, estos enlaces deben estar organizados adecuadamente según la estructura del portal. Además, todas las páginas del portal deberán poseer un enlace de acceso al Mapa Web.

Volver al listado de buenas prácticas

¿Qué metadatos son obligatorios y qué información se debe incluir en cada uno de ellos?

Los metadatos obligatorios que deben incluirse a lo largo de todos los documentos de los portales son: TITLE, description, keywords y encoding.

  • El elemento TITLE debe identificar unívocamente cada documento, indicando el nombre del sitio Web y el nombre de la página actual “[Nombre del sitio Web][Nombre de la página actual]”.
  • El metadato keywords debe incluir una lista de palabras clave que resuma de forma significativa el contenido del documento o de la sección a la que pertenece.
  • El metadato description debe incluir una descripción general de los contenidos de la sección en la que se encuentra el documento, aunque es recomendable que esta descripción sea a nivel de página.
  • El metadato encoding debe incluir la codificación de los caracteres de los documentos.

Volver al listado de buenas prácticas