2.0Principio 2: Operable

2.0.0Principio 2 y sus 4 Pautas

El objetivo de este principio es que los usuarios sean capaces de operar los componentes de la interfaz de usuario y la navegación. Es decir, la interfaz de la página web no puede requerir una interacción que el usuario no pueda llevar a cabo.

Este principio está formado por cuatro pautas:

PAUTA 2.1 ACCESIBLE POR TECLADO

Proporcionar acceso a toda la funcionalidad mediante el teclado.

El acceso mediante teclado es el principal medio de interacción de las páginas accesibles ya que una gran parte de los productos de apoyo se basan en el uso del teclado o emulan su funcionamiento.

Si toda la funcionalidad es operable mediante teclado, entonces será accesible tanto para los usuarios de teclado como para los usuarios de productos de apoyo que simulan entradas de teclado como medio de interacción o que emplean el teclado de forma adicional.

PAUTA 2.2 TIEMPO SUFICIENTE

Proporcionar a los usuarios el tiempo suficiente para leer y usar el contenido.

Las personas con determinado tipo de discapacidad suelen necesitar más tiempo que la mayoría de los usuarios para completar tareas. Por ejemplo, los usuarios con discapacidades físicas, visuales, cognitivas, problemas de lectura, que usen productos de apoyo (lectores de pantalla), etc., puede llevarles más tiempo localizar y leer el contenido, así como interactuar y rellenar formularios.

Por tanto, debemos eliminar las limitaciones de tiempo o proporcionar el tiempo suficiente para llevar a cabo las diferentes tareas en nuestro sitio web.

PAUTA 2.3 CONVULSIONES

No diseñar contenido de un modo que se sepa podría provocar ataques, espasmos o convulsiones.

Las personas que tienen epilepsia fotosensitiva pueden sufrir ataques desencadenados por destellos con una frecuencia superior a los 3Hz (tres destellos por segundo). Entendiendo por destellos los cambios en la luminosidad relativa del contenido (p. ej. cambios rápidos de luz a oscuridad).

La mayoría de las personas ignoran que tienen este tipo de desórdenes hasta que los sufren, de forma que es posible que no tomen las precauciones necesarias. Debido a esto es importante que evitemos aquellos contenidos que puedan provocar destellos y sean potencialmente peligrosos para los usuarios con epilepsia fotosensitiva.

Algunos elementos que pueden provocar destellos en la pantalla, y con los que hemos de ser especialmente cuidadosos, son los scripts, applets, objetos flash o imágenes animadas.

PAUTA 2.4 NAVEGABLE

Proporcionar medios para ayudar a los usuarios a navegar, encontrar contenido y determinar dónde se encuentran.

El objetivo de esta pauta es ayudar a los usuarios a encontrar lo que necesiten y permitirles mantener una traza de su localización en el sitio web. Es decir que en todo momento sean capaces de responder a las preguntas ¿En dónde estoy? Y ¿ A dónde puedo ir?

Esto es especialmente importante para las personas con discapacidad, como usuarios con problemas cognitivos a los que les resulta más difícil reconocer el contenido, o usuarios que usen lectores de pantalla ya que acceden al contenido de forma lineal.

En esta pauta se tratan aspectos como la identificación del contenido (títulos de páginas, encabezados, etiquetas,...), identificación del destino de los enlaces, información sobre la localización dentro del sitio web, orden adecuado del foco (tabulación) y visibilidad del mismo, así como el permitir saltar contenido repetido en las páginas del sitio web.

2.1Principio 2 Pauta 1: Accesible Por Teclado

2.1.1Teclado [Nivel A]

Teclado: Toda la funcionalidad del contenido es operable a través de una interfaz de teclado sin que se requiera una determinada velocidad para cada pulsación individual de las teclas, excepto cuando la función interna requiere de una entrada que depende del trayecto de los movimientos del usuario y no sólo de los puntos inicial y final.

Nota 1: Esta excepción se refiere a la función subyacente, no a la técnica de entrada de datos.

Por ejemplo, si la entrada de texto se hace por medio de escritura a mano, la técnica de entrada (escritura a mano) depende del trazo (ruta trazada) pero la función interna (introducir texto) no.

Nota 2: Esto no prohíbe ni debería desanimar a los autores a proporcionar entrada de ratón u otros métodos de entrada de datos adicionales a la operabilidad a través del teclado.

Objetivo:

El objetivo de este criterio de conformidad es asegurar que, siempre que sea posible, se pueda operar el contenido a través de teclado o de un interfaz de teclado (de forma que los usuarios puedan usar un teclado alternativo).

Algunos dispositivos no tienen teclados de forma nativa (PDA, teléfono móvil, etc.) sin embargo suelen tener alguna forma de generar texto o simular pulsaciones de teclado. Cuando se habla de interfaz de teclado se refiere a que el contenido web pueda operarse mediante teclado, un emulador de teclado, o cualquier hardware o software que genere entrada de texto.

Al poder operarse mediante un interfaz de teclado los usuarios podrán usar un teclado alternativo que se adapte a sus necesidades aunque el dispositivo no disponga de teclado de forma nativa (teclado acoplado, teclado en pantalla, etc.).

Un teclado en pantalla se considera un "interfaz de teclado".

En este criterio de conformidad se consideran como excepciones aquellas acciones que no se pueden controlar mediante teclado de forma razonable. Estas excepciones tienen que ver con la función subyacente y no con la técnica utilizada para introducir datos. Por ejemplo, puede haber aplicaciones que funcionen mediante el ratón, e incluso puede que esa sea su forma principal de interacción, pero eso no impide que también se puedan implementar para ser operadas mediante teclado. Por ejemplo:

Una aplicación de dibujo basado en conectar los puntos se usa mediante ratón, pero también es posible usarla moviéndose entre los puntos con la tabulación y conectando un punto con otro con la barra espaciadora.

Un programa para dibujar una figura uniendo los puntos no es dependiente del ratón.

Una aplicación donde se usa la técnica de "arrastrar y soltar" (Drag N Drop) puede implementarse también con teclado mediante selección de los elementos y "cortar y pegar" (Cut & Paste).

Aplicación de relacionar elementos mediante 'Arrastrar y soltar'.

Una PDA que use un lápiz para reconocimiento de escritura a mano alzada puede proporcionar un teclado en pantalla o se le podría acoplar un teclado para introducir el texto.

La función subyacente de una aplicación de reconocimiento de escritura a mano alzada es la de entrada de texto y, por tanto, es operable con teclado.

A la PDA se le podría acoplar un teclado para operar con ella.

La mayoría de las acciones que podemos realizar con un ratón son también reproducibles mediante teclado (hacer clic, selección, mover, redimensionar, etc.). Por ejemplo:

Dibujar líneas rectas o formas geométricas no depende del camino o ruta usada.

Redimensionar ventanas, rotar o mover objetos de una ubicación a otra (si la ruta usada no es relevante) tampoco dependen de la ruta de entrada.

Sin embargo, sí existen algunos tipos de entrada basados en dispositivos de apuntamiento (ratón u otras entradas analógicas) que no son reproducibles mediante teclado y se admiten como excepciones en este criterio de conformidad. Por ejemplo:

Dibujar a mano alzada requiere una entrada dependiente del trazo, es decir, la ruta usada.

Dibujar con acuarela depende, además de una ruta, de la presión y/o velocidad del trazo.

Pilotar un simulador de vuelo también depende de la ruta de entrada y el uso del teclado no resulta preciso.

En estos casos la precisión en el manejo sería imposible o muy difícil de conseguir únicamente mediante teclado sin requerir de un número desorbitado o imposible de pulsaciones de teclado.

Este criterio de conformidad no impide usar el ratón como complemento, siempre y cuando también se soporte la interacción mediante el teclado.

Beneficiarios:

Beneficia a personas con ceguera, baja visión o con pulso inestable y dificultades para seguir un puntero, realizar trazos rectos con el ratón o realizar movimientos que requieran coordinación mano - ojo.

¿CÓMO CUMPLIR?

ASEGURAR EL CONTROL CON EL TECLADO USANDO ENLACES Y CONTROLES DE FORMULARIO ESTÁNDAR DE HTML .

Usando de forma adecuada los enlaces y controles estándar de (X)HTML aseguramos la interacción de los elementos de interfaz de usuario con el teclado y con los productos de apoyo.

Los agentes de usuario proporcionar acceso desde teclado para los enlaces y controles de formulario.

Los agentes de usuario mapean estos elementos con la API de accesibilidad del sistema y que utilizarán los productos de apoyo para extraer la información necesaria para presentarla a los usuarios: su rol, nombre, estado y valor.

En el criterio de conformidad 4.1.1 se verá con más detalle los conceptos de rol, nombre, valor y estado, así como la relación de estos con las API de accesibilidad y los productos de apoyo.

En la siguiente tabla se resume cómo se determinan las propiedades de accesibilidad a partir de enlaces y controles de formulario estándar en (X)HTML.

tabla de variables aplicables a formulario para accesibilidad

Tabla de referencia para formularios

Como comentamos antes, al usar (X)HTML de forma adecuada nos aseguramos la interacción entre los controles y el teclado o los productos de apoyo. Sin embargo, nuestra responsabilidad como desarrolladores es proporcionar los valores de aquellas propiedades de accesibilidad que sea necesario establecer y no se proporcionan de forma automática. Como por ejemplo, el texto de los enlaces o las etiquetas para los controles de formulario.

EN LOS SCRIPTS Y ELEMENTOS DE PROGRAMACIÓN USAR MANEJADORES DE EVENTO QUE PUEDAN LANZARSE MEDIANTE TECLADO.

De esta forma permitimos que las personas que dependen del teclado puedan acceder a la funcionalidad del contenido. Para lograrlo debemos asegurarnos que todos los manejadores de eventos lanzados por eventos de dispositivos diferentes del teclado también estén asociados a eventos de teclado.

Usando Funciones para el Teclado Además de para Otros Dispositivos .

Procuraremos usar manejadores de evento lógicos (que no dependan de dispositivos concretos) como onfocus, onblur, onselect, onload, onsubmit y onreset. Estos manejadores reconocen eventos tanto del ratón como del teclado.

Algunas funciones específicas de ratón tienen un equivalente que funciona para teclado. En caso de ser necesario usar manejadores de evento específicos de ratón se debe proporcionar también el manejador de evento de teclado equivalente para ejecutar la misma función. Por ejemplo:

  • onmousedown con onkeydown
  • onmouseup con onkeyup
  • onmouseover con onfocus
  • onmouseout con onblur

Esto es porque si usamos eventos de teclado junto con eventos de ratón nos aseguramos que se podrá interactuar con el contenido a través de una amplia variedad de dispositivos.

Algunos eventos como dbclick o mousemove son específicos de ratón y no disponen de equivalentes para teclado. Debemos evitar usar este tipo de eventos y, en caso de que los usemos, será únicamente para usos que no afecten al contenido o funcionalidad o bien los implementaremos de forma diferente para cada dispositivo (por ejemplo, incluyendo una serie de botones para ejecutar, a través del teclado, un equivalente de la función específica de ratón).

USANDO EL EVENTO onclick DE ENLACES Y BOTONES PARA HACER LAS ACCIONES ACCESIBLES MEDIANTE TECLADO

Si replicásemos todos los manejadores de eventos de ratón y de teclado tendríamos que usar onclick junto con onkeypress. Sin embargo, el manejador de evento onkeypress reacciona ante cualquier tecla, incluido el tabulador, dando lugar a problemas con la tabulación. Para evitar esto deberíamos comprobar antes que se ha pulsado la tecla adecuada (p. ej. retorno o barra espaciadora).

Aunque onclick sea, en principio, un manejador de evento de ratón la mayoría de los navegadores (X)HTML lo interpretan como el manejador de evento de acción por defecto para enlaces y botones y se activa tanto con el ratón como con el teclado, siendo así independiente de dispositivo. La acción por defecto se produce cuando se hace clic con el ratón, cuando se sitúa el foco sobre el elemento y se presiona la tecla de retorno o la barra espaciadora y cuando se acciona el elemento a través de la API de accesibilidad (p. ej. con un producto de apoyo).

Por tanto, para documentos (X)HTML , podemos usar el manejador de evento onclick sin necesidad de duplicarlo con onkeypress, evitando así los posibles problemas con la tabulación.

Para asegurar que las acciones y eventos que lanzan funciones de scripts se pueden invocar desde el teclado debemos asociarlas a elementos (X)HTML accionables por teclado de forma nativa: enlaces y botones. Si añadimos funciones de scripts, aunque sea con eventos de teclado, a elementos que no son de interacción (como elementos <img>, <span>, <div>, <td>, etc.) estos no serán accesibles mediante teclado al no recibir el foco y los productos de apoyo no reconocerán su rol o función.

En agentes de usuario no (X)HTML es posible que el comportamiento sea diferente y no se interprete onclick como manejador de evento genérico de acción y funcione sólo con ratón. En ese caso, sí debemos duplicarlo con onkeypress y, antes de lanzar los eventos, controlar antes que se ha pulsado la tecla adecuada (p. ej. retorno o barra espaciadora) para evitar los problemas de tabulación.

Aunque esta técnica se puede emplear cuando los scripts estén entre las tecnologías compatibles con la accesibilidad (con lo cual se supone que existe soporte), se recomienda proporcionar una forma alternativa de implementación o una explicación para aquellos entornos en los que no se soporten los scripts. Por ejemplo:

  • Mediante el atributo href en los enlaces.
  • Mediante mecanismos de envío estándar en botones de formulario.

En ocasiones es posible que no podamos lograr la misma forma de interacción mediante eventos tanto de teclado como de otros dispositivos específicos. En esos casos, debemos proporcionar un mecanismo redundante basado en el teclado para lograr la misma funcionalidad que está disponible para otros dispositivos.

De igual forma, si la técnica de "arrastrar y soltar" se usa para mover elementos de un lugar a otro entonces se puede usar, como mecanismo redundante de teclado, la técnica de "copiar y pegar". Finalmente, si "arrastrar y soltar" se usa, por ejemplo, en un test para reordenar respuestas o relacionar elementos entre sí, entonces se puede replicar la misma funcionalidad mediante menús de selección donde se escogerá el orden o el elemento adecuado, respectivamente.

2.1.2SIN TRAMPAS PARA EL FOCO DEL TECLADO [NIVEL A]

