An SVG <desc> element supplies a longer textual description of a graphic for screen reader users. Unlike a short <title>, it can describe the chart’s subject, conclusions, and significant trends. section 10.2.3
For an accessible visualization, give the SVG a role of img, connect its title and description with aria-labelledby, and append the <desc> element with a stable id. Place <title> first; place <desc> after it. section 10.2.3
A useful description should:
- Identify what the visualization represents. section 10.2.3
- State important conclusions and significant trends rather than merely repeating every visual label. section 10.2.3
- Expose underlying data when users need a detailed equivalent experience, including values and categories for each datum. section 10.3
Accessible cetacean scatterplot
A scatterplot can describe 39 cetacean species, identify the blue whale as the largest, and report the Pantropical Spotted dolphin’s population. In D3, append <desc id="scatterplotDescription"> to the SVG and set aria-labelledby to reference the title and description. For changing datasets, generate the description from each datum’s name, population estimate, maximum size, maximum weight, and conservation status. section 10.2.3
