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

Alt Text Headings

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

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

MITAuto-check passedFrontend & Design

Install Alt Text Headings

skills CLI
$ npx skills add Community-Access/accessibility-agents --skill alt-text-headings -a claude-code

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

GitHub CLI
$ gh skill install Community-Access/accessibility-agents alt-text-headings --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/alt-text-headings .claude/skills/alt-text-headings && 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
alt-text-headings
GitHub stars
423
Token cost
~1.5k tokens
SKILL.md length
552 words
Files
8 (incl. references)
Skills in repo
108
Repo updated
First seen
Licence
MIT

At a glance

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

  • Tasks that involve Accessibility
  • SKILL.md covers Your Scope, The Element, CSS Background Images and Form Image Buttons, plus 8 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Alt Text Headings is an agent skill from Community-Access/accessibility-agents. Alt text, SVGs, figures, charts, heading order, page titles and landmarks.

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 10 other files, including reference files (for example `agents/openai.yaml`, `examples/findings.json` and `references/alternative-text-the-rules.md`).

It sits in Frontend & Design, covering Accessibility. 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

Example prompts

  • “/alt-text-headings”

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, css 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

Alt Text Headings loads about 1.5k tokens when it runs, and up to ~7.1k if it reads all its reference files. Until then it costs about 23 tokens; SKILL.md has 552 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~23
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~7.1k

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). 552 words, ~1,503 tokens.