Si es posible mover el foco a un componente de la página usando una interfaz de teclado, entonces el foco se puede quitar de ese componente usando sólo la interfaz de teclado y, si se requiere algo más que las teclas de dirección o de tabulación, se informa al usuario el método apropiado para mover el foco.

Nota: En la medida en que cualquier contenido que no satisfaga este criterio puede interferir con la capacidad del usuario para emplear la página por completo, todo contenido de la página web (tanto si satisface o no otros criterios de conformidad) debe satisfacer este criterio. Véase Requisito de Conformidad 5: No interferencia.

Objetivo:

Asegurar que la navegación mediante el tabulador no queda atrapada en parte del contenido de la página.

Se trata de asegurar que el contenido no deja bloqueado el foco del teclado impidiendo que pueda salir.

Este es un problema habitual cuando se combinan diferentes formatos de contenido (video, audio, multimedia) mediante plugins o aplicaciones incrustadas.

Por ejemplo, es habitual ver cómo en algunas aplicaciones incrustadas (aplicaciones en Flash, controles de reproductores multimedia, etc.) el foco puede entrar normalmente en su interfaz con el teclado pero, una vez dentro, no vuelve a salir usando únicamente el teclado y es necesario hacer clic con el ratón en una zona exterior para recuperar el foco para el resto de la página. Esto representa un problema de accesibilidad ya que muchos usuarios con discapacidad no pueden usar el ratón u otro dispositivo de apuntamiento y dependen exclusivamente del teclado.

Se considera que el foco queda atrapado en parte del contenido si el foco entra normalmente con el teclado pero, una vez dentro, los usuarios no pueden o no saben cómo sacarlo usando únicamente el teclado. Esto no impide que el foco quede restringido a una zona del contenido mientras se opera con él siempre que sea posible recuperar el foco con el teclado de forma normal o se informa previamente cómo hacerlo.

Por ejemplo, se puede abrir una ventana modal que reciba el foco y tabulemos por ella recorriendo sus opciones. Una vez que lleguemos al final de la ventana el foco empieza a recorrerla de nuevo desde el principio. Al finalizar de operar con ella podemos activar los botones "Aceptar" o "Cancelar" para cerrarla y recuperar el foco para el resto de la página. En este caso, aunque el foco queda temporalmente restringido en la ventana, existe una forma conocida de recuperar el foco usando sólo el teclado y, por tanto, no se considera que exista una trampa.

Sin embargo, si el foco entra en la aplicación mediante el teclado (por ejemplo, en un reproductor multimedia), queda limitado a su interior y no existe algún medio para salir de la misma usando únicamente el teclado entonces sí se considera una trampa para el foco del teclado.

Si el foco no puede salir de la aplicación usando únicamente el teclado (sin usar el ratón u otro dispositivo de apuntamiento) sí se considera una trampa para el foco del teclado.

Beneficiarios:

Beneficia a personas que se basan en el teclado para utilizar Internet, incluidas las personas con ceguera y discapacidades físicas.

¿CÓMO CUMPLIR?

ASEGURAR QUE LOS USUARIOS NO SON ATRAPADOS EN EL CONTENIDO

Como comentábamos, los usuarios de teclado no pueden quedar atrapados en una sección del contenido de forma que la única forma de salir del mismo sea usando el ratón u otro dispositivo de apuntamiento.

Existen varias formas para asegurar que los usuarios son capaces de recuperar el foco de partes o secciones de contenido:

  • Asegurar que la forma usada para avanzar el foco (generalmente la tecla de tabulación) sale de la sección de contenido una vez que llega al final de su navegación interna y sigue recorriendo normalmente el resto de la página.
  • Proporcionar una función de teclado para sacar el foco de la sección de contenido. Se debe informar claramente, dentro de la sección de contenido, sobre cuál es la forma de sacar el foco (tecla o combinación de teclas).
  • Si la tecnología usada para incluir el contenido proporciona de forma nativa un mecanismo de teclado para devolver el foco al elemento padre (por ejemplo, la tecla ESC) entonces debemos documentarlo para que los usuarios sepan cómo salir de la sección de contenido.

Si la tecnología usada permite recibir el foco usando sólo el teclado pero, en cambio, no dispone de una forma nativa para devolverlo usando únicamente el teclado entonces debemos proporcionar (programar) nosotros esa característica y, si no es posible, no podremos usar dicha tecnología.

2.1.3Teclado (sin excepciones) [Nivel AAA]

Teclado (sin excepciones): Toda la funcionalidad del contenido se puede operar a través de una interfaz de teclado sin requerir una determinada velocidad en la pulsación de las teclas.

Objetivo:

Asegurar que todo el contenido se puede manejar con un teclado o interfaz de teclado.

En este caso, al contrario que en el criterio de conformidad 2.1.1 de nivel A, no está permitida ninguna excepción. Esto no quiere decir que las excepciones contempladas en el criterio de conformidad 2.1.1 ahora deban hacerse accesibles mediante teclado, sino que todo contenido que se base en entradas analógicas o tempodependientes no puede cumplir la pauta 2.1 para un nivel AAA.

Es decir, si por ejemplo nuestro sitio web tiene una aplicación de dibujo a mano alzada cuya funcionalidad es dependiente de ratón entonces NO es posible cumplir este criterio de conformidad y no puede tener un nivel de conformidad AAA.

Beneficiarios:

Beneficia a personas con ceguera, baja visión o con pulso inestable y dificultades para seguir un puntero, realizar trazos rectos con el ratón o realizar movimientos que requieran coordinación mano - ojo.

¿CÓMO CUMPLIR?

No existen técnicas adicionales para este criterio de conformidad. Se han de seguir las técnicas indicadas en el criterio de conformidad 2.1.1. Si esto no es posible porque son necesarias entradas analógicas o tempodependientes, entonces no es posible cumplir con este criterio de conformidad de nivel AAA.

2.2Principio 2 Pauta 2: Tiempo Suficiente

2.2.1Tiempo ajustable [Nivel A]

Para cada límite de tiempo impuesto por el contenido, se cumple al menos uno de los siguientes casos:

  • Apagar: El usuario puede detener el límite de tiempo antes de alcanzar el límite de tiempo; o
  • Ajustar: El usuario puede ajustar el límite de tiempo antes de alcanzar dicho límite en un rango amplio que es, al menos, diez veces mayor al tiempo fijado originalmente; o
  • Extender: Se advierte al usuario antes de que el tiempo expire y se le conceden al menos 20 segundos para extender el límite temporal con una acción simple (por ejemplo, "presione la barra de espacio") y el usuario puede extender ese límite de tiempo al menos diez veces; o
  • Excepción de tiempo real: El límite de tiempo es un requisito que forma parte de un evento en tiempo real (por ejemplo, una subasta) y no resulta posible ofrecer una alternativa al límite de tiempo; o
  • Excepción por ser esencial: El límite de tiempo es esencial y, si se extendiera, invalidaría la actividad; o
  • Excepción de 20 horas: El límite de tiempo es mayor a 20 horas.

Nota: Este criterio de conformidad ayuda a asegurarse de que los usuarios puedan completar una tarea sin cambios inesperados en el contenido o contexto que sean el resultado de un límite de tiempo. Este criterio de conformidad debe considerarse en combinación con el criterio de conformidad 3.2.1, que impone límites a los cambios de contenido o contexto como resultado de una acción del usuario.

Objetivo:

Asegurar que los usuarios con discapacidad tienen el tiempo suficiente para interactuar con la página web siempre que sea posible.

Las personas con discapacidades como ceguera, baja visión, dislexia o problemas cognitivos necesitan más tiempo para leer o interactuar con el contenido. Por tanto, debemos procurar que los sitios web no tengan límites de tiempo.

Si el sitio web necesita tener un límite de tiempo para realizar alguna tarea, entonces debemos proporcionar opciones para desactivar el límite de tiempo, ajustar su duración o extender el límite de tiempo para permitir que estos usuarios puedan completar la tarea con éxito.

Cualquier proceso que ocurra cada cierto tiempo, o después de un periodo de tiempo, sin que lo inicie el usuario se considera un límite de tiempo. Esto incluye:

  • Actualizaciones parciales o totales de contenido.
  • Cambios de contenido.
  • Finalización del periodo de tiempo que dispone el usuario para reaccionar ante una petición de entrada de datos.

Esto también incluye el contenido que se mueve o actualiza a un ritmo superior a la capacidad de lectura o entendimiento de los usuarios. En definitiva, todo el contenido animado, que se mueva o desplace introduce un tiempo límite en la capacidad de los usuarios para leer el contenido.

Sin embargo, hay casos en los que no es posible eliminar el límite de tiempo y por tanto se consideran excepciones:

  • Si el límite forma parte de un evento en tiempo real y no es posible una alternativa. Por ejemplo, en una subasta existe un tiempo límite para pujar y este tiempo ha de ser el mismo para todos los usuarios o de lo contrarío sería injusto.
  • Si el límite de tiempo se considera esencial y su modificación invalidaría la actividad. Por ejemplo, la venta online de entradas o tiquetes (cine, tren, avión, etc.) puede tener un límite de tiempo para confirmar su compra con el objetivo de que no permanezcan indefinidamente reservadas y puedan volver a estar disponibles para el resto de usuarios. En este caso, el límite de tiempo es esencial y no puede extenderse sin invalidar la actividad.
  • Si el límite de tiempo es superior a 20 horas no se considera un problema porque se trata de un tiempo suficiente al ser superior al tiempo medio por día durante el cual una persona está despierta.

Este criterio de conformidad se refiere únicamente a los límites de tiempo establecidos por el propio contenido y que están bajo el control del autor de la página. Los límites de tiempo impuesto por los agentes de usuario o por factores intrínsecos de Internet no están sujetos a requisitos de conformidad según las WCAG.

Beneficiarios:

Beneficia a personas con discapacidades físicas, sordera o problemas de lectura y comprensión.

¿CÓMO CUMPLIR?

La forma básica para cumplir con este criterio de conformidad, y que es aplicable en cualquier situación que se nos plantee, es proporcionar un medio para que los usuarios desactiven el límite de tiempo. De esta forma, las personas que no puedan completar las tareas en el tiempo especificado podrán desactivar el límite de tiempo.

Es fundamental que el mecanismo usado para desactivar el límite de tiempo (p. ej. un enlace o botón) lo puedan usar todos los usuarios, incluidos los usuarios con discapacidad, antes de que termine el límite de tiempo. Para ello debe estar situado al comienzo de la página o cerca del mismo de forma que cualquier usuario lo pueda encontrar y activar fácilmente incluso aunque sea diez veces más lento que la mayoría de los usuarios.

Existen otras técnicas, además de permitir desactivar los límites de tiempo, que podemos aplicar dependiendo de la situación en la que nos encontremos.

SI EXISTEN LÍMITES DE TIEMPO DE SESIONES

Cuando existen límites de tiempo de sesiones se corre el riesgo de que la sesión expire cuando los usuarios (especialmente los usuarios con discapacidad) estén rellenando un formulario de varios pasos, perdiendo los datos introducidos hasta el momento. Para evitar esto podemos proporcionar una casilla de verificación (checkbox) en la primera página de los formularios de varios pasos que permita a los usuarios solicitar una ampliación o desactivación del límite de tiempo.

La ampliación por un periodo indefinido de tiempo no sería adecuada si compromete la privacidad del usuario o la seguridad de la red.

Si el límite de tiempo está controlado por un script

Si los scripts están dentro de las tecnologías compatibles con la accesibilidad y se emplean para controlar límites de tiempo, los usuarios deben poder cambiar dichos límites antes del comienzo de las actividades que estos límites.

Para ello podemos proporcionar:

  • Un medio que permita configurar el límite de tiempo hasta al menos diez veces más que el límite de tiempo por defecto. Por ejemplo, un mecanismo que permita cambiar las preferencias o un control en la página, como un conjunto de botones de radio con varias opciones, que permitan ampliar el tiempo.
  • Un script que avise que el límite de tiempo está a punto de terminar y además permitir al usuario ampliar el límite establecido por defecto. El mensaje de aviso (p. ej. un diálogo de confirmación) debe mostrarse al menos 20 segundos antes de que termine el límite de tiempo y permitir que los usuarios puedan ampliar dicho límite (p. ej. preguntando si necesitan más tiempo). Si el usuario responde que "no", o no responde, se permite que el límite de tiempo termine.
ventana emergente con advertencia de desconexión y botones de acción

Ventana para alertar y permitir ampliar el límite de tiempo.

Si existe un límite de tiempo de lectura

Existe un límite de tiempo de lectura cuando el contenido se cambia o actualiza (parcial o totalmente), se mueva o se desplace (scroll). En todos estos casos se está introduciendo un límite de tiempo en la capacidad de los usuarios para leer el contenido.

En general, sea cual sea la tecnología que empleemos para incluir movimiento o desplazamiento del contenido (Flash, scripts, etc.), una forma para cumplir este criterio de conformidad es proporcionar un mecanismo para que los usuarios puedan pausarlo y reanudarlo desde donde se detuvo. Este mecanismo pueden ser botones interactivos o atajos de teclado siempre que estén debidamente documentados.

En el caso del texto que se desplace (scroll) mediante scripts podemos usar alguna técnica para proporcionar un mecanismo para detenerlo.

Para el texto en movimiento, que se desplace o actualice automáticamente mediante scripts, es posible también usar alguna técnica para proporcionar un mecanismo que permita parar el movimiento y visualizar el bloque completo de texto de forma estática. El texto se puede mostrar en una ventana aparte o en la misma página ocupando una zona de mayor tamaño permitiendo así que los usuarios lean el contenido a su ritmo.

