An equivalent experience gives people with disabilities access to the main conclusions and underlying information available to other users, without requiring an identical visual or interactive path. section 10.0
For visualizations, make the purpose and conclusions available through semantic structure, screen-reader descriptions, keyboard-accessible controls, and an alternative data table. These strategies often improve the project for everyone. section 10.2.3 section 10.3
Practical implementation choices include:
- Use semantic HTML elements such as header, main, section, and footer to expose page structure. section 10.2.3
- Give SVG graphics an img role, then connect title and desc elements with aria-labelledby. section 10.2.3
- Expose the underlying dataset through a descriptive table and provide a CSV download. section 10.2.3
- Support keyboard operation with real buttons, aria-pressed states, and focusable SVG shapes. section 10.2.3 section 10.3
Accessible cetacean visualization
A cetacean scatterplot can retain its visual chart while adding a generated description listing each species, population estimate, maximum size, maximum weight, and conservation status. A Display Data Table button then replaces the chart with a captioned table and CSV download. section 10.2.3
Listing 10.10 Exposing the underlying data (scatterplot.js)
const generateDescription = () => {
const desc = []; #1
desc.push("... Introductory text ...");
desc.push("Cetacean species:");
data.forEach(d => { #2
const cetacean = `
${d.common_name},
population estimate:
${d3.format(".2s")
(d.global_population_estimate)},
maximum size: ${d.max_size_m} meter,
maximum weight: ${d.max_weight_t} ton, #3
conservation status: ${conservationStatuses
.find(status =>
status.id === d.status).label}
`;
desc.push(cetacean);
});
return desc;
};
svg
.append("desc")
.attr("id", "scatterplotDescription")
.text(generateDescription()); #4
Inspect the generated SVG description that exposes the visualization’s underlying cetacean data to screen-reader users. section 10.2.3
