Chart-Blöcke: Zugängliche Diagramme mit ehrlichen Achsen

Ein Chart-Block ist eine begrenzte Datenanzeige, die ein Diagramm mit seiner Kernerkenntnis, seinem Titel, Bezeichnungen, Quelle, Zeitraum und einer zugänglichen Datenalternative kombiniert. Verwenden Sie ihn, wenn die Form der Daten die Frage schneller beantwortet als eine Reihe exakter Werte.

Warum dieses Element wichtig ist

Diagramme nutzen die visuelle Mustererkennung. Ein Leser kann einen Anstieg, eine Lücke, eine Häufung oder eine Änderung der Steigung erkennen, bevor er dieselben Werte Zelle für Zelle vergleicht. Das hilft, wenn das Muster – und nicht das genaue Nachschlagen – der Punkt ist. Es ist aber auch gefährlich: Beschnittene Achsen, ungleiche Intervalle oder Flächeneffekte können einen kleinen Unterschied entscheidend wirken lassen. Ein Diagramm verdient seinen Platz nur, wenn es den Aufwand reduziert, ohne die Beweislage zu verändern.

Die Leserpsychologie macht die schriftliche Kernerkenntnis unverzichtbar. Menschen erinnern sich möglicherweise leichter an eine Richtung oder relative Größe als an eine Fußnote. Formulieren Sie die begrenzte Schlussfolgerung in Text, einschließlich der Grundgesamtheit und des Zeitraums, falls erforderlich. Behaupten Sie niemals eine Kausalität aus einer Korrelation oder einen allgemeinen Trend aus einem ausgewählten Intervall.

Die maschinelle Extraktion erfordert Seriennamen, Bezeichnungen, Werte, Einheiten, Quelle, Zeitraum und Schlussfolgerung als Text. Ein Crawler oder eine KI-Antwortmaschine interpretiert möglicherweise keinen SVG-Pfad, kein Canvas, keinen Screenshot, keinen Hover-Zustand und keine Farblegende. Der Block kombiniert daher die visuelle Darstellung mit geordneten Daten für assistive Technologien, Indexierung, Überprüfung und Wiederverwendung.

Die Element-Schreibregeln haben Vorrang: Wählen Sie dieses Element, weil der Zweck einer Passage darin besteht, ein quantitatives Muster aufzuzeigen, und nicht, weil ein Diagramm die Seite schmücken würde. Wenn die Aufgabe das genaue Nachschlagen oder der punktgenaue Vergleich ist, verwenden Sie eine Tabelle, selbst wenn eine Diagrammsoftware verfügbar ist.

Wann Sie es verwenden sollten

Verwenden Sie ein Diagramm, wenn der Leser eine von vier Formen sehen muss: Veränderung über eine geordnete Sequenz, Unterschiede zwischen einer überschaubaren Anzahl von Kategorien, die Verteilung von Beobachtungen oder die Beziehung zwischen zwei quantitativen Variablen. Ein Liniendiagramm kann eine Richtung im Zeitverlauf aufzeigen; ein Balkendiagramm kann Kategorien ordnen; ein Histogramm kann eine Verteilung offenlegen; und ein Streudiagramm kann Zusammenhänge und Ausreißer zeigen. Der Datensatz muss vollständig genug, konsistent gemessen und für die Aussage relevant sein.

Ein einfacher Test trennt Diagramm von Tabelle: Wenn der Leser zuerst ein Muster bemerken soll, wählen Sie ein Diagramm; wenn er einen genauen Wert finden soll, wählen Sie eine Tabelle. Wenn beides wichtig ist, fügen Sie eine kompakte Tabelle innerhalb des Chart-Blocks ein, damit die beiden Ausgaben nicht auseinanderdriften können.

Häufige Beinahe-Fehler sind:

