WCAG is an international standard for making web content accessible. It organizes accessibility around four goals: perceivable, operable, understandable, and robust experiences for people with disabilities. section 10.2
Apply WCAG to web visualizations by checking whether:
- Text alternatives, semantic markup, screen-reader access, and an alternative data table make the visualization perceivable and robust. section 10.2
- Keyboard navigation, sufficient interaction time, clear cues, and appropriately sized controls make content operable. section 10.2
- Readable text, predictable features, and forms that help users prevent and correct mistakes make content understandable. section 10.2
- Colors meet at least 4.5:1 contrast for regular text and 3:1 for large text and geometric shapes. section 10.2.2
- Information does not depend on color alone, and dense visualizations provide explanations or aggregate competing elements. section 10.2.2
Accessible cetacean scatterplot
Improve a D3.js scatterplot by replacing insufficient colors with a higher-contrast palette, adding dark strokes, and applying SVG patterns such as dots, lines, and stars. The combined color-and-pattern treatment lets users distinguish conservation statuses without relying on color alone. Verify text and shape contrast with browser and WebAIM contrast checkers. section 10.2.2
Table 10.1 Accessibility checklist for D3.js projects
|
Textual information
|
|
The chart’s purpose and how to read, use, and interpret it are explained.
|
|
All text targets a reading grade level of 9 or lower.
|
|
Text size is at least 12 px, ideally larger.
|
|
Visual information
|
|
Colors provide sufficient contrast.
|
|
Information isn’t communicated with color alone.
|
|
Data is presented at an appropriate density.
|
|
Screen readers access
|
|
The markup is semantic.
|
|
The SVG container provides additional context.
|
|
The visualized data is read by screen readers.
|
|
A data table is provided as an alternative.
|
|
Custom keyboard and touch controls don’t override screen reader settings.
|
|
Interactions
|
|
Users can operate interactions with a keyboard.
|
|
Navigation and interaction are easy and not labor-intensive.
|
|
Interaction cues are provided.
|
|
Other considerations
|
|
The project offers an equivalent experience on all screen sizes.
|
|
Style changes made by the user aren’t overridden.
|
|
Visuals don’t present a risk of seizure.
|
Use the accessibility checklist to audit textual information, visual information, screen-reader access, interactions, and responsive behavior in D3.js projects. section 10.2
