البديل بجدول بيانات

A one-line summary tells the story, but some users want the numbers. A data table gives them the raw values behind the chart.

Think of the chart as a visualization of a table. Offer that same table in real markup and every assistive tech can read it perfectly.

Screen readers understand the native table element deeply: rows, columns, and headers all announce correctly with no extra ARIA.

A caption names the table so a listener knows what data they entered. It reads out the moment focus lands on the table.

Mark labels as th with a scope, so each value announces with its column and row. That context is everything in a table.

Put the fallback table next to the chart, not on a separate page. Users should reach the data without hunting for it.

If the table clutters the design, hide it visually but keep it for screen readers using a visually-hidden class, never display none.

Watch out: display: none removes content from the accessibility tree entirely. Hidden that way, your fallback helps nobody.

Wrap the table in a details element so sighted users can expand the numbers on demand while it stays fully accessible.

If the chart updates, the table must update too. Stale numbers behind a fresh chart quietly mislead the people relying on them.

Ideally both the chart and table render from the same data. That keeps them honest and saves you maintaining two truths. 🔗

How should you hide a data table that you still want screen readers to read?

You learned to back any chart with a real table: captioned, header-scoped, kept in sync, and hidden safely if needed, never with display none. 📋