Enlace de "salta navegación"

En muchas páginas web, es costumbre incluir una barra de navegación con multitud de enlaces al principio de la página web, antes del contenido principal de la página.

Para aquellas personas que emplean una navegador no visual, por ejemplo un lector de pantalla, una barra de navegación con muchos enlaces no suele suponer una barrera, pero sí que suele retardar la navegación al tener que recorrer la barra de navegación completa cada vez que se visita una página nueva. Para facilitar la navegación a estos usuarios, es recomendable proporcionar una manera de saltar la barra de navegación. Para ello, se suele incluir al principio de la página web un enlace dentro del propio documento que salta al contenido principal.

En la página web Enlaces de "saltar navegación" se puede encontrar una comparativa sobre distintas técnicas (o trucos) que existen para ocultar el enlace "saltar navegación" para aquellos usuarios que emplean un navegador visual. Estas técnicas son:

• Oculto: Al enlace se le aplica el atributo display: none.
• Desplazado: Esta vez el enlace se oculta sacándolo del área visible del
  documento, generalmente aplicándole la regla text-indent:-100em.
• "Fantasma": Una imagen transparente es la que enlaza al contenido.

La conclusión que se extrae de esta comparativa es que es mucho mejor evitar estas técnicas, ya que su interpretación y funcionamiento varía entre distintos lectores de pantalla o incluso entre distintas versiones del mismo lector de pantalla.

Para resolver esta situación, existen dos posibles alternativas:

1. No intentar ocultar el enlace "saltar navegación", sino integrarlo en la propia página web como un elemento más.
2. Situar la barra de navegación al final de la estructura del documento y mediante hojas de estilo en cascada (CSS) colocar la barra de navegación al principio de la página.

Técnicas para las Pautas de Accesibilidad al Contenido en la Web 1.0

Las Técnicas para las Pautas de Accesibilidad al Contenido en la Web 1.0 del W3C es el punto de acceso a una serie de documentos relacionados que describen técnicas para satisfacer los requisitos definidos en las Pautas de Accesibilidad al Contenido en la Web 1.0.

En este documento, cada punto de revisión (checkpoint) está seguido por uno o más vínculos a las técnicas concretas que se deben de aplicar. Podemos encontrar tres tipos de técnicas:

• Técnicas Fundamentales: expone los temas de accesibilidad y las técnicas generales que son de aplicación a todas las tecnologías (por ejemplo, validación, pruebas, etc.).
• Técnicas HTML: proporciona ejemplos y estrategias para realizar de forma accesible el contenido en HTML.
• Técnicas CSS: proporciona ejemplos y estrategias que ayudan a los autores a elaborar hojas de estilo en cascada (CSS) como parte del diseño accesible de los contenidos.

Por ejemplo, si nos fijamos en la pauta de accesibilidad 5. Crear tablas que se trasformen correctamente, y en el punto de verificación 5.3 No utilice tablas para maquetar, a menos que la tabla tenga sentido cuando se alinee. Por otro lado, si la tabla no tiene sentido, proporcione una alternativa equivalente (la cual debe ser una versión alineada). [Prioridad 2], podemos encontrar las siguientes técnicas concretas para cumplir este punto de verificación:

Técnicas Fundamentales: Estructura contra presentación
Cuando se diseña un documento o una serie de documentos, en primer lugar, los desarrolladores de contenidos deben esforzarse en identificar la estructura que desean dar a sus documentos, antes de pensar en cómo se presentarán los mismos al usuario. Distinguir la estructura del documento de la forma en que se presenta el contenido ofrece varias ventajas, incluido un aumento de la accesibilidad, facilidad de gestión y portabilidad.

La identificación de lo que es estructura y lo que es presentación puede ser un reto a veces. Por ejemplo, muchos desarrolladores consideran que una línea horizontal comunica una división estructural. Esto puede ser cierto para usuarios con una visión normal, pero para usuarios sin visión o sin navegadores gráficos, una línea horizontal no significa prácticamente nada. Por ejemplo, en HTML, los desarrolladores deberían usar los elementos de encabezamiento (H1 - H6) de HTML 4.01 para identificar nuevas secciones. Estos pueden ser complementados con indicaciones visuales o de otro tipo tales como líneas horizontales, pero no deben ser reemplazados por ellos.

