ARIA semantics give visualizations an accessibility meaning that screen readers can interpret. For an SVG chart, role="img" identifies the graphic, while title and desc provide its name and explanation. Connect them with aria-labelledby so the accessible description reflects the chart’s subject, conclusions, and significant trends. section 10.2.3
Apply the pattern progressively:
- Assign role="img" to an SVG when treating the complete graphic as one accessible image; this can prevent unhelpful reading of every axis label. section 10.2.3
- Append title as the SVG’s first child and give it a short, unique identifier. section 10.2.3
- Append desc with the chart’s purpose, important conclusions, and notable trends, then reference both elements through aria-labelledby. section 10.2.3
- Expose an alternative data table and keep interactive controls semantically accurate with button, type, and aria-pressed attributes. section 10.3
Describing a cetacean scatterplot
Create the SVG with role="img" and aria-labelledby="scatterplotTitle scatterplotDescription". Add a title such as “Visualization of a collection of cetacean species,” then describe the dataset and its important findings in desc. For detailed access to every value, provide a data table as an alternative.
