HTMLElement.accessKey — Eigenschaft · JavaScript-Referenz

Signatur

HTMLElement.accessKey

Beschreibung

Die Eigenschaft accessKey spiegelt das HTML-Attribut accesskey wider. Damit legst du ein Zeichen fest, über das Nutzer ein Element per Tastatur direkt ansteuern können. Je nach Elementtyp wird es fokussiert (z. B. <input>) oder direkt aktiviert (z. B. <button>, <a>).

Welche Modifikatortasten man zusätzlich drücken muss, hängt von Browser und Betriebssystem ab: In Chrome und Edge unter Windows ist es meist Alt, in Firefox unter Windows Alt+Umschalt, unter macOS in der Regel Ctrl+Option. Die Eigenschaft ist ein einfacher String. Wird ihr ein Wert zugewiesen, ändert sich das Attribut sofort und umgekehrt.

Laut Spezifikation darf das Attribut mehrere durch Leerzeichen getrennte Zeichen enthalten. Der Browser nimmt dann das erste, das er unterstützt. In der Praxis solltest du nur ein einzelnes Zeichen angeben. Die schreibgeschützte Eigenschaft accessKeyLabel zeigt dir, welche Tastenkombination tatsächlich gilt, etwa "Alt+S". Sie wird allerdings nicht von allen Browsern unterstützt.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Beim Setzen: das gewünschte Zeichen, z. B. `"s"`. Mit einem leeren String entfernst du die Zugriffstaste (das Attribut bleibt dabei leer bestehen).

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des accesskey-Attributs. Ist keins gesetzt, ist es ein leerer String "".

Beispiele

Zugriffstaste lesen

// HTML: <button id="save" accesskey="s">Speichern</button>
const btn = document.getElementById('save');
console.log(btn.accessKey);
console.log(document.body.accessKey === '');

s true

Zugriffstaste dynamisch setzen und im Label anzeigen

const searchInput = document.querySelector('#search');
searchInput.accessKey = 'f';

// accessKeyLabel zeigt die tatsächliche Kombination (falls unterstützt)
const hint = searchInput.accessKeyLabel || `Zugriffstaste: ${searchInput.accessKey}`;
searchInput.title = `Suche (${hint})`;
console.log(searchInput.getAttribute('accesskey'));

f

Doppelte Zugriffstasten auf der Seite erkennen

const findDuplicateAccessKeys = () => {
  const seen = new Map();
  for (const el of document.querySelectorAll('[accesskey]')) {
    const key = el.accessKey.toLowerCase();
    if (!key) continue;
    seen.set(key, [...(seen.get(key) ?? []), el]);
  }
  return [...seen].filter(([, els]) => els.length > 1).map(([key]) => key);
};

console.log(findDuplicateAccessKeys());

[] // oder z. B. ["s"], wenn zwei Elemente "s" verwenden

Zugriffstaste entfernen

const link = document.querySelector('a[accesskey]');
link.accessKey = '';            // Wert wird leer
link.removeAttribute('accesskey'); // Attribut komplett entfernen
console.log(link.hasAttribute('accesskey'));

false

// Wichtig · Fallstricke

Barrierefreiheit: Zugriffstasten können mit Tastenkürzeln von Screenreadern, Browser oder Betriebssystem kollidieren, zum Beispiel Alt+F für das Datei-Menü. Außerdem gibt es keinen einheitlichen Weg, sie für Nutzer sichtbar zu machen. Setze sie deshalb sparsam ein und dokumentiere sie auf der Seite.
Modifikatortasten sind uneinheitlich: Welche Kombination gilt, hängt von Browser und Betriebssystem ab. Schreib in Hinweistexten also nicht fest „Alt+S“ hinein. Nutze wo möglich accessKeyLabel. Diese Eigenschaft unterstützen Firefox und Safari, Chromium-basierte Browser dagegen nicht.
Doppelte Tasten: Haben mehrere Elemente dieselbe Taste, verhalten sich die Browser unterschiedlich. Manche springen der Reihe nach von Element zu Element, andere aktivieren nur das erste.
Groß- und Kleinschreibung spielt je nach Browser eine Rolle. Verwende deshalb am besten Kleinbuchstaben oder Ziffern.
Die Eigenschaft ist lediglich ein Spiegel des Attributs. Eine Prüfung, ob der Wert sinnvoll ist, findet nicht statt.

Siehe auch

FetchLaterResult.activated HTMLElement.anchorElement HTMLElement.accessKeyLabel HTMLElement.dataset HTMLElement.autofocus