A la inversa también: los desarrolladores no deben usar elementos estructurales para lograr efectos de presentación. Por ejemplo, en HTML, aunque el elemento BLOCKQUOTE puede crear sangrías de texto en algunos navegadores, está diseñado para identificar una cita, no para crear efectos secundarios de presentación. Los elementos BLOCKQUOTE usados para sangrías confunden a los usuarios y los robots de búsqueda, que esperan que el elemento se utilice para señalar una cita.

Técnicas HTML: Tablas para maquetar
Los autores deberían utilizar hojas de estilo para maquetar y posicionar. De cualquier modo, cuando es necesario usar una tabla para maquetar, el orden de la información en la tabla debe ser comprensible después de transformarse en forma lineal. Cuando se alinea una tabla, los contenidos de las celdas se convierten en series de párrafos (es decir, de arriba hacia abajo) uno tras otro. Las celdas deben tener sentido cuando se leen en orden horizontal y deben incluir elementos estructurales (que creen párrafos, encabezamientos, listas, etc.) de modo que la página tenga sentido al ser alineada.

Igualmente, cuando se utilicen tablas para maquetar, no utilice etiquetas estructurales para crear formatos visuales. Por ejemplo, el elemento TH se muestra visualmente centrado y en negrita. Si una celda no es realmente el encabezamiento de una fila o columna de datos, utilice hojas de estilo o atributos de formateo del elemento.

Técnicas CSS: Maquetación, ubicación, colocación en capas, y alineación

Los contenidos deben ser maquetados, ubicados, colocados en capas y alineados mediante hojas de estilo (sobre todo mediante las propiedades CSS de float y colocación absoluta):

• Las propiedades "text-indent", "text-align", "word-spacing" y "font-stretch", permiten a los usuarios controlar el espaciado sin añadir espacios adicionales. Utilice 'text-align:center' en lugar del elemento desaconsejado CENTER.
• Con las propiedades 'margin', 'margin-top', 'margin-right', 'margin-bottom' y 'margin-left', los autores pueden crear espacios en los cuatro lados del contenido de un elemento, en lugar de añadir espacios de no separación ( ).
• Con las propiedades "float", "position", "top", "right", "bottom" y "left", el usuario puede controlar la posición visual de casi cualquier elemento con independencia de donde aparezca el elemento en el documento. Los autores deberían diseñar siempre documentos que tengan sentido sin hojas de estilo (por ejemplo, el documento debería escribirse en un orden "lógico") y entonces aplicar hojas de estilo para lograr efectos visuales. Las propiedades de ubicación pueden ser usadas para crear notas marginales (que se numerarán automáticamente), barras laterales, efectos similares a los marcos, encabezamientos y pies simples y otras más.
• La propiedad "empty-cells" permite a los usuarios dejar vacías celdas de tablas y poder proporcionarles bordes en la pantalla o en papel. Una celda de datos que debe estar vacía no debería ser llenada con un espacio en blanco o un espacio "non-breaking" sólo para lograr un efecto visual.

Los dos principios básicos del diseño web accesible

He encontrado esta página, Los dos principios básicos del diseño web accesible, que define de una forma muy breve pero muy completa la filosofía de la accesibilidad en la Web:

Los dos principios básicos del diseño accesible de sitios web son crear páginas que se transformen correctamente y ofrecer el contenido de manera comprensible para facilitar la navegación por el sitio web.

El autor de esta página también incluye una explicación de "transformación correcta" y "contenido comprensible y navegable":

Transformación correcta
El primer principio del diseño accesible es por tanto crear páginas que se transformen correctamente y cuyo contenido sea correctamente reproducible bajo distintas circunstancias. Hay que crear páginas que sean accesibles a pesar de las deficiencias cognitivas leves, físicas o sensoriales de los usuarios. Hay que considerar también las posibles restricciones debidas al lugar de acceso y las barreras tecnológicas.

En este sentido el texto es siempre lo más accesible. Sin embargo no se trata de crear páginas sólo-texto sin elementos gráficos ni una atractiva maquetación visual. Existen técnicas de HTML para asociar texto alternativo a cada elemento no textual de la página.

Además los elementos gráficos y multimedia correctamente usados contribuyen a mejorar la accesibilidad del sitio web, pues ayudan a conseguir el otro principio importante del diseño accesible: la comprensión del contenido y la navegación fácil por el sitio.

Contenido comprensible y navegable
Esto incluye no sólo la utilización de un lenguaje claro y simple, sino también proporcionar mecanismos comprensibles para navegar dentro de cada página y entre las páginas del sitio web. Al proporcionar herramientas de navegación e información orientativa en las páginas se maximizará la accesibilidad y la usabilidad del sitio web.

