MathMLElement.tabIndex — Eigenschaft · JavaScript-Referenz

Signatur

MathMLElement.tabIndex

Beschreibung

Die Eigenschaft tabIndex der Schnittstelle MathMLElement gibt als Ganzzahl an, ob und in welcher Reihenfolge ein MathML-Element (z. B. <math>, <mrow>, <mi>) per Tabulatortaste fokussiert werden kann. Sie spiegelt das Inhaltsattribut tabindex wider und funktioniert genauso wie HTMLElement.tabIndex. Beides stammt aus dem Mixin HTMLOrSVGElement.

Die Werte bedeuten:

Negativ (üblicherweise -1): Das Element kann per Skript mit focus() fokussiert werden, wird bei der Tab-Navigation aber übersprungen.
0: Das Element kommt in der normalen Dokumentreihenfolge in die Tab-Reihenfolge.
Positiv: Das Element wird vor allen Elementen mit 0 fokussiert, aufsteigend nach dem Wert sortiert.

MathML-Elemente sind standardmäßig nicht fokussierbar. Ohne tabindex-Attribut liefert die Eigenschaft deshalb -1. Nützlich ist sie z. B. bei interaktiven Formeln, etwa wenn Nutzer mit der Tastatur durch Teilausdrücke navigieren oder ein <maction>-ähnliches Verhalten per Skript umgesetzt wird. Auch Screenreader-Nutzer profitieren, wenn eine Formel als Ganzes fokussierbar ist.

Rückgabewert

Typ

number

Beschreibung

Eine Ganzzahl (long), die die Tab-Position angibt. Ohne gesetztes Attribut ist der Wert -1. Bei einer Zuweisung wird das Attribut tabindex gesetzt, der Wert wird dabei in eine Ganzzahl umgewandelt.

Beispiele

Tab-Index einer Formel auslesen und setzen

// HTML: <math id="formel"><mi>x</mi><mo>=</mo><mn>2</mn></math>
const formel = document.getElementById('formel');

console.log(formel.tabIndex); // ohne Attribut

formel.tabIndex = 0; // in die normale Tab-Reihenfolge aufnehmen
console.log(formel.tabIndex);
console.log(formel.getAttribute('tabindex'));

-1 0 "0"

Alle Formeln per Tastatur erreichbar machen

// Jede <math>-Formel fokussierbar machen und beim Fokus hervorheben
document.querySelectorAll('math').forEach((formel) => {
  formel.tabIndex = 0;
  formel.addEventListener('focus', () => formel.classList.add('aktiv'));
  formel.addEventListener('blur', () => formel.classList.remove('aktiv'));
});

console.log(`${document.querySelectorAll('math[tabindex="0"]').length} Formeln fokussierbar`);

3 Formeln fokussierbar

Nur per Skript fokussierbar (tabIndex = -1)

// HTML: <math><mrow id="bruch"><mfrac><mn>1</mn><mn>2</mn></mfrac></mrow></math>
const bruch = document.getElementById('bruch');

// Nicht in der Tab-Reihenfolge, aber programmatisch fokussierbar
bruch.tabIndex = -1;
bruch.focus();

console.log(document.activeElement === bruch);

true

// Wichtig · Fallstricke

Positive Werte vermeiden: Werte größer als 0 ändern die natürliche Fokusreihenfolge und sind schlecht für die Barrierefreiheit. Verwende besser 0 oder -1.
Standardwert: Anders als bei Links oder Formularfeldern in HTML sind MathML-Elemente von Haus aus nicht fokussierbar. tabIndex liefert dort ohne Attribut -1.
Browser-Kompatibilität: Firefox unterstützt MathMLElement seit Version 71. Chromium kann MathML Core erst ab Version 109. In älteren Chromium-Browsern sind MathML-Elemente nur einfache Element-Objekte ohne tabIndex. Dort hilft als Ausweichlösung setAttribute('tabindex', '0'). Ob das dann tatsächlich fokussierbar macht, hängt vom Browser ab.
Fokussierbar heißt nicht bedienbar: Ein fokussierbares Element braucht zusätzlich Tastatur-Handler (keydown) und passende ARIA-Attribute, etwa role und aria-label, damit es wirklich bedienbar ist.

Siehe auch

MathMLElement HTMLElement.tabIndex SVGElement.tabIndex MathMLElement.focus() MathMLElement.blur() Document.activeElement HTMLTableElement.tBodies