• Zwei Werte: Schreiben Sie einen Satz oder einen kleinen Vergleich. Zwei Balken offenbaren selten ein Musterdirekter.
• Eine lange Kategorienliste: Verwenden Sie eine gruppierte Tabelle. Dreißig Balken verursachen Probleme bei Beschriftungen und der mobilen Darstellung.
• Einige wenige Kennzahlen: Verwenden Sie ein Statistik-Band, wenn die Zahlen unabhängige Highlights und keine zusammenhängende Reihe sind.
• Ein Prozess oder eine Chronologie: Verwenden Sie eine Zeitleiste, wenn Markierungen keine Mengen kodieren.
• Eine Kausalbehauptung aus einem Zusammenhang: Ein Streudiagramm kann zeigen, dass zwei Variablen miteinander korrelieren; es kann nicht belegen, dass eine die andere verursacht hat.
• Eine dekorative „Datengeschichte“: Wenn das Entfernen des Diagramms keine Schlussfolgerung entfernt, entfernen Sie es.
• Ein Vergleich mit langen qualitativen Kriterien: Verwenden Sie eine Vergleichstabelle , weil Kategorien wie Support-Richtlinie oder Implementierungsumfang nicht ehrlich als Balkenlänge kodiert werden können.

Wo Sie es platzieren sollten

Platzieren Sie das Diagramm nach dem Absatz, der die Frage, die Grundgesamtheit, die Kennzahl und den Zeitraum einführt. Setzen Sie die Kernerkenntnis direkt davor oder danach, und erläutern Sie anschließend Implikationen und Einschränkungen. In der Forschung gehört jedes Diagramm neben seine Erkenntnis. In einer Fallstudie legen Sie die Baseline und die Intervention fest, bevor Sie eine Veränderung zeigen.

Halten Sie Titel, Grafik, Legende, Kernerkenntnis, Datenalternative, Quelle und Anmerkungen innerhalb einer Figure-Umrandung. Fußnoten können der Abbildung folgen, aber eine Werbung, ein Anmeldeformular oder ein nicht zugehöriges Bild darf sie nicht unterbrechen. Die Quelle sollte sichtbar sein, ohne die Datenalternative öffnen zu müssen.

Platzieren Sie es nicht neben einem gleichrangigen Diagramm, einer unabhängigen Tabelle oder einem Statistik-Band, das seine Daten wiederholt, einer Preistabelle, einem Karussell oder einem stark hervorgehobenen Aufruf zum Handeln. Diese Kombinationen konkurrieren oder erzeugen mehrere Wahrheitsquellen. Trennen Sie Datenanzeigen durch Erläuterungen.

Anatomie

Der beschriftete Screenshot muss diese Bereiche identifizieren:

1. Kernerkenntnis: ein Satz, der das Muster ohne das Bild beschreibt.
2. Abbildungstitel: eine neutrale Beschreibung von Kennzahl, Grundgesamtheit und Zeitraum.
3. Plot: der Bereich, in dem Position, Länge oder Richtung Werte kodieren.
4. Achsen und Skalen: sichtbare Beschriftungen, Einheiten, Teilstriche, Intervalle und Basislinie.
5. Serienbeschriftungen: direkte Beschriftungen wo möglich; andernfalls eine Legende, die nicht nur auf Farbe basiert.
6. Anmerkung: ein optionaler Hinweis, der an einen Datenpunkt gebunden ist, niemals ein Ersatz für die Methodik.
7. Datenalternative: eine Tabelle oder ein geordneter Text, der die dargestellten Werte enthält.
8. Bildunterschrift und Quelle: Umfang, Herkunft, Berichtszeitraum und ggf. Berechnungshinweis.

Designbeispiele

Jede Variante verwendet zweidimensionale Markierungen, sichtbare Einheiten, eine Kernerkenntnis, Quelldaten und eine zugängliche Alternative. Es gibt keine 3D-, Piktogramm-, Tacho- oder Dualachsen-Variante, da Dekoration und konkurrierende Skalen den Vergleich verzerren.

Liniendiagramm: Verwenden Sie es für Werte, die in konsistenten geordneten Intervallen gemessen werden, meist Zeit. Fehlende Beobachtungen müssen als Lücken und nicht als erfundene Verbindungen erscheinen. Mehr als vier Serien erfordern in der Regel eine Aufteilung des Diagramms oder die Wahl einer Tabelle.

