All HTML guides
Accessibility8 min read
How to Make an HTML Dashboard Understandable
Give charts, filters, statuses, and data tables a clear reading order and useful text equivalents.
The short version
A dashboard should still communicate the decision when its visualizations are unavailable.
01
Lead with the decision, not the decoration
Start with the question the dashboard answers. Put the key status or trend in text near the top, then use charts to add shape and comparison. Readers should not have to inspect every mark to understand the main change.
02
Make controls and updates explicit
- Label every filter and show the active selection.
- Announce important asynchronous updates appropriately.
- Keep keyboard focus stable when data refreshes.
- Use more than color for positive, negative, and warning states.
- Provide a table or summary for chart values.
03
Use HTML for the structure around the chart
A figure and figcaption can frame a visualization. A nearby paragraph can state the takeaway. A data table can provide exact values. The visualization itself may use canvas or SVG, but the surrounding HTML carries the narrative and navigation.
html
<figure aria-labelledby="revenue-caption">
<div role="img" aria-label="Revenue rose from 82 to 104 thousand dollars from April to June">
<!-- chart -->
</div>
<figcaption id="revenue-caption">
Revenue increased each month in the second quarter.
</figcaption>
</figure>