Menús desplegables de web accesibles por teclado?

Question

¿Hay alguna forma de crear menús desplegables accesibles mediante teclado en los sitios web? Nuestra aplicación web actual tiene menús estándar, pero esto realmente ralentiza a nuestros empleados de entrada de datos (que están acostumbrados a las aplicaciones de escritorio donde hay un menú accesible por teclado y no es necesario usar un mouse).

Hemos descubierto cómo mostrar el menú con un atajo de teclado, pero no estoy seguro de cómo seleccionar una de las entradas (por ejemplo, usando la primera letra de la entrada del menú como en la mayoría de las aplicaciones de escritorio).

Editar - un enlace a un sitio que hace esto, o algún otro tipo de ejemplo, sería de gran ayuda

Answer 1

Puede utilizar accesskey atributo de etiqueta de anclaje:

<a href="something.html" accesskey="s">[S]omething</a> 

pero atajo de teclado para utilizar este difiere en todos los navegadores:

• IE: Alt + tecla de acceso, Enter
• FireFox: Alt + Shift + acce sskey
• Opera: Shift + Esc + tecla de acceso
• Chrome: Alt + tecla de acceso

Answer 2

la respuesta corta es sí - javascript y jQuery eventos activados basan en pulsar una tecla determinada probablemente sería funciona mejor

Answer 3

Tiene que escuchar las pulsaciones de teclas mientras el menú está abierto, tiene su código para mover la posición seleccionada.

8 = retroceso, 13 = retorno, 27 = esc, 40 = abajo, 38 = arriba, etc. Estos son solo valores ASCII de las pulsaciones de teclas.

Answer 4

La manera más fácil sería agregar accesskeys a los enlaces del menú. Es una característica diseñada para exactamente esa función.

Answer 5

eventos clave:
http://api.jquery.com/keypress/
http://api.jquery.com/keydown/
http://api.jquery.com/keyup/

CSS Menu, pestaña accesible:
http://carroll.org.uk/sandbox/suckerfish/bones2.html

Este último funciona mediante el uso de la: se centran pseudo-elemento. He encontrado algunas advertencias con el método descrito en el artículo, pero funciona.

El primero (juego) se explica por sí mismo.

Answer 6

Pruebe este script de menú, uno que creé para nuestro portal estatal en Minnesota. Es accesible por teclado (tecla de tabulación para navegar por todos los niveles), muestra la estructura de ruta en la que se está realizando un recorrido descendente y admite hasta un total de cinco niveles (incluido el nivel superior).

Top Menu: keyboard-accessible jquery menu.

Actualmente se limita a una navegación de estilo horizontal superior, pero las versiones futuras lo harán extensible a un menú orientado vertical u horizontalmente.

También tiene soporte táctil limitado (un pequeño problema con el iPhone/iPad), pero estoy trabajando en eso también para ser más ampliamente compatible.