Balkendiagramm: Verwenden Sie es für Vergleiche oder Rangfolgen über diskrete Kategorien. Starten Sie die quantitative Achse bei Null, da die Balkenlänge die Größe darstellt. Bevorzugen Sie horizontale Balken bei langen Beschriftungen und sortieren Sie nach Wert, es sei denn, eine natürliche Reihenfolge ist sinnvoll.

Streudiagramm: Verwenden Sie es für die Beziehung zwischen zwei quantitativen Variablen. Zeigen Sie einzelne Beobachtungen, benennen Sie beide Kennzahlen, legen Sie jede angepasste Trendlinie offen und vermeiden Sie kausale Sprache, es sei denn, das Forschungsdesign stützt sie.

Gestapeltes Balkendiagramm: Verwenden Sie es, wenn sowohl die Gesamtsumme als auch die Zusammensetzung über eine kleine Anzahl von Gruppen hinweg wichtig sind. Halten Sie die Segmentreihenfolge stabil und begrenzen Sie den Stapel auf vier Kategorien. Wenn Leser hauptsächlich jede Komponente vergleichen müssen, verwenden Sie stattdessen gruppierte Balken oder kleine Mehrfachdiagramme.

Parameter

„Quelle“ bezeichnet hier den erstellten Ort, von dem der Renderer das Feld bezieht, nicht den vom Diagramm zitierten Beleglieferanten.

show-data=false ist nur zulässig, wenn eine äquivalente Datentabelle oder eine vollständige wertweise Textalternative bereits programmatisch mit der Abbildung verknüpft ist. Es ist niemals eine Lizenz, ein rein visuelles Diagramm zu veröffentlichen.

Syntax und Codebeispiele

Alle drei Notationen bewahren denselben Titel, dieselbe Kernerkenntnis, denselben Datensatz, dieselbe Skala, Quelle, denselben Zeitraum und denselben Alternativtext. Die Abbildungen sind beispielhaft.

Portable Markdown-Anweisung

:::chart-block{type=bar y-label="Anfragen" y-min=0 source="Beispielhafter Redaktionsdatensatz" period="2026 Q1–Q4" alt="Die Anfragen sinken in jedem Quartal, von 120 in Q1 auf 72 in Q4."}
## Beispielhafte Support-Anfragen nach Quartal

Kernerkenntnis: Die Anfragen sinken jedes Quartal, von 120 in Q1 auf 72 in Q4.

| Quartal | Anfragen |
|---:|---:|
| Q1 | 120 |
| Q2 | 108 |
| Q3 | 84 |
| Q4 | 72 |
:::

Die erste Überschrift wird auf title abgebildet; die Kernerkenntnis und die kanonische Datentabelle werden auf Textkörperfelder abgebildet.

Hugo-Shortcode

Der Hugo-Adapter verwendet benannte Parameter und leitet die Grafik und die Tabelle aus einem Datensatz im Textkörper ab. Diese Notation gibt die beabsichtigte Zuordnung an.

{{< chart-block type="bar" yLabel="Anfragen" yMin="0" source="Beispielhafter Redaktionsdatensatz" period="2026 Q1–Q4" alt="Die Anfragen sinken in jedem Quartal, von 120 in Q1 auf 72 in Q4." >}}
## Beispielhafte Support-Anfragen nach Quartal

Kernerkenntnis: Die Anfragen sinken jedes Quartal, von 120 in Q1 auf 72 in Q4.

| Quartal | Anfragen |
|---:|---:|
| Q1 | 120 |
| Q2 | 108 |
| Q3 | 84 |
| Q4 | 72 |
{{< /chart-block >}}

WordPress-Block

<!-- wp:amicited/chart-block {"type":"bar","title":"Beispielhafte Support-Anfragen nach Quartal","yLabel":"Anfragen","yMin":0,"source":"Beispielhafter Redaktionsdatensatz","period":"2026 Q1–Q4","alt":"Die Anfragen sinken in jedem Quartal, von 120 in Q1 auf 72 in Q4.","takeaway":"Die Anfragen sinken jedes Quartal, von 120 in Q1 auf 72 in Q4."} -->
<table><thead><tr><th>Quartal</th><th>Anfragen</th></tr></thead><tbody><tr><th>Q1</th><td>120</td></tr><tr><th>Q2</th><td>108</td></tr><tr><th>Q3</th><td>84</td></tr><tr><th>Q4</th><td>72</td></tr></tbody></table>
<!-- /wp:amicited/chart-block -->

