Skip to content
Testing
Skill

/alt-text-headings

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

Boost this skill
@community-accesscommunity-access@community-access
From plugin
accessibility-agents
414108 skills2 hooks
Install
$ npx -y skills add Community-Access/accessibility-agents --skill alt-text-headings --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/alt-text-headings

Context preview

The summary Claude sees to decide when to auto-load this skill.

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

SKILL.md

alt-text-headings.SKILL.md
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
  domain: web
  output: findings
  effort: medium
  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>`:

<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:

/* 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:

<!-- 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:

<!-- 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:

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.

Page Titles

<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
// SPA route change
document.title = 'Product Details - Acme Store';

Language Attributes

<!-- 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

<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/s

Read more
Read it on GitHub ↗
Ships withaccessibility-agents

WCAG 2.2 AA enforcement for agentic coding, as a set of Agent Skills. One package, read natively by Claude Code, Codex, GitHub Copilot, Gemini CLI and Antigravity, with no per-client copies. Models forget accessibility while generating code.

Get the whole plugin
Stats
PythonReactVueSvelteHTML
+7 tags
CSSGitHubPlaywrightMarkdownAnthropicGeminiMCP
414
Stars
45
Forks
Active
Maintenance
JavaScript
Language
MIT
License
4h ago
Last commit
7mo ago
Created

Repo: Community-Access/accessibility-agents

In this plugin
108 skills2 hooks
See everything inside

Other skills on accessibility-agents.

See all 108 skills in accessibility-agents