Die Datentabellen-Alternative
Bieten Sie die zugrunde liegenden Zahlen in einer zugänglichen Tabelle an.
Die Datentabellen-Alternative ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Wenn Worte nicht ausreichen
Eine einzeilige Zusammenfassung vermittelt die Aussage, aber manche Nutzerinnen und Nutzer benötigen die Zahlen. Eine Datentabelle liefert die Rohwerte hinter dem Diagramm.
Die Tabelle ist die verlässliche Quelle
Betrachten Sie das Diagramm als Visualisierung einer Tabelle. Stellen Sie dieselbe Tabelle in echtem Markup bereit, damit jede assistive Technologie sie zuverlässig lesen kann.
Ein echtes table-Element verwenden
Screenreader verstehen das native table-Element sehr gut: Zeilen, Spalten und Überschriften werden ohne zusätzliches ARIA korrekt angesagt.
<table>
<tr><th>Month</th><th>Sales</th></tr>
<tr><td>Jan</td><td>120</td></tr>
</table>Der Tabelle ein caption geben
Ein caption benennt die Tabelle, damit Zuhörende wissen, welche Daten sie enthält. Es wird vorgelesen, sobald der Fokus auf der Tabelle landet.
<table><caption>Monthly sales in 2024</caption> ... </table>Überschriftszellen mit th und scope
Kennzeichnen Sie Beschriftungen mit th und einem scope, damit jeder Wert zusammen mit seiner Spalten- und Zeilenbezeichnung angesagt wird. Dieser Kontext ist bei einer Tabelle entscheidend.
<th scope="col">Sales</th>
<th scope="row">January</th>Direkt neben dem Diagramm platzieren
Platzieren Sie die Ersatztabelle neben dem Diagramm, nicht auf einer separaten Seite. Nutzerinnen und Nutzer sollten die Daten erreichen können, ohne danach suchen zu müssen.
Optional visuell ausblenden
Wenn die Tabelle das Design überladen würde, blenden Sie sie visuell aus, behalten sie aber für Screenreader bei, indem Sie eine Klasse visually-hidden verwenden – niemals display none.
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; }Die Daten niemals mit display none ausblenden
Achtung: display: none entfernt Inhalte vollständig aus dem Accessibility Tree. So ausgeblendet, hilft Ihre Ersatztabelle niemandem.
Auch ein details-Schalter funktioniert
Schließen Sie die Tabelle in ein details-Element ein, damit sehende Nutzerinnen und Nutzer die Zahlen bei Bedarf einblenden können und die Tabelle dennoch vollständig zugänglich bleibt.
<details><summary>View data table</summary>
<table>...</table>
</details>Tabelle und Diagramm synchron halten
Wenn das Diagramm aktualisiert wird, muss auch die Tabelle aktualisiert werden. Veraltete Zahlen hinter einem aktuellen Diagramm führen die darauf angewiesenen Personen unbemerkt in die Irre.
Eine Quelle, zwei Ansichten
Idealerweise werden sowohl das Diagramm als auch die Tabelle aus denselben Daten erzeugt. So bleiben beide konsistent und Sie müssen nicht zwei Wahrheiten pflegen. 🔗
Kurze Überprüfung
Wie sollten Sie eine Datentabelle ausblenden, die Screenreader weiterhin vorlesen sollen?
Zusammenfassung: Die Zahlen hinter dem Bild
Sie haben gelernt, jedes Diagramm durch eine echte Tabelle zu ergänzen: mit caption, passenden Überschriften, synchron gehalten und bei Bedarf sicher ausgeblendet – niemals mit display none. 📋
Häufig gestellte Fragen
Ist die Lektion „Die Datentabellen-Alternative“ kostenlos?
Ja — der vollständige Text von „Die Datentabellen-Alternative“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Die Datentabellen-Alternative“?
Bieten Sie die zugrunde liegenden Zahlen in einer zugänglichen Tabelle an. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Die Datentabellen-Alternative“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Jedes Diagramm braucht eine Textalternative
- Die Datentabellen-Alternative
- Farbe, Muster und direkte Beschriftungen
- Mit der Tastatur navigierbare interaktive Diagramme