New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Kb Data Visualization Accessibility

by Community-Access in Community-Access/accessibility-agents

Reference data, not a reviewer. An agent skill from Community-Access/accessibility-agents.

MITAuto-check passedFrontend & Design

Install Kb Data Visualization Accessibility

skills CLI
$ npx skills add Community-Access/accessibility-agents --skill kb-data-visualization-accessibility -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Community-Access/accessibility-agents kb-data-visualization-accessibility --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Community-Access/accessibility-agents.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/kb-data-visualization-accessibility .claude/skills/kb-data-visualization-accessibility && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
kb-data-visualization-accessibility
GitHub stars
422
Token cost
~1.8k tokens
SKILL.md length
509 words
Files
2
Skills in repo
108
Repo updated
First seen
Licence
MIT

At a glance

Reference data, not a reviewer. An agent skill from Community-Access/accessibility-agents.

  • Tasks that involve Accessibility
  • SKILL.md covers Data Visualization…, Chart Accessibility by Type, SVG Accessibility Patterns and Chart Library Accessibility APIs, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Tasks that involve Data visualization

What it does

Kb Data Visualization Accessibility is an agent skill from Community-Access/accessibility-agents. Reference data, not a reviewer. Audit charts and graphs for accessibility: SVG ARIA, data table alternatives, keyboard interaction, color-safe palettes, and library APIs.

Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`).

It sits in Frontend & Design, covering Accessibility and Data visualization. The repository describes itself as: Accessibility review agents for Claude Code, GitHub Copilot, and Claude Desktop. Eleven specialists that enforce WCAG 2.2 AA compliance so AI coding tools stop generating… The licence is MIT.

When your agent uses it

  • Tasks that involve Accessibility
  • Tasks that involve Data visualization

Example prompts

  • “/kb-data-visualization-accessibility”

What it can do on your machine

Read from SKILL.md and the folder at commit decf6ba. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are html and javascript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Kb Data Visualization Accessibility loads about 1.8k tokens when it runs. Until then it costs about 52 tokens; SKILL.md has 509 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~52
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Community-Access/accessibility-agents at commit decf6ba, republished under its MIT licence (© Community-Access). 509 words, ~1,792 tokens.

Download SKILL.mdSave it as .claude/skills/kb-data-visualization-accessibility/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
kb-data-visualization-accessibility
description
Reference data, not a reviewer. Audit charts and graphs for accessibility: SVG ARIA, data table alternatives, keyboard interaction, color-safe palettes, and library APIs.
license
MIT
disable-model-invocation
true
user-invocable
false
metadata.tier
reference
metadata.domain
cross-cutting
metadata.output
none
metadata.effort
low
metadata.title
Data Visualization Accessibility

Data Visualization Accessibility Skill

Reference data for making charts, graphs, dashboards, and interactive data visualizations accessible. Used by data-visualization-accessibility agent.

Chart Accessibility by Type

Bar/Column Charts
  • Provide a text summary of the key takeaway (e.g., "Sales increased 40% in Q4")
  • Include a data table alternative (visually hidden or toggleable)
  • Each bar should be keyboard-focusable with a tooltip announcing the value
  • Use patterns or textures in addition to color to distinguish series
Line Charts
  • Describe the trend in alt text (e.g., "Upward trend from January through June, then decline")
  • Provide data table with all data points
  • Keyboard navigation: Left/Right arrows move between data points, value announced on focus
  • Use distinct line styles (solid, dashed, dotted) alongside colors
Pie/Donut Charts
  • Accompany with a data table showing percentages
  • Each segment keyboard-focusable with percentage and label announced
  • Use patterns/hatching — color-only distinction fails WCAG 1.4.1
  • Consider: pie charts are generally poor for accessibility; a bar chart + table is often better
Scatter Plots
  • Provide summary statistics (mean, median, correlation) as text
  • Data table with all points is essential
  • Interactive exploration via keyboard may not be feasible for large datasets — prioritize the summary
Treemaps / Heatmaps
  • Provide hierarchical data table alternative
  • Keyboard navigation through segments with value announcements
  • Color scales must have sufficient contrast between adjacent levels

SVG Accessibility Patterns

Static Chart (Image-like)
html
<figure>
  <svg role="img" aria-labelledby="chart-title chart-desc">
    <title id="chart-title">Monthly Revenue 2025</title>
    <desc id="chart-desc">Bar chart showing revenue from January through December.
      Revenue grew from $50K in January to $120K in December with a dip in July.</desc>
    <!-- chart elements -->
  </svg>
  <figcaption>Figure 1: Monthly Revenue 2025. <a href="#revenue-table">View data table</a></figcaption>
</figure>
Interactive Chart
html
<svg role="application" aria-roledescription="interactive chart" aria-label="Monthly Revenue">
  <g role="list" aria-label="Revenue data points">
    <rect role="listitem" tabindex="0" aria-label="January: $50,000" .../>
    <rect role="listitem" tabindex="0" aria-label="February: $55,000" .../>
  </g>
</svg>
<div aria-live="polite" class="sr-only" id="chart-announcements"></div>
Decorative Charts
html
<svg aria-hidden="true" focusable="false">
  <!-- decorative background chart -->
</svg>

Chart Library Accessibility APIs

Highcharts
javascript
Highcharts.chart('container', {
  accessibility: {
    enabled: true,
    description: 'Chart showing quarterly revenue growth',
    point: {
      valueDescriptionFormat: '{point.name}: {point.y} dollars'
    },
    keyboardNavigation: {
      enabled: true,
      order: ['series', 'zoom', 'rangeSelector', 'legend', 'chartMenu']
    }
  },
  // Highcharts has built-in sonification for data
  sonification: {
    enabled: true
  }
});

Highcharts built-in a11y features:

  • Automatic <table> fallback generation
  • Keyboard navigation between data points
  • Screen reader announcements for each point
  • Sonification (data as sound)
  • High contrast mode support
Chart.js
javascript
new Chart(ctx, {
  type: 'bar',
  data: { /* ... */ },
  options: {
    plugins: {
      // Chart.js has limited built-in accessibility
      // Use chartjs-plugin-a11y-legend for legend accessibility
      // Use chartjs-plugin-datalabels for visible data values
    }
  }
});
// Chart.js renders to <canvas> — provide a fallback table or aria-label on canvas

Chart.js limitations:

  • Canvas-based — no DOM elements for screen readers to traverse
  • Must provide <canvas aria-label="..." role="img"> or a fallback <table>
  • No built-in keyboard navigation — requires custom implementation
D3.js

D3 renders to SVG — accessibility must be manually implemented:

javascript
// Add ARIA to each data element
bars.attr('role', 'listitem')
    .attr('tabindex', '0')
    .attr('aria-label', d => `${d.name}: ${d.value} units`);

// Add keyboard navigation
bars.on('keydown', (event, d) => {
  if (event.key === 'ArrowRight') { /* focus next bar */ }
  if (event.key === 'ArrowLeft') { /* focus previous bar */ }
});
Recharts (React)
jsx
<BarChart data={data} accessibilityLayer>
  <Bar dataKey="value" />
</BarChart>

Recharts: accessibilityLayer prop adds basic ARIA attributes. Supplement with a data table.

Data Table Fallback Template

html
<details>
  <summary>View data table</summary>
  <table id="revenue-table">
    <caption>Monthly Revenue 2025</caption>
    <thead>
      <tr>
        <th scope="col">Month</th>
        <th scope="col">Revenue ($)</th>
        <th scope="col">Change (%)</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>January</td><td>50,000</td><td>—</td></tr>
      <tr><td>February</td><td>55,000</td><td>+10%</td></tr>
    </tbody>
  </table>
</details>
Show full SKILL.md (202 more words)Show less

Color-Safe Palettes

Palettes that remain distinguishable under common forms of color vision deficiency:

Wong Palette (8 colors — CVD safe)

Each color, with its hex and use.

ColorHexUse
Black#000000Text, borders
Orange#E69F00Data series 1
Sky Blue#56B4E9Data series 2
Bluish Green#009E73Data series 3
Yellow#F0E442Data series 4
Blue#0072B2Data series 5
Vermillion#D55E00Data series 6
Reddish Purple#CC79A7Data series 7
Rules for Color in Charts
  • Never use red/green as the only distinction (deuteranopia affects ~8% of males)
  • Always add a secondary visual channel: pattern, shape, label, or position
  • Test with CVD simulation tools (Sim Daltonism, Chrome DevTools Emulate vision deficiencies)
  • Ensure adjacent colors in a chart have sufficient contrast with each other (not just against white)

Keyboard Interaction Model

Single-Series Chart

Each key, with its action.

KeyAction
TabEnter/exit chart
Left/Right ArrowMove between data points
Up/Down ArrowMove between series (if multiple)
Enter/SpaceShow detail or drill down
EscapeExit drill-down or chart
Home/EndJump to first/last data point
Dashboard Navigation

Each key, with its action.

KeyAction
TabMove between chart widgets
EnterEnter interactive chart
EscapeExit back to dashboard level
Arrow keysNavigate within active chart

© Community-Access, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in skills/kb-data-visualization-accessibility of Community-Access/accessibility-agents.

  • SKILL.md
  • agents/openai.yaml

Open the folder on GitHubat commit decf6ba

Compare with similar skills

Kb Data Visualization Accessibility next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Kb Data Visualization Accessibility compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Kb Data Visualization Accessibility this skillCommunity-Access/accessibility-agents422—~1.8kAutomated safety check: PassMIT
Blog ChartAgriciDaniel/claude-blog2.3k1 repos~2.4kAutomated safety check: PassMIT
Visualizing Dataancoleman/ai-design-components526—~2.4kAutomated safety check: PassMIT
Blog ChartInfrasity-Labs/dev-gtm-claude-skills139—~2.1kAutomated safety check: PassMIT
Data-Dense Dashboard Designerplugin87/ux-ui-agent-skills1.5k—~2.6kAutomated safety check: PassMIT
Md Reviewborghei/Claude-Skills881—~3.8kAutomated safety check: PassMIT

Similar skills

  • Blog Chart

    AgriciDaniel/claude-blog

    Generate dark-mode-compatible inline SVG data visualization charts for blog posts.

    2.3k GitHub starsUsed in 1 repo~2.4k tokens
    Frontend & DesignAuto-check passed

  • Visualizing Data

    ancoleman/ai-design-components

    Builds dashboards, reports, and data-driven interfaces requiring charts, graphs, or visual analytics.

    526 GitHub stars~2.4k tokensUpdated 10 mo ago
    Frontend & DesignAuto-check passed

  • Blog Chart

    Infrasity-Labs/dev-gtm-claude-skills

    Generate dark-mode-compatible inline SVG data visualization charts for blog posts.

    139 GitHub stars~2.1k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

  • Data-Dense Dashboard Designer

    plugin87/ux-ui-agent-skills

    Lays out dense analytics or trading-terminal screens in banded sections with hand-drawn SVG charts, instead of a wall of identical stat cards.

    1.5k GitHub stars~2.6k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Md Review

    borghei/Claude-Skills

    Pre-publication quality gate for authored Markdown — heading structure, on-disk link resolution, readability, accessibility, terminology.

    881 GitHub stars~3.8k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Color Accessibility Guide

    wentorai/research-plugins

    Colorblind-friendly palettes and accessible visualization design

    298 GitHub starsUsed in 1 repo~1.8k tokens
    Frontend & DesignAuto-check passed

More from Community-Access/accessibility-agents

All 108 skills in this repo

  • A11y Core

    Community-Access/accessibility-agents

    Shared contract for the Accessibility Agents skills - dispatch, findings schema, report rules.

    422 GitHub stars~1.2k tokensUpdated 14 days ago
    Auto-check passed

  • Kb Web Scanning

    Community-Access/accessibility-agents

    Reference data, not a reviewer. An agent skill from Community-Access/accessibility-agents.

    422 GitHub stars~1.2k tokensUpdated 14 days ago
    Auto-check passed

  • Accessibility Lead

    Community-Access/accessibility-agents

    Web UI accessibility lead. An agent skill from Community-Access/accessibility-agents.

    422 GitHub stars~932 tokensUpdated 14 days ago
    Auto-check passed

  • Alt Text Headings

    Community-Access/accessibility-agents

    Alt text, SVGs, figures, charts, heading order, page titles and landmarks.

    422 GitHub stars~1.5k tokensUpdated 14 days ago
    Auto-check passed

  • Aria Specialist

    Community-Access/accessibility-agents

    ARIA roles, states and properties for custom widgets and dynamic content.

    422 GitHub stars~1.6k tokensUpdated 14 days ago
    Auto-check passed

  • Cognitive Accessibility

    Community-Access/accessibility-agents

    Plain language, WCAG 2.2 cognitive criteria, COGA guidance and auth UX.

    422 GitHub stars~1.4k tokensUpdated 14 days ago
    Auto-check passed

Categories

Questions about Kb Data Visualization Accessibility

What does Kb Data Visualization Accessibility do?

Reference data, not a reviewer. An agent skill from Community-Access/accessibility-agents. Kb Data Visualization Accessibility is an agent skill from Community-Access/accessibility-agents. Reference data, not a reviewer.

When should I use Kb Data Visualization Accessibility?

Kb Data Visualization Accessibility fits situations like: tasks that involve Accessibility; tasks that involve Data visualization.

How do I install Kb Data Visualization Accessibility in Claude Code?

Run `npx skills add Community-Access/accessibility-agents --skill kb-data-visualization-accessibility -a claude-code`. Or copy the skill folder (skills/kb-data-visualization-accessibility in Community-Access/accessibility-agents) into .claude/skills/kb-data-visualization-accessibility in your project. Claude Code loads it when a task matches its description.

How do I install Kb Data Visualization Accessibility in Codex?

Run `npx skills add Community-Access/accessibility-agents --skill kb-data-visualization-accessibility -a codex`. Or copy the skill folder (skills/kb-data-visualization-accessibility in Community-Access/accessibility-agents) into .agents/skills/kb-data-visualization-accessibility in your project. Codex loads it when a task matches its description.

Can I use Kb Data Visualization Accessibility in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Community-Access/accessibility-agents --skill kb-data-visualization-accessibility -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/kb-data-visualization-accessibility, .gemini/skills/kb-data-visualization-accessibility, .github/skills/kb-data-visualization-accessibility and .opencode/skills/kb-data-visualization-accessibility in your project.

What does Kb Data Visualization Accessibility need to run?

SKILL.md names no scripts, command-line tools or credentials: Kb Data Visualization Accessibility is instructions for the agent only.

Does Kb Data Visualization Accessibility access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Kb Data Visualization Accessibility safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Kb Data Visualization Accessibility use?

Kb Data Visualization Accessibility is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Kb Data Visualization Accessibility use?

About 1.8k tokens (SKILL.md is roughly 7.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Kb Data Visualization Accessibility?

Skills that share tags, products or a category with Kb Data Visualization Accessibility: Blog Chart (AgriciDaniel/claude-blog, 2.3k stars), Visualizing Data (ancoleman/ai-design-components, 526 stars), Blog Chart (Infrasity-Labs/dev-gtm-claude-skills, 139 stars) and Data-Dense Dashboard Designer (plugin87/ux-ui-agent-skills, 1.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Kb Data Visualization Accessibility?

Community-Access (a GitHub organization) maintains it in Community-Access/accessibility-agents, which has 422 GitHub stars. The repository holds 108 skills in this directory. The repository was last updated on September 23, 2026.

Source: Community-Access/accessibility-agents on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.