SVGElement.tabIndex — Eigenschaft · JavaScript-Referenz

Signatur

SVGElement.tabIndex

Beschreibung

Die Eigenschaft tabIndex von SVGElement ist das Gegenstück zu HTMLElement.tabIndex. Sie spiegelt das Inhaltsattribut tabindex wider und legt fest, ob und in welcher Reihenfolge ein SVG-Element per Tastatur (Tab-Taste) fokussiert werden kann.

Die Werte bedeuten Folgendes:

0: Das Element ist fokussierbar und wird in der normalen Dokumentreihenfolge angesteuert. Das ist der empfohlene Wert für interaktive Grafiken.
-1: Das Element lässt sich per Skript (element.focus()) oder per Klick fokussieren, wird aber mit der Tab-Taste übersprungen.
positive Werte: Das Element wird vor allen Elementen mit 0 angesteuert, in aufsteigender Reihenfolge. Davon wird aus Gründen der Barrierefreiheit abgeraten.

Die meisten SVG-Formen (<rect>, <circle>, <g> …) sind standardmäßig nicht fokussierbar, beim Lesen liefert tabIndex dann -1. Nur <a> mit href ist von Haus aus fokussierbar und liefert 0. Mit tabIndex = 0 machst du z. B. Balken eines Diagramms oder Kartenregionen für Tastaturnutzer erreichbar.

Parameter

Name	Typ	Default	Beschreibung
$value	number		Beim Setzen: ganzzahliger Wert für die Tab-Reihenfolge. Nicht-ganzzahlige Werte werden zu `long` umgewandelt (Nachkommastellen werden abgeschnitten).

Rückgabewert

Typ

number

Beschreibung

Der aktuelle Tab-Index als Ganzzahl. Ohne gesetztes Attribut ist das -1 bei nicht fokussierbaren Elementen und 0 bei standardmäßig fokussierbaren Elementen wie <a href>.

Beispiele

Standardwert lesen und Element fokussierbar machen

const svgNS = 'http://www.w3.org/2000/svg';
const circle = document.createElementNS(svgNS, 'circle');

console.log(circle.tabIndex); // standardmäßig nicht fokussierbar

circle.tabIndex = 0;
console.log(circle.tabIndex);
console.log(circle.getAttribute('tabindex'));

-1 0 "0"

Diagrammbalken per Tastatur bedienbar machen

// <svg id="chart"><rect class="bar" data-value="42" .../> ...</svg>
const bars = document.querySelectorAll('#chart .bar');

bars.forEach((bar) => {
  bar.tabIndex = 0;
  bar.setAttribute('role', 'button');
  bar.setAttribute('aria-label', `Wert: ${bar.dataset.value}`);

  bar.addEventListener('keydown', (event) => {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      console.log(`Balken gewählt: ${bar.dataset.value}`);
    }
  });
});

Balken gewählt: 42 (nach Enter auf dem fokussierten Balken)

Nur per Skript fokussierbar (tabIndex = -1)

const marker = document.querySelector('#map-marker'); // z. B. <g id="map-marker">
marker.tabIndex = -1; // wird von Tab übersprungen

document.querySelector('#show-marker').addEventListener('click', () => {
  marker.focus();
  console.log(document.activeElement === marker);
});

true

// Wichtig · Fallstricke

Positive Werte vermeiden: Werte über 0 verändern die natürliche Fokus-Reihenfolge und verwirren Tastatur- und Screenreader-Nutzer. Ordne die Elemente besser im DOM passend an.
Fokussierbar heißt nicht barrierefrei: Gib interaktiven SVG-Elementen zusätzlich eine passende role und ein aria-label (oder <title>) und reagiere auf keydown (Enter/Leertaste). Ein click-Handler allein reicht für die Tastaturbedienung nicht.
Fokusrahmen: Browser zeigen bei SVG-Formen nicht immer einen gut sichtbaren Fokusrahmen. Gestalte ihn per CSS mit :focus-visible (z. B. über outline oder stroke).
Kompatibilität: SVGElement.tabIndex sowie focus()/blur() auf SVG-Elementen werden in allen aktuellen Browsern unterstützt. Ältere Versionen (vor allem Safari vor Version 13 und der Internet Explorer) unterstützten das nur eingeschränkt oder über das nicht standardisierte Attribut focusable.
Die Eigenschaft gehört zum Mixin HTMLOrSVGElement. Sie steht daher auch auf MathMLElement zur Verfügung.

Siehe auch

ScreenOrientation.angle SVGElement.dataset SVGElement.nonce SVGElement.style SVGElement.autofocus