Der Block kann SVG oder Canvas rendern, aber die gespeicherte und serverseitig gerenderte Ausgabe muss die Kernerkenntnis und die Tabelle enthalten. JavaScript kann die Interaktion verbessern, darf aber niemals die einzigen Beschriftungen oder Werte liefern.

Beispiele

Gut: Die Grafik und der Text erzählen dieselbe begrenzte Geschichte

Kernerkenntnis: Im beispielhaften Datensatz sinkt die mittlere Lösungszeit von 18 Stunden im Januar auf 12 Stunden im April; das Diagramm belegt nicht, warum.

Das Liniendiagramm verwendet gleichmäßige monatliche Intervalle und eine beschriftete Achse „Stunden“ von 10 bis 20. Diese offengelegte, nicht bei Null beginnende Linienskala ist angemessen, weil die Position und nicht die Balkenlänge Werte kodiert. Die Tabelle legt jeden Punkt offen, und der Text führt den Rückgang nicht auf eine Intervention zurück.

Schlecht: Die Grafik erzeugt künstliche Dringlichkeit

Ein Balkendiagramm mit dem Titel „Lösungszeit bricht nach Einführung ein“ zeigt dieselben Werte 18, 17, 14 und 12 Stunden auf einer Achse, die bei 11,5 beginnt. Die Balken scheinen fast auf nichts zu schrumpfen. Januar ist mit „vorher“, April mit „nachher“ beschriftet, die Zwischenmonate sind hinter Hover-Effekten versteckt, und weder das Datum der Intervention noch eine Quelle werden angezeigt. Eine Rot-Grün-Färbung vermittelt die einzige Leistungsbedeutung.

Dies ist fehlerhaft, weil Balken eine Null-Baseline erfordern, der Titel Kausalität behauptet und selektive Beschriftungen die Überprüfung verhindern. Ausschließlich per Hover verfügbare Werte schließen Tastatur-, Touch-, Extraktions- und assistive Technologie-Kontexte aus. Beheben Sie es mit einer Null-Baseline oder einer klar skalierten Linie, jeder Beobachtung, Quelle, Zeitraum, Datentabelle und einer nicht-kausalen Kernerkenntnis.

Schema-Markup und Barrierefreiheit

Schema.org hat keinen allgemeinen Chart- oder Graph-Typ. Ein Diagramm bleibt ein Beleg innerhalb einer geeigneten Entität auf Seitenebene wie Article, Report oder Dataset. Die Forschung kann einen echten herunterladbaren Datensatz mit Eigenschaften wie zeitlicher Abdeckung, Variablen, Ersteller und Verteilung beschreiben. Erfinden Sie niemals eine Dataset-, Bewertungs-, Trend- oder Ergebnis-Eigenschaft, nur weil ein Diagramm existiert.

Barrierefreiheit erfordert mehr als Alternativtext. Versehen Sie die Abbildung mit einem Titel und einer Bildunterschrift und ein SVG mit einem zugänglichen Namen und einer Beschreibung. Canvas benötigt eine äquivalente DOM-Repräsentation. Stellen Sie die dargestellten Werte in einer Tabelle mit echten Kopfzeilen bereit und halten Sie die Kernerkenntnis außerhalb der Grafik, damit sie Druck, Extraktion und Bildausfälle übersteht.

Verwenden Sie Farbe nicht als alleinigen Serienidentifikator; fügen Sie direkte Beschriftungen, Linienmuster, Punktformen oder Text hinzu. Tooltips müssen per Tastatur erreichbar, schließbar und ergänzend sein. Bei 200 % Zoom und schmalen Breiten lassen Sie einen beschrifteten Diagrammbereich umfließen oder scrollen, ohne ein Scrollen auf Seitenebene zu erzeugen.

