accessibility-and-inclusive-visualization

Review and improve charts, diagrams, and dashboards for accessibility and inclusive design.

5.3k|765|Updated Mar 4, 2026
One-click install
npx skills add https://github.com/openai/plugins --skill accessibility-and-inclusive-visualization
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility-and-inclusive-visualization
Source: https://github.com/openai/plugins/tree/main/plugins/build-web-data-visualization/skills/accessibility-and-inclusive-visualization
Command: npx skills add https://github.com/openai/plugins --skill accessibility-and-inclusive-visualization

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Data visualizations often exclude users who rely on screen readers, keyboard navigation, or who cannot perceive color differences or motion. This Skill provides a structured workflow to make charts, diagrams, and dashboards understandable through non-visual paths, covering text alternatives, contrast, keyboard support, and reduced-motion behavior.

Core Features & Use Cases

  • Accessibility Review Workflow: Audit charts and dashboards for contrast, redundant encoding, hover dependence, focus order, and export fallbacks before release.
  • Text Alternatives for Complex Visuals: Write alt text and long descriptions that convey the scene, data layer, main takeaway, and caveats for charts, UML/ERD diagrams, and generated imagery.
  • Interaction and Motion Guidance: Define keyboard paths, reduced-motion alternatives, and static fallbacks for tooltips, scrollytelling, parallax, WebGL, and animated visualizations.
  • Use Case: Before publishing a dashboard to a PDF report, use this Skill to verify color contrast ratios, add direct labels and data tables, and confirm the exported figure preserves the key insight without interactivity.

Quick Start

Review this dashboard for color contrast, keyboard navigation, and screen-reader issues, then suggest fixes.

Frequently Asked Questions about accessibility-and-inclusive-visualization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a chart accessible for screen readers?

Provide a non-visual path to the key insight through short alt text plus a longer description or adjacent data table covering the chart structure, notable values, and main takeaway. Avoid alt text that only names the chart type, and ensure essential information never depends on hover alone.

How do I write alt text for complex data visualizations?

Write alt text that covers the scene, the data layer, the main takeaway, and any caveats rather than just naming the chart type. For complex figures, pair short alt text with a long description or surrounding narrative, and consider adding a data table as part of the accessibility strategy.

What contrast ratio do chart colors need for WCAG compliance?

Normal text should meet at least 4.5:1 contrast, large text at least 3:1, and meaningful graphical objects or UI state indicators at least 3:1 against adjacent colors. Also check adjacent mark contrast where boundaries carry information, such as stacked bars or choropleth regions.

How do I handle accessibility for animated or parallax visualizations?

Specify reduced-motion behavior with a key-frame or final-state fallback, preserve native scroll and keyboard behavior for scrollytelling, and ensure motion can be disabled without losing the evidence. Provide a static stacked fallback that keeps the data meaning intact.

Does web chart accessibility carry over to PDF exports?

No, interactivity disappears in exports, so PDFs and static images need their own accessibility strategy. Provide fallback text alternatives, direct labels, and visible summaries of active filters and selections, and test the exported artifact separately from the live chart.