quickstart.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Install Accessibility Agents 7 in Claude Code, GitHub Copilot, Codex, Gemini CLI or Antigravity and run your first accessibility review.">
  <title>Quick Start — Community Access</title>
  <link rel="icon" href="https://avatars.githubusercontent.com/u/263509777?v=4&s=32" type="image/png">
  <link rel="apple-touch-icon" href="https://avatars.githubusercontent.com/u/263509777?v=4&s=180">
  <meta property="og:title" content="Quick Start — Community Access">
  <meta property="og:description" content="Install Accessibility Agents 7 and run your first accessibility review.">
  <meta property="og:image" content="https://avatars.githubusercontent.com/u/263509777?v=4&s=400">
  <meta property="og:url" content="https://community-access.github.io/quickstart.html">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:wght@400;700&family=Atkinson+Hyperlegible+Next:wght@400;700;800&display=swap">
  <link rel="stylesheet" href="styles.css">
  <link rel="alternate" type="application/rss+xml" title="Community Access RSS Feed" href="https://community-access.org/feed.xml">
  <style>
    .page-hero {
      background: linear-gradient(160deg, var(--ca-indigo-dark) 0%, var(--ca-violet) 50%, var(--ca-indigo) 100%);
      color: var(--ca-gray-50);
      padding: 5rem 0 4rem;
      text-align: center;
    }
    .page-hero h1 {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      margin-bottom: 1rem;
    }
    .page-hero p {
      font-size: clamp(1.05rem, 2vw, 1.25rem);
      max-width: 40rem;
      margin: 0 auto;
      opacity: 0.92;
      line-height: 1.7;
    }
    .quickstart-content {
      padding: 4rem 0 5rem;
      max-width: 48rem;
      margin: 0 auto;
    }
    .quickstart-content h2 {
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--ca-gray-900);
      margin: 3rem 0 1rem;
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    .quickstart-content h2:first-child { margin-top: 0; }
    .step-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.25rem;
      height: 2.25rem;
      background: linear-gradient(135deg, var(--ca-indigo) 0%, var(--ca-violet) 100%);
      color: #fff;
      border-radius: 50%;
      font-size: 1rem;
      font-weight: 800;
      flex-shrink: 0;
    }
    .quickstart-content p, .quickstart-content li {
      font-size: 1.05rem;
      color: var(--ca-gray-700);
      line-height: 1.8;
    }
    .quickstart-content p {
      margin-bottom: 1rem;
    }
    .quickstart-content ul {
      margin: 0.5rem 0 1.5rem 1.5rem;
    }
    .quickstart-content li {
      margin-bottom: 0.35rem;
    }
    .quickstart-content a {
      color: var(--ca-indigo-light);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .quickstart-content a:hover { text-decoration-thickness: 2px; }
    .quickstart-content code {
      font-family: var(--font-mono);
      font-size: 0.9em;
      background: var(--ca-gray-100);
      padding: 0.15em 0.4em;
      border-radius: 4px;
      color: var(--ca-gray-800);
    }
    .qs-install-block {
      background: var(--ca-gray-900);
      border-radius: 12px;
      padding: 1.5rem 2rem;
      margin: 1rem 0 1.5rem;
      overflow-x: auto;
      position: relative;
    }
    @media (prefers-color-scheme: dark) {
      .qs-install-block { background: #0f172a; border: 1px solid var(--ca-gray-200); }
    }
    .qs-install-label {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--ca-emerald-light);
      font-weight: 600;
      margin-bottom: 0.5rem;
    }
    .qs-install-block code {
      font-family: var(--font-mono);
      font-size: 0.95rem;
      color: #f9fafb;
      white-space: pre-wrap;
      word-break: break-all;
      display: block;
      background: none;
      padding: 0;
    }
    .qs-example {
      background: var(--ca-gray-50);
      border: 1px solid var(--ca-gray-200);
      border-radius: 12px;
      padding: 1.5rem 2rem;
      margin: 1.5rem 0;
    }
    .qs-example-label {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--ca-indigo-light);
      font-weight: 700;
      margin-bottom: 0.75rem;
    }
    .qs-example p {
      font-size: 0.95rem;
      margin-bottom: 0.5rem;
    }
    .qs-example code {
      font-size: 0.85em;
    }
    .qs-platforms {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
      gap: 1rem;
      margin: 1.5rem 0;
    }
    .qs-platform {
      background: var(--ca-gray-50);
      border: 1px solid var(--ca-gray-200);
      border-radius: 10px;
      padding: 1rem 1.25rem;
      text-align: center;
    }
    .qs-platform strong {
      display: block;
      font-size: 1rem;
      color: var(--ca-gray-900);
      margin-bottom: 0.25rem;
    }
    .qs-platform span {
      font-size: 0.85rem;
      color: var(--ca-gray-700);
    }
    .qs-next {
      background: linear-gradient(135deg, var(--ca-indigo-dark), var(--ca-violet));
      border-radius: 16px;
      padding: 2rem;
      color: var(--ca-gray-50);
      margin-top: 2rem;
    }
    .qs-next h3 {
      font-size: 1.25rem;
      font-weight: 800;
      margin-bottom: 1rem;
    }
    .qs-next ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .qs-next li {
      color: #c4cad3;
      margin-bottom: 0.5rem;
    }
    .qs-next a {
      color: var(--ca-emerald-light);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr;
      gap: 2rem;
      padding-bottom: 2rem;
      border-bottom: 1px solid rgba(255,255,255,0.1);
      margin-bottom: 1.5rem;
    }
    @media (max-width: 48rem) {
      .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    }
    .footer-logo {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--ca-gray-50);
    }
    .footer-tagline {
      color: #9ca3af;
      font-size: 0.9rem;
      margin-top: 0.25rem;
    }
    .footer-column h3 {
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.7);
      margin-bottom: 0.75rem;
    }
    .footer-column .footer-links { list-style: none; }
    .footer-column .footer-links li { margin-bottom: 0.4rem; }
    .footer-column .footer-links a {
      color: #9ca3af;
      text-decoration: none;
      font-size: 0.9rem;
      transition: color var(--transition);
    }
    .footer-column .footer-links a:hover { color: var(--ca-emerald-light); }
    .qs-install-block code { white-space: pre-wrap; word-break: normal; overflow-wrap: anywhere; }
    .qs-caveat { margin-top: 2rem; color: var(--ca-gray-700); }
  </style>
  <link rel="stylesheet" href="site-chrome.css">