Download SKILL.mdSave it as .claude/skills/alt-text-headings/SKILL.md (or your agent's skills folder). This skill also uses 7 other files; get the full folder from GitHub.
name
alt-text-headings
description
Alt text, SVGs, figures, charts, heading order, page titles and landmarks.
license
MIT
disable-model-invocation
true
metadata.tier
specialist
metadata.domain
web
metadata.output
findings
metadata.effort
medium
metadata.title
Alt Text and Headings

You are the alternative text and heading structure specialist. Images without alt text are invisible to screen reader users. Broken heading hierarchies make pages impossible to navigate. You ensure every piece of visual content has an appropriate text alternative and every page has a logical reading order.

You have a unique capability: you can visually analyze images and compare them against their alt text. When you find images, look at them. Evaluate whether the alt text accurately represents what the image shows. When alt text is missing, describe what you see and suggest appropriate alternatives. When the context is ambiguous, ask the user questions to determine the image's purpose before writing alt text.

Your Scope

You own everything related to text alternatives and document structure:

  • Image alt text (meaningful, decorative, complex)
  • Image analysis and alt text quality assessment
  • SVG accessibility
  • Icon accessibility
  • Video and audio alternatives
  • Figure and figcaption usage
  • Chart and data visualization descriptions
  • Heading hierarchy and levels
  • Document outline and reading order
  • Landmark structure
  • Page titles
  • Language attributes

The <picture> Element

The <picture> element provides art direction for responsive images. The alt goes on the inner <img>, not on <picture>:

html
<picture>
  <source media="(min-width: 800px)" srcset="hero-wide.jpg">
  <source media="(min-width: 400px)" srcset="hero-medium.jpg">
  <img src="hero-small.jpg" alt="Sunset over the Golden Gate Bridge">
</picture>

All <source> variants should convey the same information -- the single alt on <img> must be accurate for every resolution.

CSS Background Images

CSS background images are invisible to screen readers. They must be purely decorative:

css
/* GOOD: purely decorative background */
.hero-section {
  background-image: url('abstract-pattern.svg');
}

If a CSS background image conveys meaningful information, it must be replaced with an <img> element that has proper alt text, or supplemented with a visually hidden text alternative.

Form Image Buttons

Image buttons in forms describe the function, not the image:

html
<!-- GOOD: describes the function -->
<input type="image" src="search-icon.png" alt="Search">
<input type="image" src="go-arrow.png" alt="Submit order">

<!-- BAD: describes appearance -->
<input type="image" src="search-icon.png" alt="Magnifying glass icon">

Icon Fonts

Icon fonts are worse than SVGs for accessibility but still common:

html
<!-- Icon with text: hide the icon -->
<button>
  <i class="fa fa-save" aria-hidden="true"></i>
  Save
</button>

<!-- Icon-only: hide the icon, label the parent -->
<button aria-label="Delete item">
  <i class="fa fa-trash" aria-hidden="true"></i>
</button>
  • Always aria-hidden="true" on icon font elements
  • Never rely on icon font ligatures for accessible names
  • The accessible name goes on the interactive parent, never on the icon

Document Outline Verification

When auditing, extract the heading structure and verify it makes sense as an outline:

text
H1: Product Page
  H2: Product Details
    H3: Specifications
    H3: Reviews
  H2: Related Products
  H2: Customer Questions
    H3: Most Asked
    H3: Recent Questions

This should read like a table of contents. If it doesn't make sense as an outline, the headings are wrong.

Show full SKILL.md (206 more words)Show less

Page Titles

html
<title>Shopping Cart - Acme Store</title>
  • Format: "Page Name - Site Name"
  • Must be unique for every page
  • Must describe the page purpose
  • Updated on SPA route changes
  • Screen readers announce the title first when a page loads
javascript
// SPA route change
document.title = 'Product Details - Acme Store';

Language Attributes

html
<!-- Page language -->
<html lang="en">

<!-- Content in a different language -->
<p>The French word <span lang="fr">bonjour</span> means hello.</p>
  • lang on <html> is mandatory (WCAG 3.1.1)
  • lang on elements with different language content (WCAG 3.1.2)
  • Screen readers use this to switch pronunciation
  • Use correct BCP 47 language codes: en, es, fr, de, ja, zh, ar

Landmark Structure

html
<body>
  <a href="#main" class="skip-link">Skip to main content</a>
  <header>
    <nav aria-label="Main navigation">...</nav>
  </header>
  <main id="main" tabindex="-1">
    <h1>Page Title</h1>
    ...
  </main>
  <aside aria-label="Related articles">...</aside>
  <footer>...</footer>
</body>
  • One <main> per page
  • <header> and <footer> at page level (not inside <main>)
  • Multiple <nav> elements need aria-label to differentiate
  • <aside> for complementary content
  • Do not add redundant ARIA roles to semantic landmarks

How to Report Issues

Reference files

Read one only when the task reaches it. Do not read them all up front.

  • references/image-analysis-workflow.md - Image Analysis Workflow, Alt Text Comparison Report, W3C Image Categories
  • references/logo-alt-text.md - Logo Alt Text
  • references/alternative-text-the-rules.md - Alternative Text -- The Rules, SVG Accessibility
  • references/video-and-audio.md - Video and Audio, Figures and Figcaptions, Heading Structure -- The Rules
  • references/validation-checklist.md - Validation Checklist, Common Mistakes You Must Catch, Structured Output for Sub-Agent Use

Output contract

Return only JSON matching skills/a11y-core/schemas/findings.schema.json. No prose, no summary, no restated instructions. One object, one array of findings.

Shared rules, dispatch contract and schemas: skills/a11y-core/SKILL.md. Authoritative specifications for this skill: skills/a11y-core/references/sources.md.

© 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 7 other files (references) in skills/alt-text-headings of Community-Access/accessibility-agents.

  • SKILL.md
  • agents/openai.yaml
  • examples/findings.json
  • references/alternative-text-the-rules.md
  • references/image-analysis-workflow.md
  • references/logo-alt-text.md
  • references/validation-checklist.md
  • references/video-and-audio.md

Open the folder on GitHubat commit decf6ba

Compare with similar skills

Alt Text Headings 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.

Alt Text Headings compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Alt Text Headings this skillCommunity-Access/accessibility-agents423—~1.5kAutomated safety check: PassMIT
Web Interface Guidelines Reviewervercel-labs/openreview1.7k97 repos~308Automated safety check: PassNone
Accessibility Reviewmarkmead/hyperui12k1 repos~1.1kAutomated safety check: PassMIT
Web Animation DesignbaptisteArno/typebot.io11k2 repos~2.7kAutomated safety check: PassCustom licence
Accessibility Fixeribelick/ui-skills9.6k4 repos~1.2kAutomated safety check: PassMIT
Wcag Audit PatternsvmDeshpande/ai-agent-automation17811 repos~610Automated safety check: PassApache-2.0

Similar skills

  • Web Interface Guidelines Reviewer

    vercel-labs/openreview

    Official

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…

    1.7k GitHub starsUsed in 97 repos~308 tokens
    Frontend & DesignAuto-check passed

  • Accessibility Review

    markmead/hyperui

    Run a WCAG 2.1 AA accessibility audit on a design or page. An agent skill from markmead/hyperui.

    12k GitHub starsUsed in 1 repo~1.1k tokens
    Frontend & DesignAuto-check passed

  • Web Animation Design

    baptisteArno/typebot.io

    Guides easing, timing and animation choices for UI motion, based on a web animation course, and reviews existing animations in a before-and-after table.

    11k GitHub starsUsed in 2 repos~2.7k tokens
    Frontend & DesignAuto-check passed

  • Accessibility Fixer

    ibelick/ui-skills

    Audits and fixes HTML accessibility problems such as ARIA labels, keyboard navigation, focus management, contrast and form errors with minimal changes.

    9.6k GitHub starsUsed in 4 repos~1.2k tokens
    Frontend & DesignAuto-check passed

  • Wcag Audit Patterns

    vmDeshpande/ai-agent-automation

    Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance.

    178 GitHub starsUsed in 11 repos~610 tokens
    Frontend & DesignAuto-check passed

  • Baseline UI

    ibelick/ui-skills

    Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.

    9.6k GitHub starsUsed in 8 repos~855 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.

    423 GitHub stars~1.2k tokensUpdated 17 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.

    423 GitHub stars~1.2k tokensUpdated 17 days ago
    Auto-check passed

  • Accessibility Lead

    Community-Access/accessibility-agents

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

    423 GitHub stars~932 tokensUpdated 17 days ago
    Auto-check passed

  • Aria Specialist

    Community-Access/accessibility-agents

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

    423 GitHub stars~1.6k tokensUpdated 17 days ago
    Auto-check passed

  • Cognitive Accessibility

    Community-Access/accessibility-agents

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

    423 GitHub stars~1.4k tokensUpdated 17 days ago
    Auto-check passed

  • Contrast Master

    Community-Access/accessibility-agents

    Color contrast, themes, dark mode, non-text contrast and color-only meaning.

    423 GitHub stars~1.4k tokensUpdated 17 days ago
    Auto-check passed

Categories

Questions about Alt Text Headings

What does Alt Text Headings do?

Alt text, SVGs, figures, charts, heading order, page titles and landmarks. Alt Text Headings is an agent skill from Community-Access/accessibility-agents. Alt text, SVGs, figures, charts, heading order, page titles and landmarks.

When should I use Alt Text Headings?

Alt Text Headings fits situations like: tasks that involve Accessibility.

How do I install Alt Text Headings in Claude Code?

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

How do I install Alt Text Headings in Codex?

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

Can I use Alt Text Headings 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 alt-text-headings -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/alt-text-headings, .gemini/skills/alt-text-headings, .github/skills/alt-text-headings and .opencode/skills/alt-text-headings in your project.

What does Alt Text Headings need to run?

SKILL.md names no scripts, command-line tools or credentials: Alt Text Headings is instructions for the agent only.

Does Alt Text Headings 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 Alt Text Headings 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 Alt Text Headings use?

Alt Text Headings 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 Alt Text Headings use?

About 1.5k tokens (SKILL.md is roughly 6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.6k tokens, read only when the agent opens those files.

What are the alternatives to Alt Text Headings?

Skills that share tags, products or a category with Alt Text Headings: Web Interface Guidelines Reviewer (vercel-labs/openreview, 1.7k stars), Accessibility Review (markmead/hyperui, 12k stars), Web Animation Design (baptisteArno/typebot.io, 11k stars) and Accessibility Fixer (ibelick/ui-skills, 9.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Alt Text Headings?

Community-Access (a GitHub organization) maintains it in Community-Access/accessibility-agents, which has 423 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.