Pero como se ha comentado no todos los usuarios pueden utilizar las claves visuales tales como mapas de imagen, colores de fondo, marcos contiguos o imágenes que guían a los usuarios videntes. Algunos usuarios pierden también información del contexto cuando sólo pueden visualizar una parte de la página. Esto sucede si acceden a la página palabra por palabra con sintetizadores de voz, braille o teléfonos WAP o si acceden por partes con pantallas pequeñas o magnificadores de pantalla.

¿Cuáles son los problemas de accesibilidad en la Web más importantes para un invidente?

Le he preguntado a un amigo ciego que me explique cuáles son los principales problemas de accesibilidad que presentan las páginas web desde su punto de vista:

1. Las páginas mal etiquetadas porque no emplean las etiquetas de HTML para definir la estructura de la página.
Por ejemplo, emplear la negrita para indicar separadores de sección cuando existen etiquetas (h1, h2, ...) específicas para ello, o crear listas mediante saltos de línea cuando existen etiquetas específicas (ul, li, ...). Este es un problema de difícil solución, ya que requiere que el desarrollador conozca la forma correcta de utilizar las etiquetas de marcado y la forma en que los lectores de pantalla las emplean.

Un problema importante asociado es que, al no estar correctamente estructurada la página, no se puede "saltar" fácilmente la barra de navegación del sitio web, y el usuario tiene que esperar que el lector de pantalla lea toda la barra de navegación antes de llegar al contenido realmente importante de la página.

2. El texto alternativo inadecuado para las imágenes.
Por ejemplo, no colocar un texto alternativo cuando hace falta o colocarlo cuando en realidad no es necesario, o un texto alternativo poco útil. Este y el siguiente problema se deben principalmente a la dejadez de los desarrolladores, ya que su solución no es difícil.

3. Controles de formulario sin etiquetas.
Por ejemplo, cuando las etiquetas de los controles de un formulario se colocan en sitios "extraños" (debajo, alejadas). El usuario invidente no sabe para qué sirve cada control, no sabe qué tiene que escribir o seleccionar.

Auditoria de accesibilidad, test de accesibilidad y test de accesibilidad automático

¿Qué entendemos como "auditoria de accesibilidad", "test de accesibilidad" y "test de accesibilidad automático"? En la página Accessibility audit vs. accessibility testing lo explican muy bien:

Auditoria de accesibilidad
Un experto en accesibilidad revisa un sitio web, informa de posibles problemas de accesibilidad y proporciona recomendaciones para solucionar los problemas.

Ventajas: más rápido y barato que un test de accesibilidad, más exhaustivo que un test de accesibilidad.

Desventajas: no se produce una transmisión de conocimiento del auditor al cliente (para ello se tienen que realizar cursos de formación).


Test de accesibilidad
Usuarios con algún tipo de discapacidad realizan una serie de tareas en un sitio web mientras que un controlador anota todos los problemas que experimentan. Es la única forma para asegurar un nivel de accesibilidad óptimo.

Ventajas: también se detectan problemas de usabilidad, es una gran oportunidad para aprender de primera mano los problemas de accesibilidad.

Desventajas: es extremadamente caro de realizar, sorprendentemente detecta menos problemas que una auditoría de accesibilidad.


Test de accesibilidad automático
Mediante un programa que verifica un conjunto de guías, se evalúa de forma automática la accesibilidad de un sitio web.

Ventajas: rápido, sencillo y económico de realizar.

Desventajas: la calidad de los resultados es limitada, devuelven errores que no lo son y no detecta errores básicos.

El W3C critica la falta de rigor al emplear las herramientas automáticas de validación

Acabo de encontrar la noticia W3C España afirma que falta rigor en los informes de accesibilidad web en la Revista Eroski Consumer:

