A screen reader is assistive software that renders web content as speech or Braille. It helps people who are blind or have very limited vision, but accessible visualizations should provide an equivalent rather than identical experience. section 10.1 section 10.2.3
Make a visualization understandable and operable with a screen reader by:
- Writing a descriptive HTML title and using semantic elements such as header, main, section, and footer. section 10.2.3
- Giving SVG graphics role="img", aria-labelledby, title, and desc elements so the graphic has a meaningful name and description. section 10.2.3
- Describing the underlying data explicitly, including each cetacean’s population, size, weight, and conservation status. section 10.2.3
- Providing semantic buttons, keyboard access, and a data table as an alternative to the chart. section 10.2.3 section 10.3
Accessible cetacean scatterplot
A chart can expose its purpose with an SVG title such as “Visualization of a collection of cetacean species,” then place a generated description in desc. A separate Display Data table button switches from the chart to a captioned table containing the same dataset and a CSV download link. section 10.2.3
Listing 10.5 Adding semantic layout elements (index.html)
<body>
<div class="container">
<header>
<h1>Cetacean species</h1>
<div class="intro">...</div>
</header>
<main>
<section>
<div class="legend-container">
...
</div>
</section>
<section>
<div class="filters-container">
...
</div>
<div class="responsive-svg-container">
<div id="scatterplot"></div>
</div>
</section>
</main>
<footer>
<div class="sources">
...
</div>
<div class="methodology">
...
</div>
</footer>
</div>
...
</body>
Use semantic layout elements to expose the visualization’s header, main content, legend, filters, chart, sources, and methodology as navigable page regions. section 10.2.3