</head>
<body>

<a href="#main" class="skip-link">Skip to main content</a>

<header class="site-header">
  <div class="container header-inner">
    <a href="index.html" class="logo" aria-label="Community Access home">
      <img class="logo-mark" src="https://avatars.githubusercontent.com/u/263509777?v=4&s=80" alt="" width="40" height="40" loading="eager">
      <span class="logo-text">Community Access</span>
    </a>
    <nav class="header-nav" aria-label="Main navigation">
      <ul>
        <li><a href="index.html#projects">Projects</a></li>
        <li class="nav-dropdown">
          <button class="nav-dropdown-toggle" type="button" aria-expanded="false">Accessibility Agents</button>
          <ul class="nav-dropdown-menu">
            <li><a href="start.html">Start here</a></li>
            <li><a href="index.html#whats-new">What&rsquo;s new in 7</a></li>
            <li><a href="index.html#install">Install</a></li>
            <li><a href="quickstart.html" aria-current="page">Quick start</a></li>
            <li><a href="docs.html">Documentation</a></li>
          </ul>
        </li>
        <li><a href="news.html">News</a></li>
        <li><a href="repos.html">Repositories</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="https://community-access.org/git-going-with-github/" class="nav-workshop-link">Workshop</a></li>
        <li><a href="https://github.com/Community-Access">GitHub</a></li>
      </ul>
    </nav>
    <button class="theme-toggle" type="button" aria-label="Switch to dark mode">
      <span class="icon-sun" aria-hidden="true">&#9728;&#65039;</span>
      <span class="icon-moon" aria-hidden="true">&#9790;&#65039;</span>
    </button>
  </div>
</header>

<main id="main">

<section class="page-hero">
  <div class="container">
    <h1>Quick Start</h1>
    <p>From install to your first accessibility review in a few minutes, in the AI coding tool you already use. New to all of this? <a href="start.html">Start here</a>.</p>
  </div>
</section>

<div class="container">
  <div class="quickstart-content">

    <h2><span class="step-badge" aria-hidden="true">1</span> Install Accessibility Agents</h2>
    <p>Install it as a plugin. That brings the skills, the edit gate (on clients that support hooks) and the MCP server in one step. You need Node.js 22 or later.</p>

    <div class="qs-install-block">
      <div class="qs-install-label">Claude Code, in a session</div>
      <code>/plugin marketplace add Community-Access/accessibility-agents
/plugin install accessibility-agents@community-access</code>
    </div>
    <div class="qs-install-block">
      <div class="qs-install-label">GitHub Copilot CLI</div>
      <code>copilot plugin marketplace add Community-Access/accessibility-agents
