Signatur
Beschreibung
Die Eigenschaft HTMLTableElement.summary spiegelt das HTML-Attribut summary eines <table>-Elements wider. Ursprünglich sollte darin eine Beschreibung von Aufbau und Zweck der Tabelle stehen, die Screenreader vorlesen, die aber nicht sichtbar dargestellt wird.
Beim Lesen erhält man den aktuellen Attributwert als String – oder einen leeren String, wenn das Attribut fehlt. Beim Schreiben wird das Attribut summary im DOM gesetzt bzw. überschrieben. Einen Einfluss auf die Darstellung hat das Attribut nicht.
Seit HTML5 gilt das Attribut als veraltet. Die Eigenschaft ist heute vor allem wichtig, wenn man alten Code pflegt oder bestehende Markups modernisiert – etwa um vorhandene summary-Texte in eine <caption> oder in eine per aria-describedby verknüpfte Beschreibung zu übertragen.
Rückgabewert
summary, oder ein leerer String "", wenn das Attribut nicht gesetzt ist.Beispiele
Zusammenfassung lesen und setzen
// HTML: <table id="umsatz" summary="Quartalsumsätze 2023 nach Region">...</table>
const tabelle = document.getElementById('umsatz');
console.log(tabelle.summary);
// Wert ändern – spiegelt sich direkt im Attribut wider
tabelle.summary = 'Quartalsumsätze 2024 nach Region';
console.log(tabelle.getAttribute('summary'));Fehlendes Attribut ergibt leeren String
const tabelle = document.createElement('table');
console.log(JSON.stringify(tabelle.summary));
console.log(tabelle.hasAttribute('summary'));Veraltetes summary in barrierearme Beschreibung migrieren
// Alle Tabellen mit summary auf aria-describedby umstellen
document.querySelectorAll('table[summary]').forEach((tabelle, i) => {
const text = tabelle.summary.trim();
if (!text) return;
const beschreibung = document.createElement('p');
beschreibung.id = `tabellen-beschreibung-${i}`;
beschreibung.textContent = text; // textContent statt innerHTML – kein XSS-Risiko
tabelle.before(beschreibung);
tabelle.setAttribute('aria-describedby', beschreibung.id);
tabelle.removeAttribute('summary');
});
console.log(document.querySelectorAll('table[summary]').length);// Wichtig · Fallstricke
- Veraltet: Das Attribut
summaryist seit HTML5 nicht mehr konform. Validatoren melden es als Fehler. Für neue Seiten besser eine<caption>(HTMLTableElement.caption), einen erklärenden Absatz mitaria-describedbyoder ein umschließendes<figure>mit<figcaption>verwenden. - Barrierefreiheit: Moderne Screenreader werten
summaryzum Teil nicht mehr aus. Man sollte sich also nicht darauf verlassen, dass Nutzer den Text zu hören bekommen. - Die Eigenschaft liefert nie
null, sondern bei fehlendem Attribut\"\". Wer prüfen will, ob das Attribut vorhanden ist, nutzthasAttribute('summary'). - Kompatibilität: Alle Browser unterstützen die Eigenschaft weiterhin, damit alte Seiten funktionieren. Sie kann aber in Zukunft wegfallen.