Algunos fallos comunes que limitan el tiempo de lectura de los usuarios son:
  • Usar redirecciones (tanto de servidor como de cliente) junto con un límite de tiempo. Si la redirección se realiza después de un cierto tiempo se produce un cambio de contexto inesperado que interrumpe la actividad de los usuarios y puede provocar desorientación. Si el límite de tiempo es muy corto puede que no sea suficiente para que algunos usuarios lean el contenido y se percaten de que se va a producir una redirección.
  • Por el contrario, sí se permiten usar redirecciones siempre que sean instantáneas y transparentes a los usuarios para que no se perciban como un cambio de contexto. Por tanto, se permiten redirecciones de servidor usando los códigos de respuesta 3xx (p. ej. 301 Moved Permanently) ya que son instantáneas. También se permiten las redirecciones de cliente siempre que el límite de tiempo se establezca en cero (p. ej. <meta http-equiv="refresh" content="0; URL="http://www.ejemplo.com">). Aun así, es preferible usar redirecciones de servidor en vez de cliente.
  • Usar actualizaciones periódicas de la página (completa). Si el tiempo es demasiado corto algunos usuarios no podrán leer todo el contenido y los lectores de pantalla comenzarán a leer de nuevo desde el comienzo de la página.
  • Si la página contiene información que necesite actualizarse de forma periódica entonces debemos informar a los usuarios para que sean ellos quienes actualicen la página y proporcionar algún mecanismo (enlace o botón) para que lo hagan. Las actualizaciones de parte del contenido de la página se tratan en el criterio de conformidad 2.2.2.

2.2.2Poner en pausa, detener, ocultar [Nivel A]

Poner en pausa, detener, ocultar: Para la información que tiene movimiento, parpadeo, se desplaza o se actualiza automáticamente, se cumplen todos los casos siguientes:

  • Movimiento, parpadeo, desplazamiento: Para toda información que se mueve, parpadea o se desplaza, que (1) comienza automáticamente, (2) dura más de cinco segundos y (3) se presenta en paralelo con otro contenido, existe un mecanismo para que el usuario la pueda poner en pausa, detener u ocultar, a menos que el movimiento, parpadeo o desplazamiento sea parte esencial de una actividad; y
  • Actualización automática: Para toda información que se actualiza automáticamente, que (1) se inicia automáticamente y (2) se presenta en paralelo con otro contenido, existe un mecanismo para que el usuario la pueda poner en pausa, detener u ocultar, o controlar la frecuencia de actualización a menos que la actualización automática sea parte esencial de una actividad.

Nota 1: Para los requisitos relacionados con el parpadeo o el destello de contenido, véase la pauta 2.3.

Nota 2: En la medida en que cualquier contenido que no satisfaga este criterio puede interferir con la capacidad del usuario para emplear la página como un todo, todo contenido de la página web (tanto si satisface o no otros criterios de conformidad) debe satisfacer este criterio.

Véase Requisito de Conformidad 5: No interferencia.

Nota 3: Para el contenido que es actualizado periódicamente por medio de un software, o que se sirve al usuario por medio de streaming, no hay obligación de preservar o presentar la información que ha sido generada o recibida entre el inicio de la pausa y el reinicio de la presentación; no sólo podría no ser técnicamente posible, sino que además en muchas ocasiones podría ser erróneo o engañoso hacerlo.

Nota 4: Una animación que ocurre como parte de una fase de precarga de un contenido o una situación similar puede ser considerada esencial si no se permite interacción a ningún usuario durante esa fase, y si el hecho de no indicar el progreso pudiera confundir a los usuarios y hacerles creer que ha habido un fallo en el contenido.

Objetivo:

Evitar que se distraigan los usuarios mientras interactúan con la página.

En el criterio de conformidad 2.2.1 también se trataba el movimiento, desplazamiento y actualización del contenido pero desde el punto de vista del límite de tiempo que supone para la lectura. En este criterio de conformidad lo que se tiene en cuenta es la distracción que este tipo de contenido puede provocar a determinado tipo de personas.

Se considera contenido con movimiento, parpadeo y desplazamiento aquel contenido que transmite sensación de movimiento. Por ejemplo:

  • Imágenes en movimiento y animaciones.
  • Presentaciones multimedia.
  • Juegos en tiempo real.
  • Carruseles con información deslizante
  • Etc.

Este tipo de contenido se suele usar para llamar la atención de los usuarios. Si bien esto es efectivo para la mayoría de los usuarios, si el movimiento, parpadeo o desplazamiento persiste puede suponer un problema para las personas con problemas cognitivos, de lectura o déficit de atención. Les puede acaparar su atención de forma que les dificulte o incluso imposibilite el uso del resto de la página.

Por otra parte, las actualizaciones automáticas se refieren a contenido que se actualiza o desaparece cada cierto intervalo de tiempo. Cuando la información es perecedera y su validez caduca al poco tiempo se suelen usar actualizaciones automáticas. Por ejemplo:

  • Información meteorológica en tiempo real.
  • Noticias de última hora.
  • Resultados deportivos.
  • Información financiera (bolsa, etc.)
  • Presentaciones con información que avanza automáticamente.
  • Mensajería en tiempo real.
  • Etc.

Este contenido, además de introducir un límite de tiempo de lectura y provocar problemas en los lectores de pantalla (como se ha comentado en el criterio de conformidad 2.2.1) también provoca distracción en cierto grupo de usuarios.

Para todo este tipo de contenido se debe cumplir alguna de las siguientes condiciones:

  • Que no comience de forma automática. Es decir, sólo comienza bajo petición de los usuarios.
  • En el caso del movimiento, parpadeo o desplazamiento de contenido, que no dure más de cinco segundos. Se ha escogido un límite de cinco segundos porque es lo suficientemente largo para atraer la atención de los usuarios, pero no tan largo como para distraer del uso del resto de la página a usuarios con cierto tipo de discapacidad.
  • Que sea el único contenido de la página. Si es el único contenido de la página entonces no existe otro contenido paralelo sobre el que se pueda distraer la atención.

En caso de que no se cumpla ninguna de las condiciones anteriores, tenemos varias opciones:

  • Permitir pausar y reiniciar el movimiento, parpadeo, desplazamiento o actualización. Al reanudar el contenido existen dos posibilidades:
  • Reanudarlo desde donde se detuvo: aplicable cuando los usuarios pausan el contenido para disponer de tiempo para su lectura y la información no está asociada a eventos en tiempo real.
  • Actualizar a la información más reciente: mejor para información perecedera asociada a eventos en tiempo real (información meteorológica, de tráfico, bursátil, subastas, etc.) que podría ser falsa si al reanudarse se muestra información obsoleta.
  • Permitir detener el movimiento, parpadeo, desplazamiento o actualización.
  • Permitir ocultar el contenido en movimiento, parpadeo, desplazamiento o actualización. Sólo se recomienda esta opción en caso de que se trate de contenido decorativo que no proporcione información.

Algunos ejemplos que cumplen este criterio de conformidad pueden ser:

  • Un banner publicitario usa movimiento y parpadeo para llamar la atención pero se detiene antes de que pasen cinco segundos.
  • Un carrusel de noticias, situado en la página junto con otro contenido, tiene botones para pausar y reiniciar el contenido. Al pausar se detiene el desplazamiento y al reanudar sigue desde el punto en el que se pausó.
  • Un anuncio a pantalla completa antes de acceder al contenido. Aunque dure más de cinco segundos, como es un requisito para todos los usuarios y no se presenta en paralelo con otro contenido, no es necesario ofrecer un mecanismo para pausarlo, detenerlo u ocultarlo.

Se consideran como excepción los casos donde el movimiento, parpadeo, desplazamiento o actualización es parte esencial para una actividad. Es decir, si se eliminase, afectaría a la información o funcionalidad del contenido sin que se pudiese lograr de otra forma. Por ejemplo, una animación de precarga de una página o contenido se considera esencial si no indicar el progreso puede hacer creer a los usuarios que ha habido un error en la página.

Una animación de precarga de un contenido se puede considerar esencial.

Beneficiarios:

Beneficia a personas con discapacidades cognitivas, déficit de atención para las que puede llegar a ser imposible interactuar con la web.

¿CÓMO CUMPLIR?

Existen varias técnicas que podemos emplear para cumplir este criterio de conformidad, las cuales están enfocadas a pausar, detener u ocultar el contenido, o bien para evitar que su duración sea superior a cinco segundos.

PERMITIR PAUSAR Y REANUDAR EL CONTENIDO DESDE DONDE SE DETUVO

En general, sea cual sea la tecnología que empleemos para incluir movimiento o desplazamiento del contenido (Flash, scripts, etc.), una forma para cumplir este criterio de conformidad (al igual que ocurría con el 2.2.1) es proporcionar un mecanismo para que los usuarios puedan pausarlo y reanudarlo desde donde se detuvo. Este mecanismo puede estar compuesto por botones interactivos o atajos de teclado siempre que estén debidamente documentados.

En el caso del texto que se desplace (scroll) mediante scripts podemos usar alguna técnica para proporcionar un mecanismo para detenerlo,

EMPLEAR UN CONTROL EN LA PÁGINA QUE PERMITA PARAR EL MOVIMIENTO, PARPADEO O ACTUALIZACIÓN AUTOMÁTICA DEL CONTENIDO

De igual forma que podemos pausar y reanudar el contenido, otra opción es proporcionar un control que permita a los usuarios detener el movimiento, parpadeo o actualización automática del contenido.

Se puede usar un único control para detener todo el contenido de la página (situado al comienzo) o bien usar un control para cada parte del contenido con movimiento, parpadeo o actualización (situado junto a él).

Por ejemplo, una página muestra información sobre resultados deportivos en una sección de contenido que se actualiza cada cierto tiempo. Se les puede preguntar a los usuarios si quieren que la información se actualice automáticamente (p. ej. con una casilla de verificación) o prefieren actualizarla ellos mismos usando un botón "Actualizar".

Otro ejemplo puede ser una animación con un contenido que se mueve o parpadea y que dispone de un botón para parar la animación.

Nota: Cuando el contenido en movimiento o parpadeo incluye texto que al detenerse no se muestra de forma completa se debe usar la opción de pausar y reanudar.

PROPORCIONAR UN ENLACE, BOTÓN U OTRO MECANISMO PARA RECARGAR LA PÁGINA SIN EL CONTENIDO PARPADEANTE

Sólo podemos eliminar de la página el contenido con parpadeo si éste es decorativo, no aporta información o funcionalidad adicional a la página, o es un contenido redundante de otro ya existente y sin parpadeo. Es decir, la página sin el contenido parpadeante debe contener toda la información y funcionalidad de la página original.

CREAR EL CONTENIDO QUE PARPADEA DE FORMA QUE DURE MENOS DE 5 SEGUNDOS O BIEN QUE LO PUEDAN DETENER LOS USUARIOS

Una forma de cumplir este criterio de conformidad es hacer que todo el contenido que parpadee lo haga durante un intervalo inferior a cinco segundos, para minimizar la distracción que este tipo de contenido puede provocar.

Por ejemplo, una tienda online puede poner un texto en un color llamativo y que parpadea para llamar más la atención sobre algunos productos (p. ej. "¡Descuento 30%!"). Al cabo de cinco segundos el texto deja de parpadear.

El contenido parpadeante se puede crear usando una gran variedad de tecnologías (GIF animados, Flash, videos, scripts, CSS, etc.). Algunas de estas tecnologías permiten incluir opciones para detener el parpadeo o para limitar su duración.

Configurar los GIF animados para que se detengan después de n ciclos (antes de 5 segundos)

Los GIF animados permiten controlar el número de imágenes totales que contienen, el número de imágenes por segundo y el número de repeticiones. Con estos tres factores podemos crear GIF animados de forma que se detengan antes de cinco segundos.

Utilizar scripts para controlar el parpadeo y detenerlo en 5 segundos o menos

Es posible usar scripts para añadir efectos de parpadeo al contenido. Del mismo modo, también podemos controlar el tiempo (setTimeout()) y detener dichos efectos al cabo de cinco segundos o antes.

Utilizar una tecnología para incluir contenido parpadeante de forma que se pueda detener usando el agente de usuario

Con algunas tecnologías los agentes de usuario permiten detener las animaciones, movimientos y, por tanto, el parpadeo. Por ejemplo, algunos navegadores permiten detener las imágenes PNG animadas (APNG) mediante la tecla ESC.

Usando estas tecnologías nos aseguramos que los usuarios podrán detener el contenido a través de su navegador o producto de apoyo.

Algunos fallos comunes al incluir contenido parpadeante son:

Usar el elemento <tt></tt>. Este elemento, además de no ser parte de la especificación oficial de (X)HTML, genera un parpadeo que no se puede detener y permanece parpadeando mientras se muestra la página.

Usar <tt>text-decoration:blink</tt> (CSS), scripts, Flash, Java u otra tecnología para incluir contenido parpadeante sin que se detenga antes de cinco segundos o sin un mecanismo que permita detenerlo.

2.2.3Sin tiempo [Nivel AAA]

El tiempo no es parte esencial del evento o actividad presentada por el contenido, exceptuando las presentaciones multimedia no interactivas y los eventos en tiempo real.

Objetivo:

Reducir los contenidos que requieren interacciones con límites de tiempo.

El objetivo de este criterio de conformidad es el mismo que el del criterio de conformidad 2.2.1 solo que ahora, al ser de un nivel AAA, las únicas excepciones que contempla son:

  • Eventos en tiempo real.
  • Contenido multimedia sincronizado siempre que no tenga interacción (videos, películas, etc.)

Beneficiarios:

Beneficia a todo tipo de personas.

¿CÓMO CUMPLIR?

PERMITIR A LOS USUARIOS COMPLETAR UNA ACTIVIDAD SIN LÍMITES DE TIEMPO .

El objetivo es proporcionar a los usuarios todo el tiempo que sea necesario para que puedan completar una actividad. Por tanto, para un nivel AAA, nuestro sitio web no debe contener ninguna actividad que requiera una interacción con un límite de tiempo, salvo que este límite de tiempo sea esencial.

Por ejemplo, un juego puede diseñarse para que se base en turnos sin límite de tiempo en vez de hacerlo en tiempo real.

2.2.4Interrupciones [Nivel AAA]

El usuario puede postergar o suprimir las interrupciones, excepto cuando las interrupciones implican una emergencia.

Objetivo:

Permitir a los usuarios detener las actualizaciones (de cliente o servidor) excepto en caso de emergencias.

Cuando se produce una actualización automática los lectores de pantalla comienzan a leer la página desde el principio. Esto, además de desorientar, impide que los usuarios de estos productos de apoyo puedan acceder a todo el contenido de la página al reiniciarse continuamente la lectura desde el comienzo.

De igual forma, los usuarios de magnificadores de pantalla o las personas con problemas de lectura también se desorientarán cuando se producen actualizaciones automáticas. Por tanto, debemos permitir que los usuarios puedan cancelar las actualizaciones automáticas o, al menos, que las puedan posponer.

Se consideran como excepciones, las interrupciones que están relacionadas con emergencias entendiendo como emergencias las situaciones imprevistas que requieren una acción inmediata para preservar la salud y la integridad física, la seguridad o la propiedad (incluyendo la pérdida de datos, conexión, etc.). Se permiten mensajes de alerta para avisar del peligro de estas situaciones.

Una catástrofe se considera una amenaza civil y un virus informático es una amenaza para la seguridad del usuario.

Beneficiarios:

Beneficia a personas con déficit de atención y personas con baja visión que utilizan lectores de pantalla.

¿CÓMO CUMPLIR?

Para cumplir este criterio de conformidad tenemos varias opciones:

PROPORCIONAR UN MECANISMO PARA POSPONER UNA ACTUALIZACIÓN DE CONTENIDO .

Podemos proporcionar un mecanismo para asegurar que los usuarios puedan detener o posponer las actualizaciones automáticas de contenido o las interrupciones que no sean emergencias.

Esto se puede realizar de varias formas:

      A través de una configuración de las preferencias de la página permitiendo, por ejemplo, activar, desactivar y ajustar la frecuencia de las actualizaciones en caso de que las activen. Para ello se puede usar un pequeño formulario de configuración.
      Avisando a los usuarios de que se va a producir una actualización y permitir que la puedan desactivar.

Si se permite al usuario la configuración de las preferencias, las actualizaciones automáticas deben estar desactivadas por defecto o, en caso contrario, debemos avisar al usuario previamente y permitirle desactivarlas.

PROPORCIONAR UN MECANISMO PARA SOLICITAR LA ACTUALIZACIÓN DE LOS CONTENIDOS EN LUGAR DE ACTUALIZAR AUTOMÁTICAMENTE

También podemos proporcionar un mecanismo para que los usuarios puedan solicitar la actualización cuando lo deseen. De esta forma evitamos la confusión y desorientación que puede producir un cambio de contexto inesperado.

Por ejemplo, la página puede contener información perecedera que deba actualizarse periódicamente para asegurar que siga siendo válida. En vez de realizar actualizaciones automáticas, podemos avisar a los usuarios de la necesidad de actualizar el contenido y permitirles solicitar la actualización cuando ellos lo consideren necesario a través de, por ejemplo, un enlace a la misma página ("Actualizar esta página").

Algunos fallos comunes relacionados con la actualización del contenido son:

Usar actualizaciones y redirecciones (meta http-equiv) de la página junto con un límite de tiempo ({tiempo-limite}; url= ...). Si la redirección o actualización se realiza después de un cierto tiempo se produce un cambio de contexto inesperado que interrumpe la actividad de los usuarios y puede provocar desorientación.

Por el contrario, sí se permiten usar redirecciones siempre que sean instantáneas y transparentes a los usuarios para que no se perciban como un cambio de contexto.

SI SE USAN ALERTAS MEDIANTE SCRIPTS, PERMITIR QUE LAS ALERTAS NO ESENCIALES SEAN OPCIONALES

Si usamos scripts para mostrar mensajes de alerta entonces debemos proporcionar un mecanismo que permita a los usuarios escoger si desean que se muestren todas las alertas o sólo aquellas relacionadas con emergencias.

Por ejemplo, este mecanismo puede ser un botón, casilla de verificación o similar que active y desactive la visualización de alertas no relacionadas con emergencias (como la cita del día, consejo del día, cuenta atrás hasta un determinado evento, etc.).

Las alertas que no se trate de emergencias deben estar desactivadas por defecto y los usuarios deben activarlas manualmente. Opcionalmente, podemos guardar las preferencias de los usuarios a través de diferentes sesiones (cookies).

2.2.5Re-autentificación [Nivel AAA]

Cuando expira una sesión autentificada, el usuario puede continuar la actividad sin pérdida de datos tras volver a identificarse.

Objetivo:

Permitir completar transacciones autentificadas que tengan un límite de inactividad u otra circunstancia que pueda causar la desconexión a mitad de la transacción.

Muchos sitios pueden forzar el cierre de sesiones autentificadas después de un determinado periodo de inactividad.

Las razones por que se introduce este límite de tiempo pueden ser varias:

  • Por motivos de seguridad para evitar que, si el usuario se ausenta del ordenador durante cierto tiempo y otra persona ocupa su puesto, puedan suplantarle la identidad.
  • Porque la naturaleza de la actividad requiera un límite de tiempo, como la compra online de billetes (tren, autobús, avión, etc.) donde el tiempo de reserva es limitado.
  • Por problemas técnicos como desconexiones del sistema, caída de servidores, etc.

Estos límites de tiempo pueden causar problemas a personas con determinado tipo de discapacidad a los que les puede llevar más tiempo completar una actividad.

formulario extenso y con variedad de campos complejos

Si un formulario es de gran extensión puede que algunos usuarios con determinado tipo de discapacidad no lo puedan completar antes de que termine una sesión autentificada.

Por tanto, en caso de producirse la desconexión debemos permitir que los usuarios puedan re-autenticarse y continuar con la actividad sin perder los datos ya introducidos.

Beneficiarios:

Beneficia a personas que requieran de un tiempo adicional para completar una actividad. Por ejemplo, personas con déficit de atención y personas con baja visión que utilizan lectores de pantalla.

¿CÓMO CUMPLIR?

Se deben proporcionar opciones para continuar sin pérdida de datos usando alguna de las siguientes técnicas:

GUARDAR LA INFORMACIÓN DE MODO QUE PUEDA SER UTILIZADA DESPUÉS DE QUE EL USUARIO HAYA VUELTO A AUTENTIFICARSE

Al enviar los datos de un formulario, si ya ha terminado la sesión entonces el servidor solicita que el usuario se re-autentique antes de procesar los datos. En este caso, podemos hacer lo siguiente:

  • Almacenar los datos temporalmente en el servidor mientras el usuario se reautentifica.
  • Una vez que el usuario se haya reautentificado, recuperar los datos de la caché y procesar el formulario como si no se hubiese terminado la sesión.

No es necesario mantener los datos indefinidamente, solamente el tiempo necesario para que la re-autenticación tenga éxito (un día es suficiente).

Por ejemplo, es posible que se nos termine el tiempo de sesión antes de redactar un mensaje en un cliente de correo web o en un foro de discusión. Al enviar el mensaje se nos pide que nos autentifiquemos de nuevo.

Una vez reautentificados, en vez de perder el mensaje éste se procesa y se envía normalmente.

CODIFICAR LOS DATOS DEL USUARIO COMO OCULTOS O ENCRIPTADOS EN UNA PÁGINA DE REAUTENTICACIÓN

En ocasiones no podemos almacenar en el servidor la información enviada por los usuarios. Por ejemplo, cuando almacenar la información del usuario puede suponer un riesgo legal (protección de datos del usuario), de seguridad para el servidor, o no hay capacidad técnica (almacenamiento de datos).

En estos casos lo que podemos hacer es lo siguiente:

  • Pasar la información (como datos ocultos) desde el formulario de envío, a través del servidor, hasta la página de re-autenticación.
  • Cuando el usuario se re-autentica, se reenvían los datos directamente desde la página de re-autenticación al servidor para que los procese como si se hubiese enviado el formulario normalmente. O bien, se muestran al usuario los datos en una página para que los revise antes de enviarlos de nuevo.

2.3Principio 2 Pauta 3: Convulsiones

2.3.0Introducción

No diseñar contenido de un modo que se sepa podría provocar ataques, espasmos o convulsiones.

Las personas con epilepsia fotosensitiva pueden sufrir ataques desencadenados por contenido con destellos, cambios rápidos de luz a oscuridad, que superen cierta frecuencia y tamaño. Este tipo de contenido les puede provocar trastornos que varían desde simples dolores de cabeza o mareos, hasta convulsiones o ataques epilépticos.

Es conocido un caso real (en Japón en 1997) en el que una famosa serie de dibujos animados, debido a los destellos presentes en uno de sus capítulos, provocó que 700 niños tuviesen que ser hospitalizados, 500 de ellos con algún tipo de ataque epiléptico.

tabla de variables aplicables a formulario para accesibilidad

Una serie de dibujos animados produjo ataques epilépticos a gran número de personas ep. "Soldado Eléctrico Porygon".

2.3.1Umbral de tres destellos o menos [Nivel A]

Las páginas web no contienen nada que destelle más de tres veces en un segundo, o el destello está por debajo del umbral de destello general y de destello rojo.

Nota: En la medida en que cualquier contenido que no satisfaga este criterio puede interferir con la capacidad del usuario para emplear la página como un todo, todo contenido de la página web (tanto si satisface o no otros criterios de conformidad) debe satisfacer este criterio. Véase Requisito de Conformidad 5: Sin interferencia.

Objetivo:

Permitir que los usuarios accedan a todo el contenido sin que éste les cause ataques fotosensitivos.

Para evitar que las personas con problemas fotosensitivos puedan sufrir trastornos al ver contenido con destellos tenemos que evitar incluir este tipo de contenido y, si lo hacemos, éste no debe superar un determinado margen de seguridad.

Antes de continuar, y para aclarar a qué tipo de contenido se refiere este criterio de conformidad, veremos las diferencias entre contenido con parpadeo y contenido con destellos:

  • Parpadeos: Cambios entre dos estados visuales de forma que tiene por objeto captar la atención de los usuarios. Asimismo, pueden provocar distracción en algunos usuarios con problemas cognitivos o neurológicos. Se permiten siempre que duren un periodo corto de tiempo, si se detienen automáticamente o si los usuarios pueden detenerlos.
  • Destellos: Cambios en la luminosidad relativa (cambios bruscos de luz a oscuridad) que puede provocar trastornos a los usuarios (convulsiones, mareos, dolores de cabeza) si superan cierto tamaño y se encuentran en un rango de frecuencia determinado.

Los destellos no se permiten ni durante un segundo ya que podrían tener efectos dañinos inmediatos incluso antes de que los usuarios se den cuenta de su presencia y puedan evitarlos. Además, algunos usuarios no son conscientes de que tienen problemas con este tipo de contenidos hasta que los sufren y, por tanto, es posible que no hagan uso de mecanismos para detenerlos o evitarlos.

El margen de seguridad a partir del cual se considera que los destellos tienen consecuencias negativas es más permisivo que el que se aplicaba en las WCAG 1.0. En la primera versión de las pautas no se permitía ningún contenido con destellos cuya frecuencia estuviese entre 3Hz y 50Hz, independientemente de su tamaño. Así, un contenido con destellos incluso de un tamaño de 1x1 píxeles incumplía las WCAG 1.0.

En cambio, en las WCAG 2.0 se han ampliado los márgenes de seguridad adaptándolos a las circunstancias en las que realmente los destellos implican riesgos para los usuarios. Para establecer estos márgenes se ha tomado como referencia las especificaciones existentes para contenidos televisivos, adaptándolos a las particularidades de las pantallas de ordenador, con menor distancia y mayor ángulo de visión.

El margen de seguridad se basa en la frecuencia de los destellos y el área de los mismos (tamaño a partir del cual se consideran peligrosos).

Beneficiarios

:

Beneficia a personas con trastornos fotosensitivos (p. ej. epilepsia fotosensitiva) que pueden sufrir ataques al ver destellos del contenido.

¿CÓMO CUMPLIR?

Para cumplir este criterio de conformidad tenemos básicamente dos opciones:

  • No incluir ningún contenido que tenga destellos con una frecuencia superior a tres destellos por segundo.
  • En caso de incluir contenido con destellos, mantener el área con destellos lo suficientemente pequeña.

ASEGURAR QUE NINGÚN CONTENIDO TIENE DESTELLOS CON UNA FRECUENCIA SUPERIOR A TRES DESTELLOS POR SEGUNDO .

Esta es la forma más fácil de cumplir y nos asegura que el contenido de la página no provocará trastornos a los usuarios por destellos del contenido.

Para calcular el número de destellos se cuentan los cambios de luz a oscuridad y viceversa y se dividen entre dos.

Así, 3.5 destellos serían 7 transiciones de luz a oscuridad y viceversa: luz - oscuridad - luz - oscuridad - luz - oscuridad - luz - oscuridad.

MANTENER EL ÁREA CON DESTELLOS LO SUFICIENTEMENTE PEQUEÑA

En caso de que incluyamos contenido con destellos, entonces sólo debe existir simultáneamente una única área con destellos y esta ha de ser lo suficientemente pequeña como para no tener efectos perniciosos.

Se considera que el área segura se corresponde con un 25% de un campo de visión de 10o a una distancia habitual de visionado. El área del contenido con destellos no debe ser superior a este área segura.

Proporciones de area segura en pantalla

El área segura para contenido web, para una resolución estándar de 1024x768 a una distancia de visión de entre 56 y 66 centímetros, es cualquier forma con un área inferior a 21824 píxeles cuadrados.

Para facilitar el cumplimiento de este criterio de conformidad por parte de los desarrolladores web, evitando tener que calcular cuál es el área segura, en las WCAG 2.0 se da como referencia lo que se conoce como área segura para contenido web. Este área se ha calculado en base a los criterios anteriores pero considerados para una resolución estándar de 1024x768 píxeles y a una distancia de visión de entre 28 y 66 centímetros. Según esto, el área segura para contenido web es cualquier forma con un área inferior a 21824 píxeles cuadrados. Este área, traducida a un cuadrado, se corresponde aproximadamente con un cuadrado de 148 píxeles de lado.

2.3.2Tres destellos [Nivel AAA]

Las páginas web no contienen nada que destelle más de tres veces por segundo.

Objetivo:

Reducir al máximo las posibilidades de producir ataques.

Este criterio de conformidad es similar al anterior sólo que en este caso, al ser de nivel AAA, no se admite la posibilidad de incluir contenido con destellos con un tamaño inferior al área segura. De esta forma, se reducen al máximo las posibilidades de producir trastornos a los usuarios especialmente sensibles a este tipo de contenido.

Por tanto, no debemos incluir contenido con una frecuencia de destellos superior a 3Hz, independientemente de su tamaño.

Beneficiarios:

Beneficia a personas con trastornos fotosensitivos (p. ej. epilepsia fotosensitiva) que son especialmente proclives a sufrir ataques al ver destellos del contenido.

¿CÓMO CUMPLIR?

La forma de cumplir este criterio de conformidad es simplemente

asegurando que ningún contenido

tiene destellos con una frecuencia superior a tres destellos por segundo.

2.4Principio 2 Pauta 4: Navegable

2.4.1Evitar bloques [Nivel A]

Existe un mecanismo para evitar los bloques de contenido que se repiten en múltiples páginas web.

Objetivo:

Permitir a quienes naveguen de forma secuencial acceder de forma directa al contenido principal.

La mayoría de sitios web tienen contenido que se repite en varias páginas, como los menús de navegación, cabeceras de documentos, zonas de anuncios, etc. Los usuarios sin discapacidad pueden centrar su atención directamente en el contenido principal y dirigir el ratón a los enlaces que deseen. Sin embargo, algunas personas con discapacidad acceden al documento de forma lineal (p. ej. lectores de pantalla) y tienen que recorrer los documentos desde el principio hasta acceder a la zona de contenido principal, viéndose obligados a leer el mismo contenido repetido cada vez que accedan a otra página del sitio web.

Para evitar estos problemas, tenemos que asegurarnos que existe algún mecanismo que permita saltar los bloques de contenido repetido en diferentes páginas.

Esto sólo es necesario cuando dicha funcionalidad no la implementa el agente de usuario. Por ejemplo, la mayoría de navegadores permiten volver al comienzo de documento por lo que no sería necesario proporcionar un enlace al final que permitiese volver al comienzo de la página o un enlace para saltar el último bloque de contenido.

Beneficiarios:

Beneficia a usuarios de lectores de pantalla y/o de teclado o interfaces de teclado.

¿CÓMO CUMPLIR?

AGRUPAR LOS BLOQUES DE MATERIAL REPETIDO DE FORMA QUE SE PUEDAN SALTAR

Una forma de permitir que los usuarios puedan saltar los bloques de material repetido es usar elementos estructurales y/o mecanismos que los productos de apoyo puedan reconocer o usar para saltar contenido.

Los lectores de pantalla tienen opciones para permitir a los usuarios saltar entre los encabezados de la página y para saltar listas o moverse por los elementos de lista. Así, por ejemplo, si estructuramos los documentos con encabezados y agrupamos los enlaces mediante elementos de lista, estamos facilitando que los usuarios de este tipo de productos de apoyo puedan saltar el contenido y acceder a los documentos sin necesidad de una lectura lineal completa.

PROPORCIONAR ELEMENTOS DE ENCABEZADO AL COMIENZO DE CADA SECCIÓN DEL CONTENIDO

Los encabezados sirven para transmitir la estructura principal de las páginas, dividiéndolas en diferentes secciones y subsecciones. Se pueden usar para identificar el contenido principal, dividir el contenido en diferentes secciones, identificar los mecanismos de navegación principal y secundaria, el pie de página, etc.

En (X)HTML debemos usar los elementos de encabezado (<tt> <h1> </tt> - <tt> <h6> </tt>) para marcar los títulos de las diferentes secciones en las que se divide la estructura de las páginas.

Por otra parte, los lectores de pantalla permiten obtener un mapa del documento en base a los encabezados y navegar usando ese mapa del documento. También permiten, al leer el contenido de la página, saltar entre los encabezados: ir al encabezado siguiente, al encabezado anterior, al siguiente encabezado de nivel superior, etc.

Al usar encabezados permitimos que los usuarios puedan navegar y recorrer los documentos usando estos mecanismos de navegación, pudiendo así saltar contenidos.

Captura de pantalla primera página del diario El Tiempo

Los lectores de pantalla permiten saltar por los encabezados y, por tanto, saltar contenido de las páginas.

Para facilitar esta navegación por los documentos, así como la comprensión de la estructura lógica de los mismos, se recomienda encarecidamente que los encabezados estén anidados correctamente, evitando aumentar más de un nivel de profundidad cada vez. Es decir, después de un encabezado <h1> sólo podría ir u otro <h1> o un <h2>, pero no un <h3>. Sin embargo, podemos decrementar a cualquier nivel. Así, después de un <h4> sólo podríamos aumentar a un <h5>, pero sí podríamos bajar a cualquier nivel entre <h1> y <h3> o poner otro <h4>.

Asimismo, también se recomienda que no se oculten mediante CSS u otras técnicas de ocultación ya que resultan útiles para todos los usuarios.

AGRUPAR ENLACES MEDIANTE ELEMENTOS ESTRUCTURALES

Agrupar los enlaces con elementos estructurales como listas desordenadas <ul>, listas ordenadas <ol>, permite identificar dichos listados de enlaces como menús de navegación.

Al usar estos elementos los agentes de usuario y productos de apoyo los podrán reconocer como menús de navegación y facilitar a los usuarios opciones que les permitan saltarlos para acceder al contenido siguiente.

Captura de pantalla primera página del diario El Tiempo

Aunque el menú de utilidades no se muestre visualmente como una lista, podemos usar igualmente elementos de lista para estructurarlo y aplicar estilos para obtener el aspecto visual deseado (vista con estilos a la izquierda y sin estilos a la derecha).

Cuando empleemos marcos para agrupar bloques de material repetido, usar el atributo title de los elementos <frame> e <iframe> para identificar su contenido.

Es importante señalar que no se recomienda el uso de marcos para estructurar o presentar las páginas. Entre otros, los marcos presentan los siguientes problemas:

  • Tienden a degradar la funcionalidad del botón "página anterior" del navegador.
  • Es imposible hacer referencia al "estado actual" de un conjunto de marcos con un URI. Esto es así porque al navegar por una página con marcos y cambiar su contenido la dirección web no varía. Una vez que cambian los contenidos de un conjunto de marcos, el URI original ya no es válido.
  • Se obliga a los usuarios a entrar por la declaración de marcos (página con <frameset>), ya que en caso de no hacerlo sólo se vería la página interior sin los marcos. Al no mostrarse los marcos exteriores pueden perderse los elementos de navegación del sitio web.
  • Los buscadores web puede que no entiendan las relaciones entre los marcos e indexarán las páginas de forma normal, sin atender si se trata de una página interior a un marco o no. Como consecuencia de esto, las páginas indexadas del sitio web perderían su presentación original o sus elementos de navegación.
  • La apertura de enlaces a páginas externas en los marcos de la página actual puede resultar molesto a los usuarios, pues da la sensación de que se está limitando la navegación o que impide que se abandone el sitio actual.
  • Algunos navegadores pueden tener problemas en caso de querer añadir la página a los marcadores o favoritos.

En todo caso, si se usan marcos, se considera que están agrupando bloques de contenido. Por ejemplo, se solían usar marcos para dividir las páginas en diferentes trozos como la cabecera de los documentos, el menú de navegación, el contenido principal y el pie de la página. Cuando los agentes de usuario o productos de apoyo permiten saltar de un marco a otro también están permitiendo saltar dichos bloques de contenido repetido.

Para que los usuarios sepan cuál es el contenido de cada marco sin necesidad de entrar en él, es necesario que usemos su atributo title para describir su función o contenido.

Esta técnica no está recomendando el uso de marcos. Únicamente reconoce su utilidad para agrupar contenido repetido y da instrucciones sobre cómo identificarlos correctamente en caso de que ya se estén usando en el sitio web.

USAR UN MENÚ DESPLEGABLE PARA SALTAR BLOQUES DE CONTENIDO

Si usamos scripts para crear menús desplegables (menús de navegación, tablas de contenido, etc.), podemos implementarlos de forma que sirvan para saltar bloques de contenido repetido.

Para ello debe cumplirse lo siguiente:

  • Cuando el menú esté desplegado, su contenido debe poder determinarse por software y estar situado en un orden de lectura correcto según su ubicación en la página. Es decir, cuando esté desplegado los lectores de pantalla tienen que poder leer el contenido del menú y en el orden correcto.
  • Cuando el menú esté colapsado, su contenido no debe formar parte del contenido de la página determinado por software. Es decir, su contenido no será visible para los agentes de usuario y productos de apoyo.
    Para cumplir esto podemos usar DOM scripting para generar el contenido cuando el menú esté visible y para eliminarlo cuando queramos ocultarlo.
  • También podemos usar la propiedad display de CSS para mostrar u ocultar el contenido (con los valores block y none). De esta forma, cuando el menú esté colapsado, al ocultar su visibilidad a los agentes de usuario (no se puede determinar por software) evitamos que lo lean los lectores de pantalla.
  • Otra opción es implementar el menú desplegable mediante scripts de servidor y recargar una versión modificada de la página, u otra página, cuando despleguemos o colapsemos el menú.
  • Por el contrario, si al colapsar el menú lo único que hacemos es ocultar su visibilidad pero pudiendo ser determinado por software (por ejemplo, ocultándolo con CSS posicionándolo fuera de la pantalla) no estamos cumpliendo esta técnica ya que los lectores podrán leer el contenido del menú aunque esté colapsado. Es decir, no permitimos que puedan saltar o ignorar dicho contenido.

CREAR ENLACES PARA SALTAR BLOQUES DE MATERIAL REPETIDO

Si no usamos elementos estructurales o mecanismos que permitan saltar los bloques de material repetido, entonces tendremos que emplear enlaces de salto que permitan a los usuarios saltar dichos bloques.

ENLACE AL COMIENZO QUE VAYA AL ÁREA DEL CONTENIDO PRINCIPAL

Una posibilidad es añadir un enlace al comienzo de cada página que vaya directamente al área del contenido principal.

Este enlace debe cumplir las siguientes condiciones:

  • Debe ser el primer elemento en recibir el foco.
  • Debe ser siempre visible o, al menos, ser visible cuando recibe el foco.

El enlace debe ser visible al menos cuando recibe el foco, porque si siempre está oculto puede generar desorientación y confusión a los usuarios de teclado al tabular por elementos no visibles.

Un enlace de salto al contenido es útil cuando hay claramente un área principal de contenido.

ENLACES DE SALTO AL COMIENZO DE BLOQUES DE CONTENIDO REPETIDO PARA IR AL FINAL DEL BLOQUE

Otro tipo de enlaces de salto que podemos incluir son enlaces al comienzo de los bloques de contenido repetido para saltar al final de los bloques, como los menús y barras de navegación, tablas de contenido, índices, secciones secundarias como zonas de anuncios, banners, etc.

Al igual que los enlaces de salto al contenido principal, deben cumplir lo siguiente:

  • Estar situados justo antes de los bloques de contenido repetido.
  • Ser siempre visibles o, al menos, ser visibles cuando reciben el foco.

Son útiles para saltar grupos de enlaces repetidos, como los enlaces de navegación.

ENLACES AL COMIENZO DE LA PÁGINA QUE VAYAN A CADA ÁREA DE CONTENIDO

Una última opción a la hora de incluir enlaces de salto es añadir enlaces al comienzo de la página que vayan a cada área de contenido.

Las condiciones que deben cumplir estos enlaces son:
  • Ser los primeros controles del documento, a modo de tabla de contenidos.
  • Ser siempre visibles o, al menos, ser visibles cuando reciben el foco.

Estos enlaces son útiles cuando el sitio web tiene varias secciones principales independientes, como puede ser el caso de portales web o periódicos online con gran variedad de contenidos organizados por temáticas.

2.4.2Titulado de páginas [Nivel A]

Las páginas web tienen títulos que describen su temática o propósito.

Objetivo:

Ayudar a los usuarios a encontrar el contenido y orientarse, asegurándonos que cada página tiene un título descriptivo.

Los títulos identifican la ubicación actual dentro del sitio sin necesidad de leer el contenido de la página. Los agentes de usuario suelen mostrar los títulos de las páginas en el título de la ventana o de la pestaña que contiene la página, facilitando la identificación del documento. De igual forma, cuando se muestran en el mapa del sitio o como resultados de búsquedas también ayudan a los usuarios a identificar el contenido de las páginas sin necesidad de acceder a ellas.

Beneficiarios:

Beneficia a todos los usuarios al identificar el contenido de la página y en especial a usuarios de lectores de pantalla y con problemas cognitivos.

¿CÓMO CUMPLIR?

PROPORCIONAR TÍTULOS DESCRIPTIVOS PARA LAS PÁGINAS WEB MEDIANTE EL ELEMENTO <title>

Los títulos de las páginas sirven de ayuda para encontrar la información buscada, orientarse y navegar por el sitio web.

Proporcionan información a los usuarios sobre el contenido de las páginas sin necesidad de que estos tengan que acceder a la misma y leer su contenido.

Los títulos, para ser correctos, deben:

  • Identificar el contenido de la página web.
  • Tener sentido fuera de su contexto.
  • Ser cortos.
En (X)HTML el título de las páginas se proporciona en el contenido del elemento <title>, en la sección de cabecera <head> de la página.

Ejemplo

<title>Servicio de empleo – página principal</title>

Aunque no sea necesario, se recomienda que en el título se identifique también el sitio web al que pertenece la página.

Asimismo, también se recomienda que los títulos sean únicos para cada una de 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 este se pueda identificar a partir del título.

2.4.3Orden del foco [Nivel A]

Si se puede navegar secuencialmente por una página web y la secuencia de navegación afecta su significado o su operación, los componentes que pueden recibir el foco lo hacen en un orden que preserva su significado y operatividad.

Objetivo:

Asegurar que los usuarios pueden interactuar mediante el teclado, navegar secuencialmente por el contenido y encontrar la información en el orden correcto.

Hemos de asegurarnos que, además de un orden de lectura correcto, el orden del foco por los elementos de interacción también debe tener sentido.

Esto no implica que el orden de lectura lineal (p. ej. mediante un lector de pantalla) o el orden del foco deban coincidir necesariamente con el orden de lectura de la presentación visual. Es posible que haya ciertas diferencias siempre y cuando el orden del foco tenga sentido en todos los casos.

Por ejemplo, en una página el menú de navegación puede estar situado visualmente a la izquierda y el contenido a la derecha. El orden de lectura de la presentación visual, en idiomas en los que se lee de izquierda a derecha, será en primer lugar el menú de navegación y después el contenido. Sin embargo, en el código (X)HTML podemos situar primero el contenido y luego el menú, de forma que ese será el orden de lectura lineal y del foco. El orden difiere en ambos casos, pero sigue teniendo sentido.

Por el contrario, podemos organizar visualmente los campos de un formulario por columnas, de forma que primero se lea la columna de la izquierda y luego la columna de la derecha. Si el orden en el código (X)HTML es tal que la lectura lineal y el orden del foco se realiza por filas en vez de por columnas, entonces dicho orden carece de sentido.

El orden de la navegación secuencial por el contenido está determinado por la tecnología que usemos. Por ejemplo:

  • En (X)HTML sólo se tabula por los elementos de interacción estándar.
  • Si usamos (X)HTML junto con scripts, entonces podemos hacer que se tabule por los elementos de interacción estándar así como por otros elementos adicionales. También podemos hacer que la tabulación se realice mediante diferentes teclas.

Por ejemplo, podemos usar scripts para crear un componente que represente una estructura de árbol de contenidos. Para navegar por este componente, podemos usar las flechas de dirección para movernos al elemento anterior, movernos al elemento siguiente, desplegar un elemento u ocultar su contenido.

Arbol de navegación

Mediante script podemos hacer que se navegue mediante las teclas de dirección.

En todo caso, bien usemos controles estándar o personalizados mediante tecnologías de programación, el orden del foco por todos los elementos de navegación y de interacción deben de tener sentido.

Beneficiarios:

Beneficia a usuarios de que navegan mediante teclado, con dificultades de lectura o problemas visuales al evitar que el foco se dirija a sitios inesperados (esperan que el orden del foco sea consistente con el orden de lectura).

¿CÓMO CUMPLIR?

UBICAR LOS ELEMENTOS DE INTERACCIÓN EN UN ORDEN QUE SIGA LAS SECUENCIAS Y LAS RELACIONES DEL CONTENIDO

Se trata de situar los elementos de interacción en el código de forma que el orden de tabulación por defecto siga un orden lógico, que tenga sentido.

Por ejemplo, en un formulario podemos querer organizar visualmente los campos del formulario por columnas, de forma que primero se lea la columna de la izquierda y luego la columna de la derecha. En ese caso, organizaremos el código (X)HTML de forma que el foco siga ese orden lógico.

Diagrama de secuencia en campos de texto

El orden de tabulación correcto es primero por la columna izquierda (datos personales) y luego por la columna derecha (datos de envío).

En el ejemplo anterior, para que el orden del foco sea correcto debe desplazarse primero por la columna de la izquierda y luego pasar a recorrer los campos de la columna de la derecha. Cada columna representa un grupo de controles de formulario relacionados entre sí (Datos personales y Datos de envío)

En caso contrario, si el foco se desplaza por filas, de un campo de una columna al campo de la otra columna, está siguiendo un orden sin sentido. Al desplazarse por filas está alternando repetidamente entre los campos relativos a datos personales y los campos relativos a datos de envío.

Por tanto, debemos organizar el contenido en el código (X)HTML de forma que el orden por defecto sea el correcto.

Si cambiamos el orden del foco por defecto, crear un orden lógico que siga las secuencias y relaciones del contenido Si por alguna circunstancia tenemos que cambiar el orden del foco por defecto, entonces hemos de hacerlo de forma que éste siga teniendo sentido.

Por ejemplo, en algunos casos es posible que queramos que el primer elemento en recibir el foco sea el buscador, pero este no se encuentra al comienzo de la página y no es el primer elemento en el orden de tabulación por defecto. Para especificar un nuevo orden lógico de tabulación, en (X)HTML usaremos el atributo tabindex en aquellos elementos de interacción para los que queramos modificar su orden.

EJEMPLO:

<label for="buscador">Buscar:</label> 
<input type="text" id="buscador" tabindex="1" /> 

El valor de este atributo es un número entero entre 0 y 32767.

Si usamos varios tabindex en diferentes elementos de interacción no es necesario que sus valores sean consecutivos.

Podemos saltar valores intermedios (p. ej. usar los valores 10, 20, 30, 40, ...) por si más adelante queremos incluir algún nuevo elemento de interacción dentro de la secuencia.

El orden de tabulación de una página que use tabindex será:
  1. En primer lugar, los elementos con un valor de tabindex mayor que 0, siguiendo el orden de sus valores.
  2. En segundo lugar, los elementos sin tabindex o con un valor de 0, siguiendo el orden en el código.

Es posible que diferentes elementos compartan un mismo valor para al atributo tabindex. En ese caso, para ese grupo de elementos se sigue el orden del código (X)HTML. Esto puede ser útil para dar un orden de tabulación a un menú de navegación como una unidad, proporcionando el mismo valor a todos sus enlaces. De esta forma, el orden dentro del menú será el del código (X)HTML y podremos añadir y quitar enlaces del menú sin modificar el valor del atributo tabindex del resto de elementos de interacción de la página.

Por otra parte, mediante el uso de scripts podemos proporcionar interacción sobre elementos que por defecto son estáticos y, por tanto, no reciben el foco. Estos elementos pueden ser celdas de tablas, imágenes, <span>, <div>, etc. Para que estos elementos estáticos puedan recibir el foco, deberíamos proporcionarles un orden de tabulación con el atributo tabindex.

SI CAMBIAMOS UNA PÁGINA DINÁMICAMENTE, HACERLO DE FORMA QUE EL ORDEN DEL FOCO SIGA TENIENDO SENTIDO

Con scripts podemos cambiar una página dinámicamente añadiendo y eliminando contenido, mostrándolo u ocultándolo. En todos estos casos, tenemos que tener especial cuidado en que el orden del foco siga teniendo sentido para que pueda ser operado de forma independiente del dispositivo (ratón, teclado, etc.).

Cuando insertemos contenido de forma dinámica, debemos ubicar los elementos de interfaz de usuario en el DOM (Modelo de Objetos del Documento) de forma que el orden de tabulación y de lectura sean correctos según el comportamiento por defecto del agente de usuario o producto de apoyo.

Tanto el orden de lectura como el orden del foco por defecto usado por un lector de pantalla se basa en el orden de los elementos (X)HTML en el DOM. Por tanto, para asegurar que este orden sigue siendo correcto, debemos insertar el contenido dinámico en el DOM justo a continuación del elemento que lo lanza.

Por otra parte, el elemento que lo lanza debe ser un enlace o botón ya que estos elementos, por defecto, pueden recibir el foco. Asimismo, el evento usado para lanzar el script debe ser onclick al tratarse de un evento independiente de dispositivo.

De esta forma nos aseguramos que el elemento que lanza el contenido dinámico se puede manejar con teclado y que el nuevo contenido, al estar situado justo a continuación, es el siguiente en el orden de lectura y del foco.

Por ejemplo, podemos tener un botón que abra un cuadro de diálogo personalizado que no sea un pop-up o una ventana del navegador. Este diálogo lo podemos construir incluyendo componentes de interfaz de usuario en un <div> y situando este elemento sobre la página usando la propiedad z-order y posicionamiento absoluto con hojas de estilo.

ventana modal para selector de fechas

El diálogo se incluye en el DOM justo a continuación del elemento que lo lanza para que el orden de lectura y el orden del foco (flechas) sea el correcto.

Al incluirlo en el DOM justo a continuación del botón (elemento que lo lanza), aunque visualmente lo posicionemos en cualquier parte, será el siguiente elemento en recibir el foco. Una vez dentro del diálogo, el foco puede salir del diálogo después de recorrer todos sus elementos o bien seguir dentro del diálogo de forma cíclica hasta que éste se cierre (enlace para cerrarlo). Cualquiera de las opciones es correcta siempre y cuando el foco, al salir del diálogo, se sitúe en el siguiente elemento.

Cuando el

contenido dinámico no se muestre

, entonces tampoco debe estar disponible para los navegadores y productos de apoyo. Para ello tenemos dos opciones:

  • Generar y eliminar el contenido dinámico en el DOM mediante scripts para mostrarlo y ocultarlo, respectivamente.
  • Incluir por defecto el contenido dinámico en el DOM y mostrarlo y ocultarlo mediante una combinación de scripts y hojas de estilo (display:block para mostrarlo y display:none para ocultarlo).

De esta forma nos aseguramos que cuando el contenido dinámico no se muestra tampoco estará disponible para los agentes de usuario y productos de apoyo y no se podrá tabular por él. En caso contrario, la tabulación por contenido dinámico que está oculto generaría confusión y desorientación.

Esto debemos cumplirlo para todo contenido dinámico que se incluya en la página, bien se trate de cuadros de diálogo, de contenido o menús desplegables, etc.

Un fallo común es, precisamente, incluir diálogos o menús generados dinámicamente que no estén situados a continuación del elemento que los lanza en el orden de lectura y navegación secuencial.

Es frecuente ver cómo este contenido dinámico se incluye al final de documento (al final del DOM). Por tanto, será el último elemento en recibir el foco y los usuarios de teclado tendrán que recorrer toda la página para interactuar con él.

De igual forma, también es un error común que al cerrar un contenido dinámico (menú o diálogo) se elimina de la página sin devolver el foco al siguiente elemento. En ese caso el foco se posiciona al comienzo de la página y los usuarios deberán tabular de nuevo desde el comienzo hasta el lugar donde se encontraban al abrir el contenido dinámico.

2.4.4Propósito de los enlaces (en contexto) [Nivel A]

El propósito de cada enlace puede ser determinado con sólo el texto del enlace o a través del texto del enlace sumado al contexto del enlace determinado por software, excepto cuando el propósito del enlace resultara ambiguo para los usuarios en general.

Objetivo:

Ayudar a los usuarios a comprender el propósito de cada enlace de forma que puedan decidir seguir el enlace o no.

El texto de un enlace debe indicar claramente cuál es su propósito, como el contenido o información que se encuentra en el documento de destino o una descripción de la acción o funcionalidad que invocan. Los enlaces del tipo "clic aquí" o "leer más" no son significativos ya que ocultan hacia dónde dirigen.

Debemos procurar que los enlaces sean descriptivos cuando se lean fuera de su contexto. Algunos usuarios de lectores de pantalla navegan con el tabulador saltando de enlace en enlace, o navegan por el documento después de obtener la lista de enlaces, de forma que un texto poco descriptivo no aportará información sobre su propósito.

Cuando el texto del enlace no es descriptivo por sí mismo, al menos debe serlo mediante su contexto inmediato. En ese caso, la información de contexto es mejor situarla antes del enlace.

Los enlaces con el mismo destino deben tener la misma descripción. De igual forma, y en sentido contrario, los enlaces a destinos diferentes deben tener diferentes descripciones. Entendiendo por descripción el texto del enlace o la combinación del texto del enlace junto con el contexto inmediato que lo rodea.

Por ejemplo, los siguientes enlaces son descriptivos (identifican su destino) bien en el propio texto del enlace o junto con su contexto.
  • Hubo mucho derramamiento de sangre durante el "periodo de la Edad Media".
    texto del enlace es descriptivo por sí mismo.
  • Consulta los "resultados de la votación en formato HTML", "PDF" o "RTF".
    El texto del primer enlace es descriptivo por sí mismo. Los otros dos enlaces son descriptivos por su contexto y por el contexto de la secuencia de enlaces.

En este criterio de conformidad se consideran como excepciones aquellos enlaces cuyo propósito es ambiguo para todos los usuarios, ya que las personas con discapacidad no tendrán ninguna desventaja frente al resto de usuarios.

Esta excepción se refiere, por ejemplo, a enlaces que intencionadamente desean ocultar su destino para generar suspense, como pueden ser enlaces en un juego (¿qué puerta deseas seguir?: "puerta A", "puerta B" o "puerta C"). Es decir, se trata de excepciones relacionadas con la propia naturaleza de la función de los enlaces y no con ambigüedades generadas por una mala redacción de los mismos.

Beneficiarios:

Beneficia a usuarios que navegan con teclado, con discapacidades motrices o visuales. También beneficia a usuarios con problemas cognitivos.

¿CÓMO CUMPLIR?

Para que los enlaces sean descriptivos e identifiquen su propósito tenemos varias opciones.

USAR EL PROPIO TEXTO DEL ENLACE PARA DESCRIBIR SU PROPÓSITO

La mejor opción es describir el propósito del enlace en el propio texto del enlace. Esta descripción permite a los usuarios saber cuál es su propósito independientemente de la forma en la que accedan a la página (navegador gráfico, de texto, lector de pantalla, tabulando, etc.), pudiendo así decidir si desean seguir el enlace o no hacerlo. Para ello, en (X)HTML:

  • Usaremos un texto descriptivo para los elementos <a> que identifique su destino. Por texto del enlace entendemos su contenido textual así como las alternativas textuales del contenido no textual incluido en el enlace.
  • Usaremos alternativas textuales (atributo alt) descriptivas para los elementos <area> de los mapas de imagen.

La dirección URI de la página o documento de destino se considera que no es descriptiva.

PROPORCIONAR UNA DESCRIPCIÓN ADICIONAL AL TEXTO DEL ENLACE

Si el texto del enlace no es descriptivo por sí mismo, podemos complementarlo proporcionando una descripción adicional de alguna de las dos formas diferentes:

Usar CSS para ocultar parte del texto del enlace.

Es posible que, a la hora de escribir textos descriptivos para los enlaces estos resulten demasiado largos y no se adecuen a la presentación del sitio o a las necesidades de todos los usuarios. Algunos usuarios pueden encontrar molesto y hasta contraproducente la presencia de enlaces con un texto demasiado largo y/o repetitivo a lo largo de la página.

En esos casos podemos ocultar parte del texto del enlace mediante hojas de estilo. De esta forma, en los navegadores gráficos con soporte de CSS sólo se mostrará la porción del texto del enlace que deseemos, mientras que el resto del texto estará disponible para usuarios de lectores de pantalla.

Existen diferentes técnicas para ocultar contenido en navegadores gráficos de forma que siga estando disponible para lectores de pantalla. En general, y con algunas variaciones, la opción más usada es la de posicionar de forma absoluta el elemento fuera de la pantalla, por ejemplo, -9000px a la izquierda.

EJEMPLO

:
a span.oculto { 
   position: absolute; 
   left: -9000px; 
   width: 1px; 
   height: 1px; 
   overflow: hidden; 
}

Esta técnica no usa visibility:hidden o display:none porque estas propiedades, además de hacer invisible el contenido en los navegadores gráficos, también lo oculta a los lectores de pantalla.

Complementar el texto del enlace con el atributo title.

El atributo title sirve para proporcionar información adicional que complemente el texto del enlace y aclare cuál es su propósito.

Si es necesario advertir a los usuarios sobre algo antes de seguir el enlace, como avisar de la apertura de nuevas ventanas o informar sobre el formato del documento de destino, debemos dar esa información en el texto del enlace en vez de en el título.

Es importante señalar que el soporte del atributo title por parte de los agentes de usuario es limitado. Además, no es posible acceder a su información si navegamos con el teclado. Por tanto, es preferible que el texto de los enlaces sea descriptivo por sí mismo. En caso de querer acortar los enlaces, se recomienda usar la técnica anterior para ocultar con CSS parte del texto de los enlaces en vez de usar el atributo title.

IDENTIFICAR EL PROPÓSITO DEL ENLACE USANDO SU TEXTO COMBINADO CON EL TEXTO DE LA FRASE QUE LO CONTIENE

Cuando el texto del enlace no es descriptivo y no identifica su propósito entonces tiene que ser descriptivo mediante el texto del enlace junto con su contexto.

Uno de los contextos que podemos usar para aclarar el propósito del enlace es el texto de la frase que lo contiene.

Los lectores de pantalla tienen combinaciones de teclas que les permiten leer la frase o párrafo actual, así como la frase anterior o siguiente. De esta forma, si el usuario llega a un enlace con el tabulador y su texto no es descriptivo, puede obtener la información de contexto necesaria usando alguna de esas combinaciones de teclas.

Es preferible que la información de contexto que aclara el propósito de los enlaces esté situada antes de los enlaces. En caso contrario, si primero está el enlace y luego su información de contexto, resultará confuso para aquellos usuarios de lectores de pantalla que lean el contenido de la página de forma lineal.

IDENTIFICAR EL PROPÓSITO DEL ENLACE USANDO EL TEXTO DEL ENLACE COMBINADO CON EL CONTEXTO DETERMINADO POR SOFTWARE

De forma general, además de usar el texto de la frase que contiene al enlace, también podemos incluir la descripción adicional en el contexto que se puede determinar por software. Es decir, en aquellos elementos que un programa o aplicación (p. ej. lector de pantalla) puede relacionar con el enlace.

Entre los contextos que se pueden determinar por software tenemos:

  • Elemento de lista (<li>) que contiene al enlace.
  • En listas anidadas, elemento de la lista padre (<li>) que contiene la lista en la que se encuentra el enlace.
  • Párrafo (<p>) que contiene al enlace.
  • Celda (<td>) de la tabla que contiene al enlace y sus encabezados asociados (<th>).
  • Elemento de encabezado anterior (<h1> - <h6>).

Al igual que en el caso anterior, es preferible que la información de contexto que aclara el propósito de los enlaces esté situada antes de los enlaces.

2.4.5Múltiples vías [Nivel AA]

Se proporciona más de un camino para localizar una página web dentro de un conjunto de páginas web, excepto cuando la página es el resultado, o un paso intermedio, de un proceso.

Objetivo:

Asegurar que los usuarios puedan localizar el contenido de la forma que mejor satisfaga sus necesidades.

Permitir que los usuarios puedan navegar por el sitio web de diferentes maneras ayuda a localizar la información más rápidamente. Para algunas personas, como los usuarios de lectores o magnificadores de pantalla, es más fácil usar funciones de búsqueda en vez de recorrer largos menús de navegación. De igual forma, mientras algunas personas pueden preferir usar tablas de contenido o mapas del sitio otras preferirán navegar por las diferentes páginas del sitio web para comprender mejor su organización.

Asimismo, las personas con problemas cognitivos encontrarán más fácil el uso de funciones de búsqueda que comprender mecanismos de navegación jerárquicos.

Beneficiarios:

Beneficia a personas con discapacidades visuales (lector de pantalla, magnificadores, etc.), así como aquellas con problemas cognitivos.

¿CÓMO CUMPLIR?

Para cumplir este criterio de conformidad tenemos que aplicar dos o más de las técnicas indicadas a continuación.

PROPORCIONAR ENLACES A PÁGINAS RELACIONADAS

Para que los usuarios puedan ampliar la información de la página actual tendremos que proporcionar enlaces a páginas relacionadas. Los enlaces son uno de los elementos fundamentales de la Web, interconectando entre sí las páginas web.

Prácticamente toda página web cumple esta condición.

PROPORCIONAR UNA TABLA DE CONTENIDOS DE LOS DOCUMENTOS

Una tabla de contenidos es un menú de enlaces a secciones y subsecciones en el mismo documento. Son útiles porque:

  • Permiten una vista rápida del contenido y organización del documento.
  • Proporciona acceso directo a una sección específica.

Cuando hablamos de "documento" nos referimos a un conjunto de información con entidad propia. Esta información puede estar toda en una misma página o bien puede estar dividida en varias páginas. Por ejemplo, una Ley, un libro online o una sección del sitio con información específica lo podemos considerar como un documento, independientemente de si está en una o varias páginas. La tabla de contenidos se puede incluir al principio de cada una de las páginas q e forman el documento, a modo de índice.

La tabla de contenidos no es lo mismo que un menú de navegación o un mapa del sitio. Para hacer un símil, una biblioteca se podría equiparar con un sitio web y un libro de la biblioteca sería un documento (con su propia tabla de contenidos).
tabla de enlaces en menú desplegable

Tablas de contenido con enlaces a las secciones del documento.

MAPA DEL SITIO

El mapa web es un mecanismo útil para que los usuarios puedan encontrar la información que buscan:

  • Permite una vista rápida del sitio web.
  • Facilita la comprensión del contenido y de la organización del sitio web.
  • Sirve de alternativa a una navegación compleja a través de menús o barras de navegación.

Las condiciones que debe cumplir el mapa web para ser correcto son las siguientes:

  • Incluir enlaces a las diferentes secciones del sitio web.
  • Debe estar enlazado, al menos, desde cada una de las páginas que se listan en el mapa web.
  • Todas las páginas del sitio web deben ser accesibles, directa o indirectamente, desde el mapa web.

Como herramienta para describir los contenidos y organización del sitio, es importante que la presentación y estructura del mapa web refleje la organización del sitio. Para ello, en (X)HTML usaremos los elementos estructurales adecuados.

Así, en la mayoría de los casos podemos emplear listas (<ul>) anidadas para organizar los enlaces de las secciones y subsecciones del sitio web. En los sitios web de gran tamaño puede ser más adecuada una combinación de encabezados .

(<h1> - <h6>) para cada sección y listas o listas anidadas para los contenidos de cada sección.

árbol de navegación con listas anidadas

Listas anidadas para reflejar la estructura del sitio en el mapa web.

Al crear el mapa web debemos prestar especial atención, como decíamos, a que refleje la estructura del sitio (jerarquía de las secciones y subsecciones) no solo visualmente, sino también en la estructura del código. Asimismo, debemos asegurarnos que tanto el orden de lectura como el orden de tabulación por el mismo sea correcto. Asimismo, es importante que el mapa web se actualice cada vez que se actualiza el sitio web.

FUNCIONES DE BÚSQUEDA

La función de búsqueda es un medio alternativo a la navegación principal del sitio web para que los usuarios puedan localizar la información que buscan. Los usuarios podrán realizar búsquedas de contenido sin necesidad de comprender o navegar por la estructura del sitio. Es especialmente útil en sitios web de gran tamaño.

La función de búsqueda se puede incluir a través de un único campo de búsqueda presente en todas las páginas del sitio, o bien proporcionar una página propia para el buscador y sus opciones.

árbol de navegación con listas anidadas

Típico campo de búsqueda presente en la mayoría de los sitios web de gran tamaño.

Si es posible, podemos ofrecer la posibilidad de una búsqueda avanzada. La búsqueda avanzada no implica necesariamente ofrecer más opciones de búsqueda (más campos del formulario para precisar la búsqueda), ya que podemos estar hablando de:

  • Búsqueda por diferentes secciones dentro del sitio web.
  • Búsqueda por tipologías de contenido: documentos HTML, imágenes, documentos, multimedia, etc.
  • Búsqueda con corrección ortográfica: que ofrezca resultados sobre términos similares si el introducido es incorrecto o está mal escrito.
  • Búsqueda por sinónimos, terminaciones de palabras similares, similitud entre palabras.
  • Etc.
captura de pantalla de Google

Formulario para la búsqueda avanzada en el buscador Google.

Obviamente, tanto el formulario de búsqueda como los resultados del buscador han de ser accesibles.

Asimismo, los resultados del buscador deben permitir el acceso (enlaces) a las páginas de resultado.

Una mejora en la usabilidad es que los resultados se organicen y categoricen siguiendo un claro criterio para que los usuarios, una vez realizada la búsqueda, puedan escoger fácilmente de entre los resultados obtenidos aquel que les interese.

LISTA DE ENLACES AL RESTO DE PÁGINAS WEB

Esta técnica sólo es válida para sitios web pequeños. En esos casos, un mapa del sitio o una función de búsqueda pueden ser soluciones excesivas para las necesidades reales del sitio web.

En los sitios web pequeños (como páginas personales o de pequeñas empresas) es habitual que la navegación principal ya contenga todos los enlaces necesarios para funcionar de forma similar al mapa del sitio.

ENLAZAR A TODAS LAS PÁGINAS DEL SITIO DESDE LA PÁGINA DE INICIO

Al igual que en la técnica anterior, enlazar al resto de páginas desde la página de inicio sólo es válido en sitios web pequeños.

Los enlaces se pueden incluir como un menú de navegación que incluya todo el mapa del sitio, o bien ser directamente una especie de mapa del sitio o tabla de contenidos que de acceso al resto de páginas del sitio web.

2.4.6Encabezados y etiquetas [Nivel AA]

Los encabezados y etiquetas describen el tema o propósito.

Objetivo:

Ayudar a los usuarios a comprender qué información está contenida en la página web y cómo se organiza dicha información.

Cuando los títulos son claros y descriptivos los usuarios podrán encontrar la información y comprender las relaciones entre las diferentes partes del contenido más fácilmente.

Asimismo, las etiquetas descriptivas ayudan a identificar componentes específicos en el contenido.

El que los títulos y etiquetas sean descriptivos no implica que deban ser largos. Siempre es mejor que la información proporcionada sea breve y concisa.

Beneficiarios:

Beneficia a usuarios de lectores de pantalla y a personas con dificultades de lectura al ayudar a predecir el contenido de cada sección.

¿CÓMO CUMPLIR?

PROPORCIONAR ENCABEZADOS SIGNIFICATIVOS

Los encabezados para ser adecuados deben cumplir lo siguiente:

  • Identificar la sección de contenido que encabezan.
  • Ser claros y breves.

También resulta útil situar la información más importante al inicio de cada encabezado. De esta forma, se facilita la lectura rápida ("ojear la página") leyendo rápidamente los encabezados hasta encontrar la sección y, por tanto, la información buscada.

Esto es especialmente útil para los usuarios de lectores de pantalla que navegan saltando de encabezado en encabezado.

PROPORCIONAR ETIQUETAS SIGNIFICATIVAS

Al igual que los encabezados sirven para identificar secciones, también es importante proporcionar etiquetas descriptivas para los elementos de interacción de la página, como los enlaces, botones, controles de formulario, componentes personalizados (scripts, flash), etc.

Las etiquetas deben identificar el propósito de los elementos de interacción de la página de forma clara.

Usaremos las técnicas específicas de cada tecnología para proporcionar las etiquetas y relacionarlas con sus respectivos controles de formulario. Por ejemplo, en (X)HTML el elemento <label> y su atributo for para asociar la etiqueta con el control correspondiente.

2.4.7Foco visible [Nivel AA]

Cualquier interfaz de usuario operable por teclado tiene una forma de operar en la cual el indicador del foco del teclado resulta visible.

Objetivo:

Asegurar que el indicador del foco del teclado se puede localizar visualmente.

Si el foco es visible facilita el uso de las páginas web mediante el teclado al permitir reconocer visualmente y en todo momento cuál es el componente con el cual se está interactuando.

Asimismo, resaltar los elementos cuando reciben el foco también sirve para que los usuarios sepan que se trata de elementos de interacción.

Por otra parte, las personas con problemas de atención, memoria a corto plazo o limitaciones para realizar procesos también se benefician al poder reconocer en todo momento dónde se encuentra el foco.

Beneficiarios:

Beneficia a usuarios que navegan con teclado, con discapacidades motrices o visuales. También beneficia a usuarios con problemas cognitivos, y en general a todos los usuarios.

¿CÓMO CUMPLIR?

Para cumplir este criterio de conformidad tenemos que cumplir alguna de las siguientes técnicas.

USAR COMPONENTES DE INTERFAZ DE USUARIO QUE SON RESALTADOS POR EL AGENTE DE USUARIO AL RECIBIR EL FOCO

La forma más directa y sencilla de cumplir este criterio de conformidad es usando controles estándar de una tecnología en la que, por defecto, los agentes de usuario resaltan el foco.

Por ejemplo, en (X)HTML los navegadores resaltan los controles y elementos de interacción estándar cuando reciben el foco. Generalmente, los suelen resaltar mediante un borde punteado o, en campos de introducción de texto, mediante el cursor de edición (línea vertical parpadeando).

USAR EL INDICADOR DE FOCO POR DEFECTO DE LA PLATAFORMA

Algunos sistemas operativos permiten a los usuarios configurar la apariencia del indicador del foco por defecto para mejorar su visibilidad ya que normalmente suele ser poco visible. De igual forma, algunos productos de apoyo pueden cambiar la presentación del indicador de foco usado por defecto del sistema.

Si al diseñar una página web no modificamos la presentación del indicador de foco por defecto estamos permitiendo que se mantenga la configuración usada en el sistema operativo (opciones de accesibilidad, etc.). En cambio, si cambiamos su presentación impedimos que se mantenga la configuración usada por los usuarios.

Por tanto, para que las opciones de accesibilidad se mantengan, debemos usar el indicador de foco por defecto del sistema, sin modificarlo. De esta forma, dejamos que los usuarios lo puedan configurar según sus necesidades.

En caso de que queramos modificar la presentación del indicador del foco por defecto, debemos hacerlo de forma que mejoremos claramente su visibilidad.

CREAR UN INDICADOR DE FOCO ALTAMENTE VISIBLE

Si es necesario podemos resaltar visualmente el foco para informar visualmente qué elemento tiene el foco o cuál es el elemento sobre el que se encuentra el ratón.

Podemos necesitar resaltar visualmente el foco porque usemos controles no estándar o porque queramos mejorar la visibilidad del indicador por defecto usado por los agentes de usuario.

Para mejorar la visibilidad del foco podemos usar bordes anchos y/o colores con alto contraste con el contenido de alrededor.

secuencia de campos de texto con uno de ellos sombreado

Podemos mejorar la visibilidad de los elementos que reciben el foco mediante hojas de estilo.

Para resaltar el foco podemos usar varios métodos:

Usar CSS para modificar la presentación de un componente de interfaz de usuario cuando recibe el foco:

Mediante hojas de estilo podemos modificar el color de fondo o los bordes de los enlaces mediante las pseudoclases :hover, :active y/o :focus. También podemos usar :focus para cambiar la apariencia de los controles de formulario cuando reciben el foco.

Usar scripts para cambiar el color de fondo o bordes de los elementos con foco:

Cuando el agente de usuario (navegador) no soporta la pseudoclase :focus, podemos usar javascript para modificar los estilos cuando el enlace o control recibe el foco mediante los manejadores de evento onfocus y onblur.

Ejemplo:

<script> 
   function toggleFocus(el) 
   {
    el.style.backgroundColor =  el.style.backgroundColor=="yellow" ? "inherit" 
    : "yellow"; 
   } 
</script> 
... 
<a href="example.html" onfocus="toggleFocus(this)" 
onblur="toggleFocus(this)">focus me</a>

En cualquier caso, tenemos que asegurarnos que el indicador del foco se muestra tanto si se posiciona el ratón u otro dispositivo de apuntamiento sobre el control, como cuando recibe el foco del teclado.

2.4.8Ubicación [Nivel AAA]

Se proporciona información acerca de la ubicación del usuario dentro de un conjunto de páginas web.

Objetivo:

Proporcionar un mecanismo para que el usuario sea capaz de orientarse respecto a un conjunto de páginas, un sitio web o una aplicación web y sea capaz de encontrar información relacionada.

Los mecanismos de localización, como un indicador de la ubicación en el menú de navegación o las migas de pan, además de servir de ayuda para todos los usuarios, son especialmente importantes para las personas con problemas cognitivos o de atención que pueden sentirse desorientados al avanzar en la navegación por el sitio web.

Beneficiarios:

Beneficia a personas con problemas cognitivos, como déficit de atención.

¿CÓMO CUMPLIR?

Para indicar la ubicación actual dentro del sitio web o de un conjunto de páginas tenemos varias opciones:

MIGAS DE PAN

Las migas de pan son un mecanismo de navegación y localización que permite:

  • Ayudar a comprender cómo se estructura el contenido de un sitio web.
  • Navegar a páginas visitadas anteriormente.
  • Identificar la ubicación actual de una página dentro de un conjunto páginas o dentro del sitio.

Las migas de pan están formadas por enlaces y para ser efectivas deben estar situadas en el mismo lugar en todas las páginas.

Puede ser útil emplear separadores visuales entre los diferentes enlaces que forman las migas de pan (p. ej. "-", "<", "&rt;", ""|", "/", "\", "::", etc.).

Atención a la Ciudadanía &rt; Oficina de Atención al Ciudadano &rt; Defensor del Ciudadano &rt;

Migas de pan.

En (X)HTML podemos estructurarlas mediante listas, usando la propiedad de CSS display:inline para mostrarlas en una línea. A su vez, para separar visualmente los enlaces podemos usar imágenes de fondo desde las hojas de estilo.

Las migas de pan para ser correctas deben cumplir lo siguiente:

  • Indicar el camino usado para llegar a la página actual o bien indicar la situación de la página actual en la jerarquía u organización del sitio web.
  • Si la ubicación actual no se muestra en las migas de pan, todos los elementos de las migas de pan deben ser enlaces.
  • Si la ubicación actual sí se muestra en las migas de pan, todos los elementos de las migas de pan deben ser enlaces excepto la ubicación actual.

MAPA DEL SITIO

Como ya vimos anteriormente en el criterio de conformidad 2.4.5, el mapa web es un mecanismo útil para que los usuarios puedan encontrar la información que buscan:
  • Permite una vista rápida del sitio web.
  • Facilita la comprensión del contenido y de la organización del sitio web.
  • Sirve de alternativa a una navegación compleja a través de menús o barras de navegación.

Las condiciones que debe cumplir el mapa web para ser correcto son las siguientes:

  • Incluir enlaces a las diferentes secciones del sitio web.
  • Debe estar enlazado, al menos, desde cada una de las páginas que se listan en el mapa web.
  • Todas las páginas del sitio web deben ser accesibles, directa o indirectamente, desde el mapa web.

Es importante que la presentación y estructura del mapa web refleje la organización del sitio. Para ello, en (X)HTML usaremos los elementos estructurales adecuados.

INDICAR LA SITUACIÓN ACTUAL DENTRO DE LAS BARRAS DE NAVEGACIÓN

Otra forma de orientar a los usuarios es proporcionar información acerca de cuál es la ubicación actual a través de los mecanismos de navegación.

  • Menús y barras de navegación.
  • Pestañas.
  • Pasos en un proceso.
  • Etc.
menú desplegado

Se indica cuál es la ubicación actual en el menú de navegación.

menú de migas de pan

En un formulario de varios pasos indicaremos cuál es el paso actual.

Para indicar la situación actual podemos basarnos en el uso de iconos, textos o cambiando la forma o el estado del elemento actual.

Debemos recordar que, por la pauta 1.3, toda información que transmitamos mediante cambios en la presentación también se debe poder determinar mediante software. Así, en (X)HTML, si cambiamos la presentación de un elemento para indicar que se trata del elemento actual, también debemos proporcionar esa información mediante elementos estructurales o semánticos, o directamente mediante texto.

Asimismo, según la pauta 1.1, si usamos imágenes o iconos han de tener una adecuada alternativa textual que proporcione la misma información o funcionalidad.

EN UNA COLECCIÓN DE PÁGINAS RELACIONADAS, INDICAR LA RELACIÓN CON LA PÁGINA ACTUAL

Cuando la página forma parte de un conjunto de páginas que están relacionadas entre sí (páginas de un subsitio, capítulos de un libro online, documentación dividida en varias páginas, etc.), tenemos que describir la relación que existe entre la página actual y el resto de páginas de la colección a la que pertenece.

En (X)HTML, el elemento <link> sirve principalmente para enlazar entre sí una colección de documentos relacionados. Mediante el atributo rel podemos indicar el tipo de vínculo existente entre los documentos. Es decir, cuál es la relación que existe entre ambos documentos.

Los diferentes valores para se pueden usar para el atributo rel son:

  • Start: primer documento en una colección de documentos.
  • Next: siguiente documento en una colección secuencial de documentos. Los agentes de usuario pueden precargar el siguiente documento para reducir los tiempos de carga.
  • Prev: documento anterior en una colección.
  • Contents: la tabla de contenidos.
  • Index: índice del documento actual.
  • Glossary: glosario de términos relacionados con el documento actual.
  • Chapter: capítulo en una colección de documentos.
  • Section: sección en una colección de documentos.
  • Subsection: subsección de una colección de documentos.
  • Appendix: apéndice de una colección de documentos.
  • Help: documento con ayuda sobre la navegación, contacto, otros enlaces, etc.

A continuación se muestra un ejemplo de uso del elemento <link> y del atributo rel.

<head>  
    <title>Capítulo 2</title>  
    <link rel="index" href="indice.html" 
    title="Indice del documento" /> 
    <link rel="start" href="introduccion.html"   
    title="Primer documento"/>  
    <link rel="next" href="capitulo3.html" 
    title="Documento siguiente"/>  
    <link rel="prev" href="capitulo1.html" 
    title="Documento anterior"/>  
    <link rel="glossary" href="glosario.html" 
    title="Glosario"/> 
</head>

La ventaja de usar el elemento <link> para establecer las relaciones es que este elemento se puede interpretar mediante software. Así, algunos agentes de usuario pueden generar barras de navegación o permiten la impresión ordenada de un grupo de documentos basándose en esta etiqueta.

Si no empleamos el elemento <link> podemos usar en su lugar el título de la página (<title>) para indicar la relación de la página actual con el resto de páginas.

Por ejemplo, en un libro cuyos capítulos se dividen en diferentes páginas, el título de cada página (<title>) puede ser el número y título del capítulo junto con el título del libro. De igual forma, en un sitio web grande con varias secciones, el título de cada página puede incluir el nombre de cada sección.

2.4.9Propósito de los enlaces (sólo enlaces) [Nivel AAA]

Se proporciona un mecanismo que permite identificar el propósito de cada enlace con sólo el texto del enlace, excepto cuando el propósito del enlace resultara ambiguo para los usuarios en general.

Objetivo:

Ayudar a los usuarios a comprender el propósito de cada enlace del contenido, sin depender del contexto.

El texto de los enlaces debe ser descriptivo e identificar claramente cuál es su propósito, el contenido que se encuentra en el destino o la función que invoca. Al contrario que en el criterio de conformidad 2.4.4 (de nivel A), en este criterio de conformidad (de nivel AAA) los enlaces deben ser descriptivos incluso cuando se lean fuera de su contexto.

De esta forma seguirán teniendo sentido cuando los usuarios naveguen con el tabulador saltando de enlace en enlace o cuando obtengan un listado de los enlaces de la página.

Se emplea el término "mecanismo" para permitir que el texto por defecto de los enlaces no sea completamente descriptivo siempre y cuando se proporcione algún medio para hacer que sí lo sea sin depender de su contexto. Por ejemplo, incluyendo un control que permita cambiar el texto de los enlaces (largos o cortos) u ocultando parte del texto de los enlaces con CSS. De esta forma no se obliga a que los enlaces tengan un detalle y longitud que, aunque sea beneficioso para algunos usuarios, pueda ser contraproducente para otros. Por ejemplo, podemos incluir los siguientes enlaces en la página:
  • Consulta los "resultados de la votación en formato HTML", "PDF" o "RTF".

Los enlaces "PDF" y "RTF" no son descriptivos fuera de su contexto. Sin embargo, incluir el texto completo puede no ser la mejor solución para todos los usuarios, ya que puede dificultar su lectura y comprensión:

  • Consulta los "resultados de la votación en formato HTML", "resultados de la votación en formato PDF" o "resultados de la votación en formato RTF".

Por tanto, se permite que el texto por defecto de los enlaces no sea descriptivo siempre que exista alguna opción que permita que sí lo sea.

En todo caso, y siempre que sea posible, procuraremos que el texto de los enlaces sea siempre descriptivo e identifique su propósito cuando se lea fuera de su contexto.

Beneficiarios:

Beneficia a usuarios que navegan con teclado, con discapacidades motrices o visuales. También beneficia a usuarios con problemas cognitivos.

¿CÓMO CUMPLIR?

Las formas que tenemos para cumplir este criterio de conformidad son las mismas que nos servían para cumplir el criterio de conformidad 2.4.4, con la excepción que ahora no se tienen en cuenta aquellas en las que se complementaba el texto del enlace con la información de contexto.

Así, las opciones que tenemos son:

  • Usar el propio texto del enlace para describir su propósito.
    • Usando un texto descriptivo para los elementos <a> que describa su propósito.
    • Usando alternativas textuales (atributo alt) descriptivas para los elementos <area> de los mapas de imagen.
  • Proporcionar una descripción adicional al texto del enlace.
    • Usar CSS para ocultar parte del texto del enlace.
  • Permitir a los usuarios escoger entre enlaces largos o cortos.

Ejemplo:

<style> 
  .primero { 
    display:none; >
   position:relative; > 
   }

#primero:hover .primero { 
   display:inline-block; >
} 

</style>  

<body> 
  <ul> 
      <li id="primero">mostrar el primer enlace oculto <div><a href="./">texto 16.         del <span class="primero">primer enlace</span></a></div> 
     </li> 
  </ul> 
</body>

2.4.10Encabezados de sección [Nivel AAA]

Se usan encabezados de sección para organizar el contenido.

Nota 1: "Encabezados" se usa en sentido general e incluye los títulos y otras formas de agregar encabezados a las distintos tipos de contenido.

Nota 2: Este criterio de conformidad se refiere al contenido propiamente dicho, no a los componentes de la interfaz de usuario. Los componentes de la interfaz de usuario se tratan en el criterio de conformidad 4.1.2.

Objetivo:

Proporcionar encabezados para las secciones de una página web, cuando esta se organiza en secciones.

Generalmente, los documentos largos se suelen dividir en capítulos o secciones, cada uno de los cuáles tiene su propio asunto o temática. Cuando estas secciones existen, es necesario incluir encabezados que las dividan e identifiquen.

Adicionalmente, podemos usar otro tipo de ayudas visuales como bordes, cajas de contenido o separadores (líneas horizontales) para que sea más fácil reconocer estas divisiones. En todo caso, la pistas visuales no son suficientes para identificar las secciones del documento y sólo se deben usar como complemento al uso de encabezados.

Los encabezados identifican de forma clara la organización del contenido de las páginas y facilitan su comprensión.

Este criterio de conformidad es de nivel AAA porque no siempre se pueden incluir encabezados en todo tipo de contenidos. Por ejemplo, una carta puede hablar de diferentes asuntos pero no es habitual que tenga encabezados. De igual forma, podemos querer incluir en la web documentos preexistentes que no tengan encabezados en su versión original.

En todo caso, siempre que sea posible, incluiremos encabezados en cada sección del contenido de la página para facilitar la navegación y su comprensión.

Beneficiarios:

Beneficia a personas con ceguera, problemas de comprensión y aquellos que utilizan lectores de pantalla y/o navegan mediante un teclado o interfaz de teclado.

¿CÓMO CUMPLIR?

ORGANIZAR UNA PÁGINA USANDO ENCABEZADOS

Los encabezados definen la estructura principal de las páginas, dividiéndolas en diferentes secciones y subsecciones. Por tanto, cada sección del documento debe tener un encabezado que la identifique.

Debemos recordar que, según el criterio de conformidad 1.3.1, estos encabezados se deben marcar de forma que sean reconocidos por software. Es decir, se debe usar el marcado estructural y semántico adecuado.

En (X)HTML debemos usar los elementos de encabezado ( <h1> - <h6>) para marcar los títulos de las diferentes secciones en las que se divide la estructura de las páginas.

Se recomienda encarecidamente que los encabezados estén anidados correctamente, evitando aumentar más de un nivel de profundidad cada vez. Es decir, después de un encabezado <h1> sólo podría ir u otro <h1> o un <h2>, pero no un <h3>. Sin embargo, podemos decrementar a cualquier nivel. Así, después de un <h4> sólo podríamos aumentar a un <h5>, pero sí podríamos bajar a cualquier nivel entre <h1> y <h3> o poner otro <h4>.