Accessible charts: encode meaning without relying on color alone

Last updated: 5 Oct 20265 min read

tutorial

A chart needs legible labels, keyboard access where interactive, and a text route to the same substantive data.

Keep meaning redundant

A red and green pair is not enough to distinguish two completion series. Use direct labels, distinct line styles or marker shapes, and a legend that names the measured groups. Color can reinforce meaning but should not carry it alone. Axis labels must include units and remain legible at narrow widths.

Write a useful alternative

An image alternative should state the main comparison and notable exception, not simply “bar chart.” A companion table should expose exact values, periods and denominators for readers who cannot use the graphic. For an interactive chart, its filter controls need visible names, keyboard focus and a text update when the dataset changes.

Test the states

Check high zoom, narrow layout, monochrome output and keyboard-only interaction. A hover tooltip is not an adequate source of the only exact value. If a tooltip reports 74 percent but the accessible table says 73.6 percent, declare rounding once and use it consistently. Dashboard filters must update both representations together.

Budget complexity

A dense chart with 40 small labels may be technically accessible but still hard to scan. Reduce visible series, use a stable sort and provide a drill-down or table for detail. Retain disclosure of hidden groups and totals so simplification does not selectively remove an unfavorable channel.

Implementation

def chart_alt_text(period_label, channel_rates):
    measured = [(channel, rate) for channel, rate in channel_rates.items() if rate is not None]
    if not measured:
        return f"{period_label}: no channel has an eligible denominator."
    highest_channel, highest_rate = max(measured, key=lambda item: item[1])
    return (f"{period_label}: {len(measured)} channels measured; "
            f"{highest_channel} has the highest completion rate at {highest_rate:.1%}.")

Performance and operating cost

A short alternative over C channels costs O(C) time and O(C) temporary space in this implementation. For larger datasets, aggregate once and reuse the exact result for chart, table and alternative text to prevent divergence.

Common Mistakes

Do not rely on hue alone to identify a series.
Do not put the only exact value in a pointer-only tooltip.
Do not write alternative text from stale data after filters change.