En esta entrada vamos a hablar sobre accesibilidad web y teclado basándonos en la pauta 2.1. de las WCAG 2.0 (Accesible por teclado).
En general, todas las funciones de una tienda online para que sean accesibles deben poder ser usadas mediante el teclado y los componentes cuando ejecutan una acción y habitualmente se usan con el ratón, deben funcionar también desde el teclado.
Tenemos que tener en cuenta que los usuarios que acceden a una tienda online mediante un lector de pantalla (usuarios con discapacidad visual), utilizarán los componentes de la tienda mediante el teclado y no mediante el ratón.
Ejemplos de controles
Vamos a ver un par de ejemplos de componentes que habitualmente se utilizan con ratón y cómo deben ser compatibles al uso por teclado.
1. Botones
En algunos casos usamos botones (o enlaces) que ejecutan una determinada acción con código javascript. El evento que programamos debe ser siempre el evento que se ejecute tanto si hacemos clic con el ratón como si pulsamos enter con el teclado. Es lo que llamaríamos eventos no dependientes del dispositivo.
Técnicamente en javascript debemos programar tanto el evento onclick (para el ratón) como el evento onkeydown (para el teclado) o un evento genérico que se produzca en cualquiera de los dos eventos anteriores.
Más información sobre eventos JavaScript: http://www.w3schools.com/jsref/dom_obj_event.asp
2. Menús
También es muy habitual que tengamos un menú que al pasar por encima (evento onhover) con el ratón se muestren unas capas con la información de los submenús.
Para que estos menús sean accesibles debemos permitir que podamos acceder a ellos mediante el tabulador. Incluso si accedemos a un menú, éste debería cargar una nueva página con los submenús que en el uso con ratón nos muestra con la aparición de una nueva capa.
Este ejemplo nos viene muy bien para hablar sobre que la accesibilidad web no sólo beneficia a personas con discapacidad, sino que también beneficiará a usuarios con dispositivos táctiles (móviles y tabletas) ya que cuando pasamos con el ratón por encima de un menú se produce el evento onhover y este evento en dispositivos táctiles no se puede producir.
Uso del foco
Debemos permitir al usuario navegar de una forma intuitiva por la página web, desplazando el foco a través de los componentes mediante el tabulador. Si hay un control al que podemos llegar a través del tabulador, debemos poder salir de él también a través del tabulador (pauta 2.1.2 de las WCAG 2.0).
Velocidad del uso del teclado
Según la pauta 2.1.3 de las WCAG 2.0, cuando una utilicemos una función de un componente de la web mediante el teclado, no debemos obligar al usuario a que lo haga a una determinada velocidad (cumpliremos así un nivel AAA de accesibilidad).