Respektieren Sie Präferenzen für reduzierte Bewegung und vermeiden Sie animierte Zeichnungen oder automatische Übergänge. Wenn Filter die Daten ändern, kündigen Sie den Zustand an und zeigen Sie aktive Filter im Text an. Ein statisches Diagramm ist kein Tastaturziel, es sei denn, es hat echte Steuerelemente.

Schreibregeln

Diese Regeln halten die visuelle Autorität des Diagramms proportional zu seiner Beweiskraft:

• Schreiben Sie eine Kernerkenntnis von 15–35 Wörtern. Nennen Sie die Richtung oder Beziehung, relevante Endpunkte, Grundgesamtheit und Zeitraum, wenn diese Mehrdeutigkeit verhindern.
• Verwenden Sie 2–20 Punkte pro Serie und nicht mehr als vier Serien. Teilen Sie dichtere Arbeiten in kleine Mehrfachdiagramme, eine Tabelle oder einen herunterladbaren Datensatz auf.
• Halten Sie Titel auf 5–16 Wörter und Beschriftungen auf 1–6 Wörter. Titel beschreiben; Kernerkenntnisse schlussfolgern.
• Verwenden Sie dieselbe Einheit und Messdefinition in einer gesamten Serie. Wenn sich eine Methode ändert, unterbrechen Sie die Linie und erklären Sie die Diskontinuität.
• Starten Sie die quantitativen Achsen von Balken- und gestapelten Balkendiagrammen bei Null. Eine Linien- oder Streudiagramm-Skala darf nur dann enger sein, wenn Grenzen und Einheiten sichtbar bleiben und die Wahl Rauschen nicht übertreibt.
• Verwenden Sie gleiche visuelle Abstände für gleiche numerische oder zeitliche Intervalle. Platzieren Sie Februar und Dezember nicht so, als wären sie benachbarte Monate, wenn Zwischenzeiträume fehlen.
• Zeigen Sie fehlende Werte als fehlend an. Wandeln Sie sie niemals in Null um, verbinden Sie sie nicht stillschweigend und interpolieren Sie nicht ohne eine angegebene Methode.
• Kennzeichnen Sie Prognosen, Schätzungen, modellierte Werte und saisonal bereinigte Werte direkt. Gestalten Sie sie nicht als beobachtete Daten.
• Vermeiden Sie Doppelachsen, 3D-Effekte, Perspektive, bildliche Flächenskalierung, unterbrochene Achsen, Regenbogenpaletten und geglättete Kurven, die nicht gemessene Werte implizieren.
• Geben Sie die Quelle, den Abdeckungszeitraum, ggf. die Stichprobe oder Kohorte und jede Transformation wie Indexierung, Normalisierung oder gleitenden Durchschnitt an.
• Setzen Sie niemals einen Aufruf zum Handeln, ein Testimonial, ein Werbeabzeichen, eine unbelegte Kausalbehauptung oder einen wesentlichen Vorbehalt nur innerhalb des Bildes.
• Leiten Sie das Diagramm und seine Tabelle aus einem kanonischen Datensatz ab. Wenn sich Werte ändern, aktualisieren Sie einmal und generieren Sie beide Ausgaben neu.

Detaillierte Methodik und Zitate können in einem nahegelegenen Quellenblock fortgesetzt werden, aber das Diagramm benötigt dennoch eine eigene sichtbare Quelle und einen eigenen Zeitraum.

Beitragstypen, die es verwenden

Das postTypes-Frontmatter-Feld definiert die unten aufgeführten genehmigten Beziehungen. Die Aufnahme erlaubt ein Diagramm, wenn ein echtes quantitatives Muster existiert; sie verlangt nicht, dass Autoren für jede Seite eine Grafik erstellen.

QA-Checkliste