La Oficina Española del W3C (World Wide Web Consortium) ha mostrado su preocupación por el uso inapropiado que se está haciendo de las herramientas automáticas de validación de estándares web, programas informáticos o servicios "online" que ayudan a determinar si un sitio web es accesible y cumple los estándares.
Estas herramientas están siendo utilizadas para realizar análisis de páginas de Internet que "en muchas ocasiones carecen de validez", como en el caso de informes sobre niveles de accesibilidad que son publicados cada vez con mayor frecuencia y cuya falta de rigor "está generando cierta confusión entre usuarios y organizaciones".
Existen diferentes mecanismos que permiten evaluar si un sitio web es accesible o cumple con los estándares del W3C. Estos mecanismos, que pueden ser automáticos o manuales, usados de forma conjunta hacen posible obtener evaluaciones fiables. El problema surge cuando se hace un uso exclusivo de herramientas automáticas de validación sin tener en cuenta las técnicas manuales.
Estas herramientas constituyen una ayuda eficaz en los procesos de validación, no obstante, "ninguna de ellas por sí sola puede determinar si un sitio cumple o no las pautas de accesibilidad o los estándares", así como tampoco es posible hacerlo validando una sola página de un sitio completo, explica W3C España.
Para determinar si un sitio es accesible o cumple los estándares "es necesaria la revisión humana, sólo así podemos hablar realmente de la evaluación correcta".
Aquellas validaciones realizadas exclusivamente con herramientas automáticas "pueden llevar a conclusiones inexactas y erróneas" si no están siempre bajo el control de personas con experiencia en el área.

La accesibilidad de los marcos HTML

Los marcos (frames) se emplean para organizar una página en diferentes zonas llamadas marcos. En cada marco se puede mostrar una página web distinta, que pueden ser independientes entre sí o pueden estar relacionadas de alguna forma, como cuando un marco contiene el índice de un sitio web y otro marco muestra el contenido según el enlace pulsado en el índice del sitio.

Para un usuario que emplea un navegador no visual, el empleo de marcos puede dificultar la navegación, ya que las relaciones entre los contenidos en los distintos marcos pueden no ser obvias, por lo que se tiene que proporcionar información adicional que permita transmitir de forma alternativa las relaciones entre los distintos marcos.

El atributo title que se explicó en un comentario anterior, se emplea para proporcionar información adicional sobre cualquier elemento de la página. Por tanto, se puede emplear con las etiquetas frameset y frame para identificar la función y contenido de cada marco y facilitar la navegación entre ellos.

Muchas veces, una página puede estar dividida en muchos marcos y las relaciones
entre los marcos pueden no ser obvias, incluso si se emplea el atributo title. Para estas situaciones, se puede utilizar el atributo longdesc que se explicó hace un tiempo. Recordemos que el atributo longdesc complementa al atributo alt y se emplea para ofrecer una descripción más larga del elemento que la proporcionada por el atributo alt (en el caso de los marcos, la descripción proporcionada por el atributo title). Su valor tiene que ser una URI, es decir, la dirección de un recurso en Internet (normalmente, otra página web escrita con HTML).

Por último, también es posible crear una versión alternativa sin marcos de la página para aquellos navegadores no visuales no admiten las etiquetas frameset y frame, por lo que son incapaces de interpretarlas y de mostrar los marcos. Para estos casos, podemos emplear la etiqueta noframes para proporcionar un contenido alternativo.

La etiqueta noframes tiene un comportamiento distinto en función de si el navegador admite o no admite marcos:

• Navegador que sí admite marcos: se descarta el contenido de la etiqueta noframes (no se interpreta ni se visualiza).
• Navegador que no admite marcos: como tampoco admite la etiqueta noframes, se interpreta y visualiza el contenido de esta etiqueta.

Normalmente, se suele colocar en el contenido de la etiqueta noframes un enlace que permite acceder a una versión sin marcos de la misma página.

El atributo title

El objetivo del atributo alt es ofrecer un texto alternativo como sustituto de una imagen y no, como mucha gente cree y hace, un medio para proporcionar información adicional. Este mal uso del atributo alt proviene de la interpretación que hace de él el navegador Internet Explorer, que muestra el texto alternativo como una etiqueta de ayuda (tool tip). Otros navegadores lo muestran en la barra de estado de la ventana del navegador.

Si se desea incluir información adicional que no es esencial, se puede emplear el atributo title. Este atributo se puede usar en todas las etiquetas de HTML excepto base, basefont, head, html, meta, param, script y title.

En una imagen se puede emplear el atributo title para proporcionar información adicional que no es esencial, como la fecha de una fotografía, su autor o la cámara con la que se hizo.

En Internet Explorer, el atributo title tiene preferencia sobre el atributo alt cuando se muestra la etiqueta de ayuda. Por tanto, si no queremos que el texto alternativo se muestre en un navegador visual al situar el cursor del ratón sobre una imagen, simplemente tenemos que dejar el atributo title vacío: title="".