Tastatur-zugängliche Web-Dropdown-Menüs?

Question

Gibt es eine Möglichkeit, Dropdown-Menüs mit Tastatur für Websites zu erstellen? Unsere aktuelle Web-Anwendung verfügt über standardmäßige Hover-Menüs, was jedoch unsere Dateneingabe-Mitarbeiter (die an Desktop-Apps gewöhnt sind, bei denen es ein Tastatur-zugängliches Menü und keine Notwendigkeit für eine Maus gibt) wirklich verlangsamt.

Wir haben herausgefunden, wie man das Menü mit einem Tastaturkürzel anzeigt, aber ich bin mir nicht sicher, wie man einen der Einträge auswählt (zB indem man wie in den meisten Desktop-Apps den ersten Buchstaben des Menüeintrags verwendet).

bearbeiten - ein Link zu einer Website, die diese oder eine andere Art von Beispiel der Fall ist, wäre wirklich hilfreich

Answer 1

können Sie verwenden accesskey Attribut für Anker-Tag:

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

aber Tastaturkürzel zu verwenden, um dies in allen Browsern unterscheidet:

• IE: Alt + accesskey, Enter
• FireFox: Alt + Shift + Zul ßTaste
• Opera: Shift + Esc + accesskey
• Chrome: Alt + accesskey

Answer 2

die kurze Antwort ist ja - JavaScript und jQuery Ereignisse an einem bestimmten keypress wahrscheinlich fired basiert würde funktionieren am besten.

Answer 3

Sie müssen auf Tasten drücken, während das Menü geöffnet ist, haben Sie Ihren Code verschieben die ausgewählte Position.

8 = Rücktaste, 13 = zurück, 27 = esc, 40 = runter, 38 = hoch usw. Dies sind nur ASCII-Werte der Tastenanschläge.

Answer 4

Der einfachste Weg wäre accesskeys zu den Menü-Links hinzuzufügen. Es ist ein Feature für genau diese Funktion.

Answer 5

Wichtige Ereignisse:
http://api.jquery.com/keypress/
http://api.jquery.com/keydown/
http://api.jquery.com/keyup/

CSS Menu, Tab zugänglich:
http://carroll.org.uk/sandbox/suckerfish/bones2.html

Letzteres funktioniert durch die Verwendung von: Fokus Pseudoelement. Ich bin mit der im Artikel beschriebenen Methode auf einige Vorbehalte gestoßen, aber es funktioniert.

Die ehemalige (set) ist selbsterklärend.

Answer 6

Probieren Sie dieses Menü aus, eines, das ich für unser staatliches Portal in Minnesota gebaut habe. Es ist über die Tastatur zugänglich (Tab-Taste, um durch alle Ebenen zu navigieren), zeigt die Pfadstruktur an, in der Sie sich bewegen, und unterstützt bis zu fünf Ebenen (einschließlich der obersten Ebene).

Top Menu: keyboard-accessible jquery menu.

Es ist derzeit auf eine top horizontale Navigation beschränkt, aber zukünftige Versionen machen es erweiterbar auf ein vertikal oder horizontal ausgerichtetes Menü.

Es hat auch begrenzte Touch-Unterstützung (ein kleiner Buggy mit dem iPhone/iPad), aber ich arbeite daran, um auch weiter unterstützt werden.