• Die Hauptaufgabe des Lesers besteht darin, ein Muster zu sehen; das reine Nachschlagen wäre mit einer Tabelle besser bedient.
• Die Kernerkenntnis ist ein vollständiger Satz in HTML-Text, stimmt mit den dargestellten Daten überein und bleibt innerhalb der Beweislage.
• Der Titel nennt die Kennzahl, Grundgesamtheit und den Zeitraum, die zum Verständnis der Abbildung erforderlich sind.
• Der Diagrammtyp entspricht der analytischen Aufgabe: Sequenz, Kategorienvergleich, Verteilung oder Beziehung.
• Balken-Baselines beginnen bei Null; jede andere Skala ist sichtbar, begründet und nicht täuschend.
• Intervalle, Einheiten, Nenner, Berechnungen und fehlende Werte werden ehrlich dargestellt.
• Serien sind direkt beschriftet oder ohne alleinige Farbverwendung unterscheidbar.
• Jeder wesentliche Wert ist ohne Hover, JavaScript, Animation oder Bildinterpretation verfügbar.
• Eine Datentabelle oder vollständige Textalternative verwendet echte Kopfzeilen und stimmt exakt mit der Grafik überein.
• Quelle, Abdeckungszeitraum, Kohorte oder Stichprobe und Transformationen sind neben dem Diagramm sichtbar.
• Das Diagramm und die zugängliche Alternative stammen aus einem kanonischen Datensatz.
• Der Block befindet sich nicht neben einer doppelten Datenanzeige, einem Conversion-Modul oder einer konkurrierenden, stark hervorgehobenen Grafik.
• Das Diagramm funktioniert mit Tastatureingabe, hohem Kontrast, 200 % Zoom, schmalen Bildschirmen und reduzierter Bewegung.
• Es verbleiben kein 3D-Effekt, keine Doppelachse, keine unterbrochene Achse, keine bildliche Skalierung, keine unbelegte Kausalbehauptung und keine dekorative Serie.
• Jegliche strukturierte Daten auf Seitenebene sind zulässig und konsistent mit der sichtbaren Beweislage.
• Der ausgewählte Beitragstyp enthält den Chart-Block in seinem Inhaltsvertrag.

FAQ

Wann sollte ich ein Diagramm anstelle einer Tabelle verwenden?

Verwenden Sie ein Diagramm, wenn die erste Aufgabe darin besteht, einen Trend, eine Verteilung, eine Rangfolge oder eine Beziehung zu erkennen. Verwenden Sie eine Tabelle, wenn Leser genaue Werte aus vielen Feldern benötigen. Wenn beide Aufgaben wichtig sind, behalten Sie eine kompakte Tabelle innerhalb des Chart-Blocks als zugängliche Datenalternative.

Muss ein Balkendiagramm bei Null beginnen?

Ja. Die Balkenlänge stellt die Größe ausgehend von einer Basislinie dar, daher verändert das Abschneiden dieser Basislinie das scheinbare Verhältnis. Ein Liniendiagramm kann eine nicht bei Null beginnende Skala verwenden, wenn der sichtbare Bereich und die Einheiten explizit sind und die engere Ansicht analytisch notwendig ist.

Reicht Alternativtext aus, um ein Diagramm zugänglich zu machen?

In der Regel nicht. Alternativtext sollte die Darstellung identifizieren und ihr Hauptmuster zusammenfassen. Ein Diagramm mit mehreren Werten benötigt außerdem eine nahegelegene Datentabelle oder einen gleichwertigen Text mit den Bezeichnungen, Werten, Einheiten, der Quelle und dem Zeitraum.

Darf die Kernerkenntnis nur im Diagrammtitel erscheinen?

Nein. Ein Titel identifiziert, was die Abbildung zeigt; eine Kernerkenntnis sagt, was der Leser bemerken soll. Halten Sie die Kernerkenntnis als vollständigen Satz außerhalb der Grafik, damit sie verfügbar bleibt, wenn das Bild nicht wahrgenommen oder extrahiert wird.

Erzeugt ein Chart-Block Schema.org-Markup?

Nein. Verwenden Sie gültiges Markup auf Seitenebene wie Article, Report oder Dataset nur, wenn die Seite unabhängig qualifiziert ist. Das Diagramm erzeugt keine neue Schema-Berechtigung und rechtfertigt keine strukturierten Aussagen, die in der sichtbaren Beweislage fehlen.