Alternative Text And Descriptions

Why this matters

As a Data Visualization Engineer, your charts must be understandable by everyone, including screen reader users and people who cannot perceive color or fine detail. Good alternative text and descriptions ensure key insights are communicated, not just the picture.

• BI dashboards: Summarize key trends, alerts, and filters so screen reader users get the same insight.
• Reports and slide exports: Static images need short alt text and, when complex, a longer description or a data table alternative.
• Monitoring and KPI tiles: Provide concise, stable descriptions that highlight change and context.

Concept explained simply

Think of descriptions as a three-layer system:

• Layer 1: Alt text (short). A one-sentence summary that states the purpose and the main takeaway.
• Layer 2: Caption. A slightly longer, human-friendly note that adds context like time range and units.
• Layer 3: Long description (or data alternative). A structured explanation listing trends, outliers, and any filters, plus a small table if needed.

Mental model: Radio commentary. If someone cannot see the chart, what would you say in 10–20 seconds so they still understand the point?

What to describe

• Purpose: What question does the chart answer?
• Type and scope: Chart type, timeframe, and key dimensions.
• Main takeaway: Trend, comparison, or anomaly in plain language.
• Numbers and units: Provide the essential figures (not every data point).
• Extremes and change: Peaks, troughs, max/min, percentage or absolute change.
• Filters/state: Current selection, date range, segments.
• Avoid: Visual styling, color names, or step-by-step geometry unless critical.

Length and structure

• Alt text: 1–2 sentences (roughly 80–150 characters). Focus on the key insight.
• Caption: 1–3 short sentences with context and timeframe.
• Long description: Bullet points or brief paragraphs. Keep scannable. Include a tiny data summary if helpful.

Templates you can reuse:

• Alt: "[Metric] [rises/falls/is flat] over [time/segment], with [highlight/anomaly]."
• Caption: "[Chart type] of [metric] from [start] to [end]. [Key change] ([%/value]). Filters: [x]."
• Long: "Purpose: ... | Takeaway: ... | Detail: 1) ..., 2) ..., 3) ... | Notes: ..."

Worked examples

Special cases and patterns

• Pie/Donut: Use for part-to-whole with few slices. Describe top slices and totals. Avoid calling out colors; name the slice.
• Heatmap: Mention what rows/columns represent, range, and the cells with highest/lowest values.
• Scatter: Note correlation direction/strength, clusters/outliers, and axes units.
• Maps: State regions and values; summarize extremes and noteworthy clusters. Consider a small table for exacts.
• Dashboards: Provide a short, stateful overview. Include filters, date range, and any alerts.
• Streaming/real-time: Focus on current level vs baseline and short trend window.
• Error/empty states: Alt should explain the issue and what’s shown (e.g., "No data for selected filters").

Implementation tips for engineers

• Images: Use alt for short text. Provide a nearby caption. For complex visuals, add a long description immediately after or a collapsible section.
• SVG: Provide a short label and description programmatically (e.g., role and labels). Ensure keyboard focus and reading order are logical.
• Decorative graphics: Use empty alt so they are skipped.
• Data alternative: Offer a compact data table for complex charts.
• State: When filters change, ensure the accessible name/description reflects the new state.

Checklist

• Alt states the key takeaway in 1–2 sentences.
• Caption adds timeframe, units, and context.
• Long description available for complex charts.
• Numbers are included for peaks/troughs; not every point is read.
• Filters and date range are stated.
• No reliance on color names or styling.
• Data table or summary provided for dense visuals.
• Descriptions update when state/filters change.

Exercises

Complete these practice tasks. Then take the Quick Test. Note: The Quick Test is available to everyone; logged-in users will have their progress saved.

Common mistakes

How to self-check

• Screen reader pass: Can someone understand the takeaway without seeing the chart?
• Time test: Can your alt be spoken clearly in 10–20 seconds?
• State test: Change a filter—does the description still match?
• Peer review: Ask a teammate to restate the insight after hearing your description.

Practical projects

• Retrofit one dashboard: Add alt, captions, and long descriptions to three charts, including one complex visual with a small data table.
• Template library: Create reusable templates for line, bar, pie, map, and heatmap descriptions in your team’s design system.
• Dynamic descriptions: Implement stateful descriptions that update when filters change for two interactive charts.

Mini challenge

Pick a chart you shipped last month. In 60 seconds, write a one-sentence alt that states the purpose and the main takeaway. Then expand it into a two-sentence caption and a four-bullet long description.

Who this is for

• Data Visualization Engineers and BI developers who build dashboards and reports.
• Analytics engineers who publish charts from pipelines.
• Designers and PMs defining reporting requirements.

Prerequisites

• Basic understanding of common chart types and their purpose.
• Familiarity with your stack’s rendering (images, SVG, canvas) and how text alternatives are provided.

Learning path

1. Learn the three layers (alt, caption, long description).
2. Practice with line and bar charts.
3. Handle special cases (pie, heatmap, scatter, maps).
4. Add stateful descriptions for interactive dashboards.
5. Standardize templates in your team.

Next steps

• Apply these patterns to your current dashboard.
• Have one teammate review your descriptions using a screen reader.
• Take the Quick Test below and iterate based on results.