The aria-labelledby attribute gives an element an accessible name by pointing to the IDs of one or more elements containing its descriptive text. For an SVG visualization, connect the container to its title and description so screen readers can announce what the chart shows. section 10.2.3
Apply the pattern in a D3 visualization:
- Give the SVG a role of img and set aria-labelledby to the space-separated IDs of its title and desc elements. section 10.2.3
- Use a concise title for the visualization and a desc containing its subject, notable conclusions, and significant trends. section 10.2.3
- Reuse the pattern for legends; provide only a title when a separate description is unnecessary. section 10.2.3
Accessible scatterplot
Create an SVG with role="img" and aria-labelledby="scatterplotTitle scatterplotDescription". Append matching title and desc elements with those IDs; screen readers can then announce the visualization and its main conclusions. section 10.2.3
Listing 10.7 Making the SVG container accessible (scatterplot.js)
const svg = d3.select("#scatterplot")
.append("svg")
.attr("viewBox", `0, 0, ${width}, ${height}`)
.attr("role", "img") #1
.attr("aria-labelledby", "scatterplotTitle #2
scatterplotDescription");
svg #3
.append("title")
.attr("id", "scatterplotTitle")
.text("Visualization of a collection of
cetacean species");
svg #4
.append("desc")
.attr("id", "scatterplotDescription")
.text("...");
Inspect the complete D3 pattern for labeling an SVG container with title and desc elements. section 10.2.3
