Skill LibraryPrompt Skill1 DesignsTop Views

Chart Accessibility Encoding

Create color-not-alone series encodings, direct labels, line styles, symbols, patterns, legends, summaries, long descriptions, table alternatives, SVG/Canvas accessibility, and keyboard tooltip paths for chosen charts.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines10

Reusable instruction lines for generation.

Author@Interface Lab

Data Visualization

Skill Directive

Description

TagsData Visualization

Skill Prompt

- Use after the chart type is chosen, when the task needs chart accessibility encoding, color-not-alone meaning, multi-series lines, status charts, heatmaps, maps, SVG/Canvas charts, dashboard visualizations, chart table alternatives, or keyboard tooltips.
- If the chart type is not chosen yet, use chart-selection-accessibility first; this skill only turns selected chart encodings, alternatives, and frontend states into an accessibility contract.
- Write the chart claim and equivalent path first: title states the conclusion, caption/subtitle names units/scope/source/update time/caveat, summary explains trend/outlier/comparison, and a table or structured list carries key data.
- Create an encoding ledger: each series/status/threshold/selection records visible label, color token, contrast note, shape/marker, line style, pattern/texture, direct label, and legend label.
- Color cannot be the only meaning carrier: multi-series lines use direct labels plus dashes/markers, status charts use text/icons/grouping, and maps/heatmaps provide bins, labels, lists/tables, and non-color symbols.
- Keep legends close to the chart and in reading order; if legends toggle series, use real buttons/checkboxes, visible focus, selected state, and live-region updates instead of hover-only explanation.
- SVG charts use headings, figure, figcaption, summary, and table; decorative gridlines/marks can be hidden. Canvas/WebGL charts need accessible names plus adjacent summary/table because pixels do not expose the data path to screen readers.
- Tooltips cannot be hover-only: provide focusable marks, pinned inspectors, linked table rows, or external selection controls; filters, zoom, and export use native form and button semantics.
- Responsive and export behavior keeps information intact: mobile prioritizes title, summary, selected value, key comparison, and table; 200% zoom avoids whole-page horizontal scroll; print/export retains source, updated time, legend/labels, and data alternative.
- Deliver chart claim, encoding ledger, color-not-alone proof, legend/direct-label strategy, SVG/Canvas implementation notes, keyboard tooltip path, table alternative schema, and responsive/high-contrast/reduced-motion/export QA. Sources: W3C WAI Complex Images, WCAG Use of Color/Non-text Content/Non-text Contrast, USWDS Data Visualizations/Table, Chart.js Accessibility, and Observable Plot accessibility.

Public directive summary shown; Pro unlocks the full prompt.

Layout Info

Designs below are ordered by views. Top items use live previews; the rest stay fast thumbnail cards.

Unlock Pro All Skills

Chart Accessibility Encoding

More pages using Chart Accessibility Encoding