Tabellenkalkulation in HTML-Tabelle

Eine Tabelle, Zelle für Zelle gelesen

Wenn Sie eine Tabelle ansehen, springen Ihre Augen zum Spaltenkopf, um sich zu erinnern, was eine Zahl bedeutet. Wer einen Screenreader benutzt, hört eine Zelle nach der anderen und kann nicht kurz nach oben schauen. Der Code muss also die Verbindung zwischen einem Wert und seiner Kopfzelle tragen.

<table>
  <caption>Sales by region, 2026</caption>
  <thead>
    <tr><th scope="col">Region</th><th scope="col">Revenue</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">North</th><td>$4,200</td></tr>
  </tbody>
</table>

Mit scope="col" und scope="row" wird die Zelle als „North, Revenue, $4,200“ angesagt. Die caption wird vorgelesen, wenn der Nutzer die Tabelle betritt, so kann er entscheiden, ob sich das Erkunden lohnt. Ein Screenshot einer Tabellenkalkulation bietet nichts davon. Er ist außerdem nicht durchsuchbar und wird beim Zoomen unscharf.

Wie Ihre Zellen gelesen werden

Wenn Sie aus Excel, Google Sheets oder LibreOffice kopieren, landet eine HTML-Version des Bereichs in der Zwischenablage. Das Tool liest zuerst diese Version, so bleiben verbundene Zellen als colspan und rowspan erhalten.

Bei getipptem Text oder einer CSV-Datei (bis 5 MB, gelesen als UTF-8, sonst als Windows-1252) muss das Tool das Trennzeichen ermitteln. Steht irgendwo ein Tabulator, ist die Sache klar. Sonst probiert es Semikolon, Komma und senkrechten Strich auf den ersten 30 Zeilen und behält das Zeichen, das die gleichmäßigste Spaltenzahl ergibt. Leere Zeilen und Spalten rund um die Daten werden entfernt.

Die Kopfzeile ist die erste Zeile. Ist eine Zelle dieser Zeile nach unten verbunden, wächst die Kopfzeile mit, bis zu drei Zeilen.

Was mit Zahlen und Datumsangaben passiert

Eine Spalte gilt als numerisch, wenn mindestens 80 Prozent ihrer gefüllten Zellen als Zahlen lesbar sind. Numerische Spalten werden rechtsbündig ausgerichtet, damit die Ziffern untereinander stehen.

Ganze Zahlen ohne Symbol bleiben unangetastet, es sei denn, ihre Spalte enthält auch Beträge. So bekommen Ihre Jahreszahlen und Referenznummern kein Tausendertrennzeichen. Ein Wert, der mit Null beginnt, ist ein Code und wird nie verändert. Beim mehrdeutigen 1,234 schaut das Tool, wie der Rest der Tabelle Dezimalzahlen schreibt, bevor es entscheidet.

Datumsangaben werden als YYYY-MM-DD neu geschrieben, die eine Reihenfolge, die niemand falsch liest. Um herauszufinden, ob eine Spalte den Tag oder den Monat zuerst nennt, sucht das Tool nach einem Wert über 12 an einer Position. Klärt keine Zelle das, bleiben die Datumsangaben wie getippt, und die Prüfungen sagen Ihnen, wie viele es sind.

Die Prüfungen lesen

• Keine Kopfzeile oder die erste Zeile sieht nach Daten aus (mehr als die Hälfte sind Zahlen oder Datumsangaben): Fügen Sie in der Tabelle eine Zeile mit Titeln hinzu.
• Spalten ohne Titel: Eine leere Kopfzelle lässt einem Screenreader nichts zum Ansagen.
• Keine Beschriftung: Eine kurze Wendung genügt.
• Verbundene Zellen beibehalten: gültig, aber schwerer zu navigieren. Die Verbindung aufzuheben und den Wert zu wiederholen ist freundlicher.
• Leere Zeilen oder Spalten: In einer Tabellenkalkulation sind sie Abstand, auf einer Webseite Unordnung.
• Breite Tabelle: mehr als fünf Spalten bei ausgeschaltetem seitlichem Scrollen.

Trifft keine der Warnungen zu, bestätigt eine Zeile, dass die Struktur barrierefrei ist.

Zwei Arten von Ausgabe

Für WordPress

Die Tabelle steht in einem <figure class="wp-block-table"> mit fast keinem Styling, Ihr Theme zeichnet sie also wie jede andere Tabelle. Fügen Sie den Code in einen Block „Individuelles HTML“ ein.

Eigenständig

Der Code kommt mit einem kurzen <style>-Block, der an einen eindeutigen Klassennamen gebunden ist, für jede andere Website oder eine eigene Seite. Sie können ihn auch als vollständige .html-Datei herunterladen.

Bei eingeschaltetem Scrollen bekommt der Container role="region", tabindex="0" und eine Beschriftung aus der Caption. Tastaturnutzer können den Bereich dann fokussieren und mit den Pfeiltasten scrollen.

Nur die Zellwerte kommen mit. Formeln, Zellfarben, Fettschrift, Spaltenbreiten und Zahlenformate, die nur in den Anzeigeeinstellungen der Tabellenkalkulation existieren, bleiben zurück.