3️⃣ 2.1.4 - Tastaturbefehle

A 2.1 Umsetzung

Ziel

Vermeidung versehentlicher Aktivierungen von Tastenkombinationen durch Benutzer mit Spracheingabe oder eingeschränkter Fingerfertigkeit.

Beschreibung

Wenn eine Tastenkombination ausschließlich Buchstaben, Satzzeichen, Ziffern oder Symbolzeichen verwendet, müssen eine der folgenden Optionen verfügbar sein:

Ausschalten: Möglichkeit, die Tastenkombination zu deaktivieren.
Neu festlegen: Mechanismus zur Neuzuweisung mit nicht-druckbaren Tasten (z. B. Strg, Alt).
Nur bei Fokus aktiv: Die Tastenkombination ist nur aktiv, wenn die zugehörige Benutzeroberflächenkomponente den Fokus hat.

Anforderungen

Visuelle Hinweise darauf, welche Tastenkombinationen aktiv sind.
Benutzerfreundliche Steuerungsoptionen zur Anpassung oder Deaktivierung von Tastenkombinationen.
Bereitstellung eines Mechanismus zur Deaktivierung von Tastenkombinationen.
Möglichkeit zur Neuzuweisung von Tastenkombinationen mit zusätzlichen Modifikatortasten wie Strg oder Alt.
Sicherstellen, dass Tastenkombinationen nur aktiv sind, wenn die zugehörige Komponente den Fokus besitzt.

Code-Beispiele

Mechanismus zur Deaktivierung von Tastenkombinationen:

document.addEventListener('keydown', (event) => {
  if (event.key === 'a' && !event.ctrlKey) {
    console.log('Tastenkombination deaktiviert.');
    event.preventDefault();
  }
});

Aktivierung nur bei Fokus:

<div tabindex="0" id="shortcut-component">
  Drücken Sie „A“, um diese Komponente zu aktivieren.
</div>
<script>
  const component = document.getElementById('shortcut-component');
  component.addEventListener('keydown', (event) => {
    if (event.key === 'a') {
      console.log('Komponente aktiviert.');
    }
  });
</script>

Neuzuweisung von Tastenkombinationen:

let activeShortcut = 'a';

document.addEventListener('keydown', (event) => {
  if (event.key === activeShortcut) {
    console.log('Tastenkombination ausgeführt.');
  }
});

function reassignShortcut(newShortcut) {
  activeShortcut = newShortcut;
}