Keyboard - Übersicht

JavaScript Key Codes
Brief note on buttons, enter, and space

Usergruppen

Drei Gruppen von Usern benutzen das Keyboard:

Normale User
Screenreader User
Power User

Normale User

Der Durchschnittsuser benutzt hauptsächlich die Maus und zusätzlich maximal folgende Tasten:

Tab
Arrow Keys
Enter
Space
Escape
Backspace

Screenreader User

Bevor Screenreader-Accessibility eingebaut wird, sollten die Keys für die normalen User abgedeckt werden. Screenreader bauen darauf auf.

Power User

Poweruser vewenden das Keyboard mit Shortcuts, um schneller und effizienter arbeiten zu können als mit der Maus.

Tab

Tab Shift+Tab

event.type keydown, keyup, fokussiert das nächste fokussierbare Element bei keydown
event.key Tab
event.code Tab
legacy code: event.keyCode 9

Die Tabtaste ist die wichtigste Taste, weil man damit durch fokussierbare Elemente tabben kann. Das sind unter anderem:

Links
Buttons
Formularfelder

(Safari erlaubt das übrigens nicht automatisch, man muss das unter Settings > Advanced > Accessibility > Press tab to highlight each item on a webpage aktivieren.)

Fokus

Wenn wir auf ein Element tabben, bekommt es einen Fokus. Die Standardmarkierung für den Fokus ist ein blauer Rahmen um das Element.

Arrow Keys

🔼 ▶️ 🔽 ◀️

event.type keydown, keyup, scrollen bei keydown
event.key ArrowUp, ArrowDown, ArrowRight, ArrowLeft
event.code ArrowUp, ArrowDown, ArrowRight, ArrowLeft
legacy code: event.keyCode left: 37 up: 38 right: 39 down: 40

Space

Space Shift+Space

event.type keydown, keypress, keyup
event.key –
event.code Space
legacy code: event.keyCode 32 / 16 + 32

Enter

Enter
Enter kann mit einigen Elementen interagieren, gewöhnlich wird es benutzt, um Dinge zu bestätigen oder ein Formular abzuschicken.

event.type keydown, keypress, keyup
event.key Enter
event.code Enter
legacy code: event.keyCode 13

Escape

Esc
Mit Escape können wir eine Anwendung verlassen (z.B. wenn wir eine Suche starten, kommen wir mit Escape raus).

event.type keydown, keyup
event.key Escape
event.code Escape
legacy code: event.keyCode 27

Backspace

Mit Backspace können wir Dinge löschen, z.B. Text in einem Text- oder Textarea-Formularfeld.

event.type keydown, keyup
event.key Backspace
event.code Backspace
legacy code: event.keyCode 8

Klick-Event triggern

mit Space

Bei einem fokussierten Button triggert die Space-Taste ein click Event bei keyup. Bei einem fokussierten Link triggert die Space-Taste keinen click Event.

mit Enter

Bei einem fokussierten Button triggert die Enter-Taste ein click Event bei keyup.
Bei einem fokussierten Link triggert die Enter-Taste ein click Event, das heißt, sie kann dazu benutzt werden, um zum href des Links zu navigieren.

Anwendungen

Browsen

Mit den Pfeiltasten können wir auf einer Website browsen: Pfeil runter bewegt den Scrollbar nach unten, Pfeil rauf nach oben, das gleiche gilt für horizontale Scrollbars und Pfeil rechts/links.
Mit Bild runter scrollen wir eine ganze Seite nach unten, mit Bild rauf eine ganze Seite nach oben (opt und Pfeil rauf/runter auf Mac).
Mit ende scrollen wir ans Ende einer Website, mit pos1 wieder rauf zum Anfang (cmd und Pfeil rauf/runter auf Mac).
Mit Space bzw. Shift + Space scrollen wir auf einer Website eine Seite rauf bzw. runter.
Mit alt und ◀️ bzw. ▶️ können wir im Browser eine Seite (ein Tab) zurück und wieder nach vorne gehen.

Formulare

Mit den Pfeiltasten können wir in Formularen einen Radio-Button auswählen und eine Option in einem Select-Menü.
Mit Space können wir

eine Checkbox auswählen
ein Select-Menü öffnen
eine Option im Select-Menü wählen und
eine Option im Radio-Button-Menü wählen

Mit Enter können wir ein Formular abschicken, wenn

der Fokus innerhalb eines Formulars ist
das Formular einen Submit-Button hat
der Fokus nicht in der Textarea ist
der Fokus nicht in einem offenen Select-Menü ist

Wenn der Fokus innerhalb einer <textarea> ist, macht Enter einen Zeilenumbruch.
Wenn wir innerhalb eines Select-Menüs sind, können wir mit Enter eine Option auswählen (aber nicht das Select-Menü öffnen).