copilot plugin install accessibility-agents@community-access</code>
    </div>
    <div class="qs-install-block">
      <div class="qs-install-label">Gemini CLI</div>
      <code>gemini extensions install https://github.com/Community-Access/accessibility-agents</code>
    </div>

    <p>For VS Code, Codex, Antigravity or the MCP server on its own, see <a href="index.html#install">every install option</a>.</p>

    <h2><span class="step-badge" aria-hidden="true">2</span> Describe what you are working on</h2>
    <p>You do not need to name a skill. Say what you want in plain words, and one of six entry points routes it to the right specialists:</p>
    <ul>
      <li><strong>&ldquo;Review this modal for accessibility&rdquo;</strong>: <code>accessibility-lead</code> picks the modal, keyboard and ARIA specialists, runs them, and tells you whether it ships.</li>
      <li><strong>&ldquo;Audit the whole site&rdquo;</strong>: <code>web-accessibility-wizard</code> asks four questions, runs every domain and writes <code>WEB-ACCESSIBILITY-AUDIT.md</code>.</li>
      <li><strong>&ldquo;Check these PDFs&rdquo;</strong>: <code>document-accessibility-wizard</code> scans each file and writes a scored report.</li>
      <li><strong>&ldquo;Fix the markdown in docs/&rdquo;</strong>: <code>markdown-a11y-assistant</code> shows you the fixes it wants to make, and waits for you.</li>
    </ul>
    <p>You can also call a skill by name: <code>/accessibility-lead</code> in Claude Code, Copilot and VS Code, or <code>$accessibility-lead</code> in Codex. Specialists such as <code>/aria-specialist</code> and <code>/contrast-master</code> are in the slash menu too.</p>

    <h2><span class="step-badge" aria-hidden="true">3</span> Meet the edit gate</h2>
    <p>Once installed, an edit to a user-facing file (HTML, JSX, Vue, Svelte, CSS, templates) is refused until <code>accessibility-lead</code> has finished its review in the session. That refusal is the point, not a fault: let the review run, then the edit goes through. Build output, tests, stories and dependencies are exempt.</p>

    <h2><span class="step-badge" aria-hidden="true">4</span> Read the report</h2>
    <p>Every audit report has the same seven sections, written by a script from the specialists&rsquo; findings rather than typed by the model: what was audited, a score out of 100 with a grade, the severity breakdown, each finding with its WCAG criterion, location and fix, remediation priorities, next steps, and what changed since the last report.</p>

    <div class="qs-next">
      <h3>What&rsquo;s next?</h3>
      <ul>
        <li><a href="docs.html">Documentation</a>: the skills catalog, MCP tools, scanning guides and configuration</li>
        <li><a href="news.html#post/accessibility-agents-7-release">What&rsquo;s new in Accessibility Agents 7</a></li>
        <li><a href="https://github.com/Community-Access/accessibility-agents/blob/main/CONTRIBUTING.md">Contribute</a>: improve a skill, add a source, or report a gap</li>
        <li><a href="https://github.com/Community-Access/accessibility-agents/issues">Report a bug or a barrier</a></li>
      </ul>
    </div>

    <p class="qs-caveat">Automated review is a first pass, not a verdict. Test with NVDA, JAWS, VoiceOver, TalkBack and a keyboard before you ship.</p>

  </div>
</div>

</main>

<footer class="site-footer">
  <div class="container">
    <div class="footer-grid">
      <div class="footer-brand">
        <span class="footer-logo">Community Access</span>
        <p class="footer-tagline">Accessible by default. Open source, led by blind and low vision developers.</p>
      </div>
      <nav class="footer-column" aria-labelledby="footer-projects">
        <h2 id="footer-projects">Projects</h2>
        <ul class="footer-links">
          <li><a href="https://github.com/Community-Access/accessibility-agents">Accessibility Agents</a></li>
          <li><a href="https://quillforall.org/">QUILL for All</a></li>
          <li><a href="https://letitglow.app/">GLOW</a></li>
          <li><a href="https://community-access.org/git-going-with-github/">GIT Going with GitHub</a></li>
          <li><a href="https://github.com/open-source-accessibility/Open-Source-Accessibility-Framework/issues/52">Open Source Accessibility Framework</a></li>
          <li><a href="repos.html">All repositories</a></li>
        </ul>
      </nav>
      <nav class="footer-column" aria-labelledby="footer-site">
        <h2 id="footer-site">This site</h2>
        <ul class="footer-links">
          <li><a href="start.html">Start here</a></li>
          <li><a href="quickstart.html">Quick start</a></li>
          <li><a href="docs.html">Documentation</a></li>
          <li><a href="news.html">News</a></li>
          <li><a href="blog.html">Blog</a></li>
          <li><a href="feed.xml">RSS feed</a></li>
          <li><a href="extensions.html">Extensions (version 6)</a></li>
        </ul>
      </nav>
      <nav class="footer-column" aria-labelledby="footer-community">
        <h2 id="footer-community">Community</h2>
        <ul class="footer-links">
          <li><a href="about.html">About</a></li>
          <li><a href="accessibility.html">Accessibility statement</a></li>
          <li><a href="https://github.com/Community-Access/accessibility-agents/blob/main/CONTRIBUTING.md">Contribute</a></li>
          <li><a href="https://github.com/Community-Access/accessibility-agents/blob/main/CODE_OF_CONDUCT.md">Code of conduct</a></li>
          <li><a href="mailto:support@community-access.org">support@community-access.org</a></li>
        </ul>
      </nav>
    </div>
    <div class="a11y-statement">
      <p>This site aims to meet WCAG 2.2 Level AA. <a href="accessibility.html">Read the accessibility statement</a> or <a href="https://github.com/Community-Access/community-access.github.io/issues/new">report a barrier</a>.</p>
    </div>
    <p class="footer-copy">A community project. Code under the MIT License.</p>
  </div>
</footer>

<script src="main.js"></script>

</body>
</html>