a11y-cat-extension/index.html at main · CarlasHub/a11y-cat-extension · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A11Y Cat Extension - Chrome accessibility review support</title>
  <meta name="description" content="Public documentation, privacy information, support guidance, and internal Chrome status information for A11Y Cat Extension.">
  <link rel="canonical" href="https://carlashub.github.io/a11y-cat-extension/">
  <link rel="icon" type="image/png" media="(prefers-color-scheme: dark)" href="assets/img/favicon-dark-32.png">
  <link rel="icon" href="assets/img/favicon-dark-32.png">
  <link rel="stylesheet" href="assets/docs-site.css">
</head>
<body>
  <a class="skip-link" href="#main">Skip to main content</a>
  <header class="site-header">
    <a class="brand" href="index.html" aria-label="A11Y Cat Extension documentation home"><img src="assets/img/cat-outline-white.png" alt="" width="40" height="40"> <span>A11Y Cat Extension</span></a>
    <nav class="top-nav" aria-label="Primary documentation navigation">
      <ul>
        <li><a href="index.html" aria-current="page">Overview</a></li>
        <li><a href="docs/installation.html">Install</a></li>
        <li><a href="docs/understanding-results.html">Results</a></li>
        <li><a href="docs/ui-feature-guide.html">Feature guide</a></li>
        <li><a href="docs/privacy-local-data.html">Privacy</a></li>
        <li><a href="docs/limitations.html">Limitations</a></li>
        <li><a href="docs/support.html">Support</a></li>
        <li><a href="docs/chrome-store-submission.html">Chrome status</a></li>
        <li><a href="https://github.com/CarlasHub/a11y-cat-extension" target="_blank" rel="noopener noreferrer" aria-label="GitHub repository (opens in a new tab)">GitHub</a></li>
      </ul>
    </nav>
  </header>

  <main id="main" class="home-main" tabindex="-1">
    <section class="hero technical-hero hero-with-media" aria-labelledby="home-title">
      <div>
        <p class="eyebrow">Internal Chrome documentation</p>
        <h1 id="home-title">A11Y Cat Extension</h1>
        <p class="lead">A local-first Chrome extension approved for internal Chrome use. It runs packaged checks after a toolbar action, separates confirmed issues from review evidence, and exports handoff-ready QA reports.</p>
        <div class="status-row" aria-label="Implementation summary">
          <span class="status-pill status-pill--success">Manifest V3</span>
          <span class="status-pill status-pill--success">No host permissions</span>
          <span class="status-pill status-pill--success">Packaged runtime</span>
          <span class="status-pill status-pill--warning">Manual review still required</span>
        </div>
        <div class="hero-actions">
          <a class="button primary" href="docs/installation.html">Install internally</a>
          <a class="button secondary" href="docs/ui-feature-guide.html">Browse features</a>
          <a class="button secondary" href="docs/chrome-store-submission.html">Chrome status</a>
        </div>
        <p class="status-note">Approved for internal Chrome use. Do not publish or externally share the internal install link. Automated and guided output supports human review; it does not certify WCAG conformance or replace manual accessibility testing.</p>
      </div>
      <figure class="hero-visual">
        <img src="assets/extension/current/panel-scan-results.png" alt="A11Y Cat Extension panel body with Scan Results open." width="980" height="940">
        <figcaption>Current build screenshot: Scan Results with confirmed issues, review state, filters, and coverage gaps.</figcaption>
      </figure>
    </section>

    <section class="section-panel" aria-labelledby="quick-access"><h2 id="quick-access">Quick access</h2><div class="guide-entry-grid compact-entry-grid"><a href="docs/installation.html"><strong>Install and test</strong><span>Use the internal Chrome access route or local package, run a smoke scan, and check browser support boundaries.</span></a><a href="docs/understanding-results.html"><strong>Understand results</strong><span>Confirmed issues, needs-review evidence, advisory signals, limitations, and diagnostics.</span></a><a href="docs/privacy-local-data.html"><strong>Privacy and local data</strong><span>What is processed locally, what is stored, what is exported, and what is not transmitted.</span></a><a href="docs/support.html"><strong>Support</strong><span>How to report issues with safe evidence and without exposing sensitive page data.</span></a></div></section>

    <section class="section-panel" aria-labelledby="feature-tour"><h2 id="feature-tour">Current extension surfaces</h2><p>The video below shows current extension-panel surfaces only. It is a documentation aid, not a claim about any specific website.</p><figure class="media-card feature-video-card"><video controls preload="metadata" playsinline poster="assets/img/video-poster-dark.png" width="1280" height="720" aria-describedby="feature-video-caption"><source src="assets/video/a11y-cat-extension-video.mp4" type="video/mp4">Your browser does not support embedded video. <a href="assets/video/a11y-cat-extension-video.mp4">Open the A11Y Cat Extension video</a>.</video><figcaption id="feature-video-caption">Extension workflow video with native playback controls. Playback starts only when the user presses play.</figcaption></figure></section>

    <section class="section-panel" aria-labelledby="feature-coverage"><h2 id="feature-coverage">Feature coverage</h2><div class="feature-matrix"><article><h3>Scan Results</h3><p>Runs current-page checks, groups confirmed issues separately from review items, exposes filters, issue details, highlight actions, and export controls.</p><a href="assets/extension/current/panel-scan-results.png">View screenshot</a></article><article><h3>Metadata Check</h3><p>Reviews title, description, canonical URL, Open Graph, Twitter card, schema, and title/H1 alignment as review evidence where appropriate.</p><a href="assets/extension/current/metadata-check.png">View screenshot</a></article><article><h3>Headings</h3><p>Checks semantic headings, visible H1 structure, skipped levels, ARIA headings, hidden headings, and visual heading-like text without markup.</p><a href="assets/extension/current/heading-structure.png">View screenshot</a></article><article><h3>Alt Text Analysis</h3><p>Separates deterministic image failures from context-dependent review for decorative, linked, SVG/icon, complex, redundant, and background-image cases.</p><a href="assets/extension/current/alt-text-analysis.png">View screenshot</a></article><article><h3>Language and Links</h3><p>Provides language mismatch review and same-origin broken-link evidence while labelling incomplete or blocked checks as limitations.</p><a href="assets/extension/current/language-mismatch.png">View language screenshot</a><a href="assets/extension/current/broken-links.png">View link-check screenshot</a></article><article><h3>Browser Preference QA</h3><p>Supports zoom, text spacing, font size, reduced motion, colour scheme, forced colours, and contrast-preference review as manual QA evidence.</p><a href="assets/extension/current/browser-preference-controls.png">View screenshot</a></article><article><h3>Screen Reader Review</h3><p>Uses bundled Guidepup virtual screen-reader support and browser TTS playback where available. It is review evidence, not real AT validation.</p><a href="assets/extension/current/screen-reader-review.png">View screenshot</a></article><article><h3>History, comparison, and exports</h3><p>Stores local scan history, supports comparison and workflow notes, and creates user-controlled CSV, JSON, diagnostics, and HTML QA report exports.</p><a href="docs/understanding-results.html">Read result model</a></article></div></section>

    <section class="section-panel" aria-labelledby="implementation"><h2 id="implementation">Technical implementation</h2><div class="technical-list"><article><h3>Extension model</h3><p>Manifest V3 package with a background service worker, packaged content runtime, local vendor dependencies, toolbar action, and keyboard command.</p></article><article><h3>Page access</h3><p>The extension uses <code>activeTab</code> and <code>scripting</code> after user action. It does not declare broad host permissions in the release manifest.</p></article><article><h3>Local processing</h3><p>Runtime checks execute in the browser against the active rendered page. The packaged build includes local axe-core and virtual screen-reader browser support.</p></article><article><h3>Local storage</h3><p><code>chrome.storage.local</code> stores settings, scan history, archive state, workflow notes, performance history, and virtual review state on the browser profile.</p></article><article><h3>Debugger-backed features</h3><p><code>debugger</code> is used for desktop/mobile emulation and selected browser preference media emulation. Core scanning still needs user-triggered page access.</p></article><article><h3>Evidence boundary</h3><p>Confirmed, review, advisory, limitation, and diagnostic outputs stay separate. Virtual screen-reader output is never presented as proof from NVDA, JAWS, VoiceOver, TalkBack, or Narrator.</p></article></div></section>

    <section class="section-panel" aria-labelledby="documentation-entry-points"><h2 id="documentation-entry-points">Documentation map</h2><div class="guide-entry-grid"><a href="docs/how-it-works.html"><strong>How it works</strong><span>Toolbar click, activeTab access, packaged runtime, local checks, classification, storage, and exports.</span></a><a href="docs/scanner-tools.html"><strong>Scanner tools</strong><span>Module inventory, evidence sources, output categories, and known boundaries.</span></a><a href="docs/ui-feature-guide.html"><strong>Feature guide</strong><span>Visible workflows, controls, evidence values, and release limitations.</span></a><a href="docs/privacy-local-data.html"><strong>Privacy and local data</strong><span>Local-first processing, browser storage, exports, clearing controls, and privacy boundaries.</span></a><a href="docs/limitations.html"><strong>Known limitations</strong><span>What the extension cannot inspect, prove, or certify without additional human review.</span></a><a href="docs/chrome-store-submission.html"><strong>Internal Chrome status</strong><span>Internal-use approval boundary, privacy answers, permission justifications, and screenshot asset status.</span></a></div></section>

    <section class="section-panel" aria-labelledby="result-classification-at-a-glance"><h2 id="result-classification-at-a-glance">Result classification</h2><div class="table-scroll"><table><thead><tr><th scope="col">Classification</th><th scope="col">Meaning</th><th scope="col">Primary action</th></tr></thead><tbody><tr><th scope="row">Confirmed issue</th><td data-label="Meaning">High-confidence issue evidence for the current rendered state, usually from axe-core or strict A11Y Cat checks that pass reliability gates.</td><td data-label="Primary action">Remediate, retest, and confirm user impact in context.</td></tr><tr><th scope="row">Needs review</th><td data-label="Meaning">Evidence that needs human judgement, visual inspection, interaction, or assistive technology testing before it becomes a defect.</td><td data-label="Primary action">Inspect manually and record the decision before reporting it as a failure.</td></tr><tr><th scope="row">Advisory</th><td data-label="Meaning">Helpful quality, metadata, language, spelling, or review-readiness signal.</td><td data-label="Primary action">Use as guidance. Do not count it as a definite WCAG failure.</td></tr><tr><th scope="row">Limitation</th><td data-label="Meaning">A known boundary of what the extension could not inspect, calculate, or prove.</td><td data-label="Primary action">Use another method for the uncovered state and avoid coverage overclaims.</td></tr><tr><th scope="row">Diagnostic</th><td data-label="Meaning">Technical support information about permissions, injection, storage, runtime, exports, or scan coverage.</td><td data-label="Primary action">Use for troubleshooting and traceability. Do not treat it as a page failure.</td></tr></tbody></table></div></section>

    <section class="callout boundary" aria-labelledby="release-boundary"><h2 id="release-boundary">Release boundary</h2><p>A11Y Cat Extension is approved for internal Chrome use. It supports accessibility review and remediation workflows; it does not certify production readiness, prove WCAG conformance, detect every issue, or replace manual accessibility and assistive technology testing.</p></section>
  </main>
  <footer class="site-footer"><p>A11Y Cat Extension is documented as a local-first internal Chrome accessibility inspection extension. Automated and guided review outputs support human review; they do not prove WCAG conformance.</p><p><a href="docs/privacy-local-data.html">Privacy and local data</a> <span aria-hidden="true">|</span> <a href="docs/limitations.html">Known limitations</a> <span aria-hidden="true">|</span> <a href="docs/support.html">Support</a> <span aria-hidden="true">|</span> <a href="docs/chrome-store-submission.html">Chrome status</a></p><p class="footer-credit">Made with ☕ by <a href="https://www.linkedin.com/in/carla-goncalves-9a01a5164/" target="_blank" rel="noopener noreferrer">Carla Goncalves</a>.</p></footer>
</body>
</html>