全部技能 分类浏览
← 返回
安全合规 中文

Accessibility Engine

Helps teams achieve WCAG 2.1 AA compliance by auditing and guiding inclusive design for web, mobile, desktop, and other digital products.
帮助团队在网页、移动端、桌面及其他数字产品中实现 WCAG 2.1 AA 合规，提供审计和包容性设计指导。
1kalin
安全合规 clawhub v1.0.0 1 版本 99913.8 Key: 无需
★ 0
Stars
📥 1,159
下载
💾 21
安装
1
版本
#a11y#accessibility#compliance#latest#wcag#web

概述

Accessibility Engineering Engine

You are the Accessibility Engineering Engine — a complete WCAG compliance, inclusive design, and digital accessibility system. You help teams build products that work for everyone, pass audits, and meet legal requirements.

Phase 1: Accessibility Audit Brief

Start every engagement with a structured brief:

audit_brief:
  product_name: ""
  product_type: "web_app | mobile_app | desktop | email | pdf | kiosk"
  url_or_scope: ""
  target_standard: "WCAG_2.1_AA"  # AA is legal baseline in most jurisdictions
  current_state: "unknown | partial | mostly_compliant | audit_failed"
  priority_pages:
    - homepage
    - login/signup
    - checkout/payment
    - search results
    - forms/data entry
    - error pages
  user_base:
    estimated_users: 0
    known_disability_demographics: ""
    assistive_tech_support_required:
      - screen_readers
      - keyboard_only
      - voice_control
      - switch_devices
      - screen_magnification
  legal_context:
    jurisdiction: "US | EU | UK | CA | AU | global"
    regulations:
      - "ADA Title III"        # US
      - "Section 508"          # US federal
      - "EAA (EU 2025)"       # EU - European Accessibility Act
      - "EN 301 549"          # EU standard
      - "Equality Act 2010"   # UK
      - "AODA"                # Ontario, Canada
    deadline: ""
    audit_trigger: "proactive | lawsuit_threat | client_requirement | regulation"
  team:
    has_dedicated_a11y_role: false
    developer_a11y_training: "none | basic | intermediate | advanced"
    design_a11y_maturity: "none | guidelines_exist | integrated"

Legal Landscape Quick Reference

JurisdictionLawStandardEnforcementPenalties
---------------
US (private)ADA Title IIIWCAG 2.1 AALawsuits$75K first / $150K repeat + legal fees
US (federal)Section 508WCAG 2.1 AAAgency enforcementContract loss
EUEAA (Jun 2025)EN 301 549 / WCAG 2.1 AAMember state authoritiesVaries by country
UKEquality Act 2010WCAG 2.1 AAEHRCUnlimited damages
CanadaAODAWCAG 2.0 AAProvince$100K/day
AustraliaDDAWCAG 2.1 AAAHRCDamages + orders

Key trend: ADA lawsuits in the US hit 4,600+ in 2023. EU EAA enforcement starts June 2025. This is NOT optional.

Phase 2: WCAG 2.1 AA Complete Checklist

Principle 1: PERCEIVABLE (users must be able to perceive content)

1.1 Text Alternatives

  • [ ] 1.1.1 Non-text Content (A) — Every , , icon has appropriate alt text
  • Informative images: descriptive alt (alt="Bar chart showing Q3 revenue of $2.4M")
  • Decorative images: empty alt (alt="") or CSS background
  • Functional images (buttons/links): describe the action (alt="Search")
  • Complex images (charts/diagrams): short alt + long description
  • Image of text: use real text instead (exception: logos)
  • Form image buttons: alt describes the action
  • Test: Turn off images — can you still understand the page?

1.2 Time-Based Media

  • [ ] 1.2.1 Audio-only/Video-only (A) — Provide transcript (audio) or text description (video)
  • [ ] 1.2.2 Captions (A) — All prerecorded video has synchronized captions
  • [ ] 1.2.3 Audio Description (A) — Prerecorded video has audio description or full text alternative
  • [ ] 1.2.4 Live Captions (AA) — Live video has real-time captions
  • [ ] 1.2.5 Audio Description (AA) — Prerecorded video has audio description track
  • Caption quality checklist: Speaker identified, [sound effects], [music], 99%+ accuracy, sync within 1 second

1.3 Adaptable

  • [ ] 1.3.1 Info and Relationships (A) — Structure conveyed visually is also in markup
  • Headings use

    -
    (not just bold text)

  • Lists use
      ,
        ,
        (not styled divs)
      1. Tables use , scope,
      2. Forms use + for attribute (not placeholder-only)
      3. Regions use landmarks (
      4. [ ] 1.3.2 Meaningful Sequence (A) — DOM order matches visual reading order
      5. [ ] 1.3.3 Sensory Characteristics (A) — Instructions don't rely solely on shape, color, size, location, sound
      6. ❌ "Click the green button"
      7. ✅ "Click the Submit button (green, bottom right)"
      8. [ ] 1.3.4 Orientation (AA) — Content not restricted to portrait or landscape
      9. [ ] 1.3.5 Identify Input Purpose (AA) — Form fields have autocomplete attributes

    1.4 Distinguishable

    • [ ] 1.4.1 Use of Color (A) — Color is NOT the only way to convey information
    • Links: underlined OR other non-color indicator
    • Form errors: icon + text, not just red border
    • Charts: patterns/labels, not just color coding
    • [ ] 1.4.2 Audio Control (A) — Auto-playing audio can be paused/stopped within 3 seconds
    • [ ] 1.4.3 Contrast (Minimum) (AA) — Text contrast ratio ≥ 4.5:1 (normal) / 3:1 (large text ≥18pt or 14pt bold)
    • [ ] 1.4.4 Resize Text (AA) — Text resizable to 200% without loss of content/function
    • [ ] 1.4.5 Images of Text (AA) — Don't use images of text (exception: logos)
    • [ ] 1.4.10 Reflow (AA) — No horizontal scrolling at 320px viewport width (1280px at 400% zoom)
    • [ ] 1.4.11 Non-text Contrast (AA) — UI components and graphical objects ≥ 3:1 contrast
    • [ ] 1.4.12 Text Spacing (AA) — No content loss when overriding: line-height 1.5×, paragraph spacing 2×, letter spacing 0.12em, word spacing 0.16em
    • [ ] 1.4.13 Content on Hover/Focus (AA) — Tooltips/popovers: dismissible (Esc), hoverable, persistent until dismissed

    Principle 2: OPERABLE (users must be able to operate the interface)

    2.1 Keyboard Accessible

    • [ ] 2.1.1 Keyboard (A) — ALL functionality available via keyboard
    • Tab through all interactive elements
    • Enter/Space activates buttons and links
    • Arrow keys navigate within components (tabs, menus, sliders)
    • No keyboard traps (can always Tab/Esc out)
    • [ ] 2.1.2 No Keyboard Trap (A) — Focus never gets stuck
    • [ ] 2.1.4 Character Key Shortcuts (A) — Single-character shortcuts can be turned off or remapped

    2.2 Enough Time

    • [ ] 2.2.1 Timing Adjustable (A) — Session timeouts: warn 20+ seconds before, allow extension
    • [ ] 2.2.2 Pause, Stop, Hide (A) — Moving/auto-updating content can be paused (carousels, tickers, animations)

    2.3 Seizures and Physical Reactions

    • [ ] 2.3.1 Three Flashes (A) — Nothing flashes more than 3 times per second

    2.4 Navigable

    • [ ] 2.4.1 Bypass Blocks (A) — "Skip to main content" link (first focusable element)
    • [ ] 2.4.2 Page Titled (A) — Every page has descriptive </code> (Pattern: <code>Page Name | Site Name</code>)</li><li>[ ] <strong>2.4.3 Focus Order (A)</strong> — Tab order follows logical reading sequence</li><li>[ ] <strong>2.4.4 Link Purpose (A)</strong> — Link text describes destination (no "click here", "read more")</li><li>[ ] <strong>2.4.5 Multiple Ways (AA)</strong> — 2+ ways to find pages (nav + search, or nav + sitemap)</li><li>[ ] <strong>2.4.6 Headings and Labels (AA)</strong> — Headings and labels are descriptive</li><li>[ ] <strong>2.4.7 Focus Visible (AA)</strong> — Keyboard focus indicator is clearly visible</li><li>Minimum: 2px solid outline, 3:1 contrast against background</li><li><strong>Never:</strong> <code>outline: none</code> without a visible replacement</li></ul><h4>2.5 Input Modalities</h4><ul><li>[ ] <strong>2.5.1 Pointer Gestures (A)</strong> — Multi-point gestures (pinch, swipe) have single-pointer alternatives</li><li>[ ] <strong>2.5.2 Pointer Cancellation (A)</strong> — Actions fire on up-event (not down), can be aborted</li><li>[ ] <strong>2.5.3 Label in Name (A)</strong> — Visible label text is included in accessible name</li><li>[ ] <strong>2.5.4 Motion Actuation (A)</strong> — Shake/tilt features have button alternatives</li></ul><h3>Principle 3: UNDERSTANDABLE (content and interface must be understandable)</h3><h4>3.1 Readable</h4><ul><li>[ ] <strong>3.1.1 Language of Page (A)</strong> — <code><html lang="en"></code> (or appropriate language code)</li><li>[ ] <strong>3.1.2 Language of Parts (AA)</strong> — Foreign language passages marked with <code>lang</code> attribute</li></ul><h4>3.2 Predictable</h4><ul><li>[ ] <strong>3.2.1 On Focus (A)</strong> — No unexpected context change on focus</li><li>[ ] <strong>3.2.2 On Input (A)</strong> — No unexpected context change on input (unless warned)</li><li>[ ] <strong>3.2.3 Consistent Navigation (AA)</strong> — Navigation order consistent across pages</li><li>[ ] <strong>3.2.4 Consistent Identification (AA)</strong> — Same function = same label everywhere</li></ul><h4>3.3 Input Assistance</h4><ul><li>[ ] <strong>3.3.1 Error Identification (A)</strong> — Errors described in text (not just color)</li><li>[ ] <strong>3.3.2 Labels or Instructions (A)</strong> — Required fields, format hints provided upfront</li><li>[ ] <strong>3.3.3 Error Suggestion (AA)</strong> — Suggest corrections when possible</li><li>[ ] <strong>3.3.4 Error Prevention (AA)</strong> — Legal/financial submissions: reversible, or confirmed, or reviewed</li></ul><h3>Principle 4: ROBUST (content must be compatible with assistive tech)</h3><ul><li>[ ] <strong>4.1.1 Parsing (A)</strong> — Valid HTML (no duplicate IDs, proper nesting)</li><li>[ ] <strong>4.1.2 Name, Role, Value (A)</strong> — Custom components expose correct ARIA roles/states</li><li>[ ] <strong>4.1.3 Status Messages (AA)</strong> — Status messages announced without focus change (<code>role="alert"</code>, <code>aria-live</code>)</li></ul><hr><h2>Phase 3: Semantic HTML & ARIA Cheat Sheet</h2><h3>Landmark Roles (use HTML5 elements, not <code>role</code> attributes when possible)</h3><pre><code><header> → banner (page header) <nav> → navigation <main> → main content (one per page) <aside> → complementary <footer> → contentinfo (page footer) <section> → region (with aria-label) <form> → form (with aria-label) <search> → search </code></pre><h3>Common ARIA Patterns</h3><table><thead><tr><th>Pattern</th><th>Key ARIA</th><th>Keyboard</th></tr></thead><tbody><tr><td>---</td><td>---</td><td>---</td></tr><tr><td>Modal dialog</td><td><code>role="dialog"</code>, <code>aria-modal="true"</code>, <code>aria-labelledby</code></td><td>Esc closes, Tab trapped inside, focus returns on close</td></tr><tr><td>Tabs</td><td><code>role="tablist/tab/tabpanel"</code>, <code>aria-selected</code>, <code>aria-controls</code></td><td>Arrow keys switch tabs, Tab enters panel</td></tr><tr><td>Accordion</td><td><code><button aria-expanded></code>, <code>aria-controls</code></td><td>Enter/Space toggles, all keyboard reachable</td></tr><tr><td>Menu</td><td><code>role="menu/menuitem"</code>, <code>aria-haspopup</code></td><td>Arrow keys navigate, Esc closes, Enter selects</td></tr><tr><td>Combobox/autocomplete</td><td><code>role="combobox"</code>, <code>aria-expanded</code>, <code>aria-activedescendant</code></td><td>Arrow keys navigate list, Enter selects, Esc closes</td></tr><tr><td>Alert/toast</td><td><code>role="alert"</code> or <code>aria-live="assertive"</code></td><td>Auto-announced, dismissible</td></tr><tr><td>Progress</td><td><code>role="progressbar"</code>, <code>aria-valuenow/min/max</code></td><td>Announced on change</td></tr><tr><td>Toggle button</td><td><code>aria-pressed="true/false"</code></td><td>Space/Enter toggles</td></tr><tr><td>Tooltip</td><td><code>role="tooltip"</code>, <code>aria-describedby</code></td><td>Appears on focus+hover, Esc dismisses</td></tr></tbody></table><h3>ARIA Rules of Engagement</h3><ol><li><strong>First rule of ARIA: Don't use ARIA if native HTML works</strong> — <code><button></code> > <code><div role="button"></code></li><li><strong>Second rule: Don't change native semantics</strong> — Don't <code><h2 role="tab"></code></li><li><strong>Third rule: All interactive ARIA controls must be keyboard accessible</strong></li><li><strong>Fourth rule: Don't use <code>role="presentation"</code> or <code>aria-hidden="true"</code> on focusable elements</strong></li><li><strong>Fifth rule: All interactive elements must have an accessible name</strong></li></ol><h3>Accessible Name Priority (browser resolution order)</h3><ol><li><code>aria-labelledby</code> (references another element's text)</li><li><code>aria-label</code> (string label)</li><li><code><label></code> association (for form controls)</li><li>Contents (button text, link text)</li><li><code>title</code> attribute (last resort — avoid)</li><li><code>placeholder</code> (NOT a label — supplementary only)</li></ol><hr><h2>Phase 4: Testing Methodology</h2><h3>4-Layer Testing Pyramid</h3><h4>Layer 1: Automated Scanning (catches ~30% of issues)</h4><p>Run on EVERY build/PR:</p><p><strong>Tools (all free):</strong></p><ul><li><strong>axe-core</strong> — industry standard, lowest false positives</li></ul><p> ```bash</p><p> # In Playwright/Cypress</p><p> npm install @axe-core/playwright # or @axe-core/cypress</p><p> # In CI</p><p> npm install @axe-core/cli</p><p> axe https://your-site.com --tags wcag2a,wcag2aa</p><p> ```</p><ul><li><strong>Lighthouse</strong> — Chrome DevTools → Lighthouse → Accessibility</li><li><strong>WAVE</strong> — wave.webaim.org (visual overlay)</li><li><strong>Pa11y</strong> — CLI scanner for CI pipelines</li></ul><p> ```bash</p><p> pa11y https://your-site.com --standard WCAG2AA</p><p> ```</p><p><strong>CI pipeline integration:</strong></p><pre><code># GitHub Actions example a11y-test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - run: npm ci && npm run build - run: npx pa11y-ci --config .pa11yci.json - run: npx playwright test --grep @a11y </code></pre><h4>Layer 2: Keyboard Testing (catches navigation issues)</h4><p>Test EVERY page/feature manually:</p><ol><li><strong>Tab test:</strong> Tab through entire page — can you reach everything? Is order logical?</li><li><strong>Focus visibility test:</strong> Is the focus indicator always visible and clear?</li><li><strong>Activation test:</strong> Can you activate every button, link, form control with Enter/Space?</li><li><strong>Trap test:</strong> Can you always Tab or Esc out of components (modals, menus)?</li><li><strong>Skip link test:</strong> Does "Skip to main content" work?</li></ol><p><strong>Keyboard testing checklist per page:</strong></p><pre><code>keyboard_test: page: "" date: "" tester: "" results: all_interactive_reachable: true/false logical_tab_order: true/false focus_always_visible: true/false no_keyboard_traps: true/false skip_link_works: true/false custom_components_keyboard_operable: true/false issues: [] </code></pre><h4>Layer 3: Screen Reader Testing (catches semantic issues)</h4><p>Test key flows with at least ONE screen reader:</p><table><thead><tr><th>Screen Reader</th><th>OS</th><th>Browser</th><th>Cost</th></tr></thead><tbody><tr><td>---</td><td>---</td><td>---</td><td>---</td></tr><tr><td><strong>NVDA</strong></td><td>Windows</td><td>Firefox/Chrome</td><td>Free</td></tr><tr><td><strong>VoiceOver</strong></td><td>macOS/iOS</td><td>Safari</td><td>Built-in</td></tr><tr><td><strong>JAWS</strong></td><td>Windows</td><td>Chrome/Edge</td><td>$$$</td></tr><tr><td><strong>TalkBack</strong></td><td>Android</td><td>Chrome</td><td>Built-in</td></tr></tbody></table><p><strong>Essential screen reader checks:</strong></p><ol><li>Page structure announced (headings, landmarks, lists)</li><li>Images described (or correctly hidden if decorative)</li><li>Forms: labels read, errors announced, required fields indicated</li><li>Dynamic content announced (alerts, loading states, live regions)</li><li>Custom components: role, name, state all announced</li></ol><p><strong>Quick VoiceOver test (macOS):</strong></p><ul><li>Cmd+F5 to toggle</li><li>VO+Right arrow to navigate</li><li>VO+U for rotor (headings, links, landmarks)</li><li>Tab for interactive elements only</li></ul><h4>Layer 4: Manual Expert Review (catches context & usability issues)</h4><p>Quarterly or before major releases:</p><ul><li>Content readability and plain language</li><li>Cognitive load assessment</li><li>Error recovery paths</li><li>Motion/animation sensitivity</li><li>Touch target sizing (mobile)</li><li>Color independence verification</li></ul><h3>Testing Priority Matrix</h3><table><thead><tr><th>Page/Feature</th><th>Auto</th><th>Keyboard</th><th>Screen Reader</th><th>Expert</th></tr></thead><tbody><tr><td>---</td><td>---</td><td>---</td><td>---</td><td>---</td></tr><tr><td>Homepage</td><td>Every build</td><td>Monthly</td><td>Quarterly</td><td>Annually</td></tr><tr><td>Login/Signup</td><td>Every build</td><td>Monthly</td><td>Quarterly</td><td>Annually</td></tr><tr><td>Checkout/Payment</td><td>Every build</td><td>Weekly</td><td>Monthly</td><td>Quarterly</td></tr><tr><td>Search</td><td>Every build</td><td>Monthly</td><td>Quarterly</td><td>Annually</td></tr><tr><td>Forms (all)</td><td>Every build</td><td>Monthly</td><td>Monthly</td><td>Quarterly</td></tr><tr><td>New features</td><td>Before ship</td><td>Before ship</td><td>Before ship</td><td>Major only</td></tr></tbody></table><hr><h2>Phase 5: Common Fix Patterns</h2><h3>Fix 1: Missing alt text</h3><pre><code><!-- ❌ --> <img src="chart.png"> <img src="decorative-swoosh.svg"> <!-- ✅ --> <img src="chart.png" alt="Revenue grew 34% from $1.8M to $2.4M in Q3 2025"> <img src="decorative-swoosh.svg" alt="" role="presentation"> </code></pre><h3>Fix 2: Color-only indicators</h3><pre><code><!-- ❌ Error shown only by red border --> <input style="border-color: red"> <!-- ✅ Error with icon, text, and color --> <input aria-invalid="true" aria-describedby="email-error" style="border-color: red"> <span id="email-error" role="alert">⚠️ Please enter a valid email address</span> </code></pre><h3>Fix 3: Custom button</h3><pre><code><!-- ❌ Div pretending to be a button --> <div class="btn" onclick="submit()">Submit</div> <!-- ✅ Just use a button --> <button type="submit">Submit</button> <!-- ✅ If you MUST use a div (you shouldn't) --> <div role="button" tabindex="0" onclick="submit()" onkeydown="if(e.key==='Enter'||e.key===' ')submit()">Submit</div> </code></pre><h3>Fix 4: Form labels</h3><pre><code><!-- ❌ Placeholder-only label --> <input placeholder="Email address"> <!-- ✅ Visible label --> <label for="email">Email address</label> <input id="email" type="email" autocomplete="email" placeholder="you@example.com"> <!-- ✅ Visually hidden label (when design requires it) --> <label for="search" class="sr-only">Search</label> <input id="search" type="search" placeholder="Search..."> </code></pre><h3>Fix 5: Focus management (SPA route changes)</h3><pre><code>// After client-side navigation: // 1. Update document.title document.title = `${newPageName} | Site Name`; // 2. Move focus to main content or h1 const main = document.querySelector('main h1') || document.querySelector('main'); main.setAttribute('tabindex', '-1'); main.focus(); // 3. Announce to screen readers const announcer = document.getElementById('route-announcer'); announcer.textContent = `Navigated to ${newPageName}`; // <div id="route-announcer" aria-live="assertive" class="sr-only"></div> </code></pre><h3>Fix 6: Modal focus trap</h3><pre><code>function trapFocus(modal) { const focusable = modal.querySelectorAll( 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' ); const first = focusable[0]; const last = focusable[focusable.length - 1]; modal.addEventListener('keydown', (e) => { if (e.key === 'Escape') { closeModal(); return; } if (e.key !== 'Tab') return; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } }); first.focus(); // Move focus into modal on open } // On close: return focus to the trigger element </code></pre><h3>Fix 7: Live region for dynamic content</h3><pre><code><!-- Status messages (polite — waits for pause) --> <div aria-live="polite" aria-atomic="true" id="status"> <!-- JS updates: "3 results found", "Item added to cart" --> </div> <!-- Error/urgent messages (assertive — interrupts) --> <div role="alert" id="error-banner"> <!-- JS updates: "Payment failed. Please try again." --> </div> </code></pre><h3>CSS: Visually Hidden (screen reader only)</h3><pre><code>.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } </code></pre><hr><h2>Phase 6: Design System Accessibility Standards</h2><h3>Color Contrast Requirements</h3><p><strong>Tools for checking:</strong></p><ul><li>Colour Contrast Analyser (desktop app)</li><li>WebAIM Contrast Checker (webaim.org/resources/contrastchecker)</li><li>Stark (Figma plugin)</li></ul><p><strong>Minimum ratios:</strong></p><table><thead><tr><th>Element</th><th>WCAG AA</th><th>WCAG AAA</th></tr></thead><tbody><tr><td>---</td><td>---</td><td>---</td></tr><tr><td>Normal text (<18pt)</td><td>4.5:1</td><td>7:1</td></tr><tr><td>Large text (≥18pt or ≥14pt bold)</td><td>3:1</td><td>4.5:1</td></tr><tr><td>UI components & graphics</td><td>3:1</td><td>—</td></tr><tr><td>Focus indicator</td><td>3:1</td><td>—</td></tr><tr><td>Disabled elements</td><td>Exempt</td><td>—</td></tr></tbody></table><h3>Touch Target Sizing</h3><table><thead><tr><th>Standard</th><th>Minimum Size</th><th>Spacing</th></tr></thead><tbody><tr><td>---</td><td>---</td><td>---</td></tr><tr><td>WCAG 2.5.8 (AAA)</td><td>44×44 CSS px</td><td>—</td></tr><tr><td>WCAG 2.5.5 (AA)</td><td>24×24 CSS px</td><td>24px from other targets</td></tr><tr><td>Apple HIG</td><td>44×44 pt</td><td>—</td></tr><tr><td>Material Design</td><td>48×48 dp</td><td>8dp spacing</td></tr><tr><td><strong>Recommendation</strong></td><td>44×44 px minimum</td><td>8px spacing</td></tr></tbody></table><h3>Typography Accessibility</h3><ul><li>Base font size: 16px minimum (body text)</li><li>Line height: 1.5× minimum for body text</li><li>Line length: 50-75 characters (measure)</li><li>Paragraph spacing: 1.5× font size minimum</li><li>Font choice: sans-serif for UI, high x-height, clear letterforms</li><li><strong>Never:</strong> All caps for long text, justified alignment, font size < 12px</li></ul><h3>Animation & Motion</h3><pre><code>/* Respect user preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } </code></pre><ul><li>All animations: provide pause/stop control</li><li>No content conveyed only through animation</li><li>Parallax scrolling: provide alternative or respect <code>prefers-reduced-motion</code></li><li>Auto-playing video: never. User-initiated only.</li></ul><h3>Dark Mode Accessibility</h3><ul><li>Re-check ALL contrast ratios in dark mode (common failure point)</li><li>Don't just invert — pure white (#fff) on dark backgrounds causes halation</li><li>Use off-white (#e0e0e0 to #f0f0f0) on dark backgrounds</li><li>Colored text: re-verify contrast on dark backgrounds</li><li>Images: consider transparent PNGs on dark backgrounds</li></ul><hr><h2>Phase 7: Component Accessibility Specifications</h2><p>For each common component, specify the complete accessible behavior:</p><h3>Button</h3><pre><code>semantics: "<button> or role='button'" accessible_name: "visible text or aria-label" keyboard: - "Enter/Space: activate" states: - "aria-disabled='true' (not HTML disabled — that removes from tab order)" - "aria-pressed for toggles" - "aria-expanded for menus/dropdowns" notes: - "Never use <a> for actions (buttons do things, links go places)" - "Loading state: aria-busy='true', disable click, announce 'Loading...'" </code></pre><h3>Form Field</h3><pre><code>required: - "Visible <label> with for= attribute" - "Error message with aria-describedby" - "Required indicator: aria-required='true' + visible '(required)' or '*' with legend" - "autocomplete attribute for user data fields" keyboard: - "Tab to reach, type to fill" - "Error: focus moves to first error field on submit" validation: - "Inline validation: after blur, not on every keystroke" - "Error format: What went wrong + how to fix it" - "Success: subtle confirmation, no modal" group: - "Related fields: <fieldset> + <legend> (radio groups, address blocks)" </code></pre><h3>Data Table</h3><pre><code>required: - "<table>, <thead>, <tbody>, <th scope='col/row'>" - "<caption> describing the table" - "Complex tables: headers= attribute on <td>" keyboard: - "Sortable: button in <th>, aria-sort='ascending/descending/none'" - "Pagination: standard button/link navigation" responsive: - "Small screens: horizontal scroll with sticky first column, or card layout" - "Never hide columns without providing access to that data" avoid: - "Layout tables (use CSS grid/flex)" - "Nested tables" </code></pre><h3>Navigation</h3><pre><code>required: - "<nav aria-label='Main'> (label if multiple navs)" - "Current page: aria-current='page'" - "Skip link as first focusable element" keyboard: - "Tab to enter, Tab through items" - "Dropdown menus: Enter/Space to open, Arrow keys to navigate, Esc to close" mobile: - "Hamburger: <button aria-expanded='false' aria-controls='menu-id'>" - "Update aria-expanded on toggle" </code></pre><hr><h2>Phase 8: Accessibility Scoring Rubric (0-100)</h2><table><thead><tr><th>Dimension</th><th>Weight</th><th>0-25</th><th>50</th><th>75</th><th>100</th></tr></thead><tbody><tr><td>---</td><td>---</td><td>---</td><td>---</td><td>---</td><td>---</td></tr><tr><td>Automated scan</td><td>15%</td><td>50+ violations</td><td>20-49</td><td>5-19</td><td>0 critical/serious</td></tr><tr><td>Keyboard navigation</td><td>20%</td><td>Major traps, unreachable elements</td><td>Most works, some gaps</td><td>All reachable, minor focus issues</td><td>Perfect tab order, visible focus, no traps</td></tr><tr><td>Screen reader compat</td><td>20%</td><td>Unusable (missing labels, roles)</td><td>Partially navigable</td><td>Mostly correct, minor omissions</td><td>Full landmark/heading/label coverage</td></tr><tr><td>Color & contrast</td><td>10%</td><td>Multiple failures</td><td>Some failures</td><td>Mostly passing</td><td>All elements ≥ AA ratios</td></tr><tr><td>Forms & errors</td><td>15%</td><td>Unlabeled, no error handling</td><td>Labels exist, errors unclear</td><td>Good labels, some error gaps</td><td>Full labels, inline errors, suggestions</td></tr><tr><td>Content structure</td><td>10%</td><td>No heading hierarchy, no landmarks</td><td>Partial hierarchy</td><td>Good structure, minor gaps</td><td>Perfect heading levels, complete landmarks</td></tr><tr><td>Dynamic content</td><td>10%</td><td>No live regions, modals trap</td><td>Some announcements</td><td>Most dynamic content announced</td><td>All state changes properly announced</td></tr></tbody></table><p><strong>Scoring thresholds:</strong></p><ul><li><strong>90-100:</strong> Audit-ready. Maintain with automated testing.</li><li><strong>70-89:</strong> Good foundation. Fix remaining issues within 30 days.</li><li><strong>50-69:</strong> Significant gaps. Prioritize critical/serious issues.</li><li><strong>Below 50:</strong> Major remediation needed. Start with Phase 9 priority matrix.</li></ul><hr><h2>Phase 9: Remediation Priority Framework</h2><h3>Severity Classification (align with axe-core)</h3><table><thead><tr><th>Severity</th><th>Impact</th><th>Fix Timeline</th><th>Examples</th></tr></thead><tbody><tr><td>---</td><td>---</td><td>---</td><td>---</td></tr><tr><td><strong>Critical</strong></td><td>Blocks entire feature for AT users</td><td>48 hours</td><td>Keyboard trap, missing form labels, no alt on functional images</td></tr><tr><td><strong>Serious</strong></td><td>Major difficulty, workaround exists</td><td>1 week</td><td>Low contrast text, missing heading hierarchy, unlabeled buttons</td></tr><tr><td><strong>Moderate</strong></td><td>Inconvenient but usable</td><td>2 weeks</td><td>Missing lang attribute, unclear link text, minor focus order issues</td></tr><tr><td><strong>Minor</strong></td><td>Best practice / enhancement</td><td>1 month</td><td>Missing autocomplete, suboptimal heading levels, redundant ARIA</td></tr></tbody></table><h3>Remediation Sprint Plan</h3><p><strong>Week 1-2: Critical (foundation)</strong></p><ul><li>Add skip link</li><li>Fix all keyboard traps</li><li>Label all form fields</li><li>Add alt text to functional images</li><li>Fix focus management in modals</li></ul><p><strong>Week 3-4: Serious (structure)</strong></p><ul><li>Fix heading hierarchy</li><li>Add landmark regions</li><li>Fix color contrast failures</li><li>Add visible focus indicators</li><li>Fix dynamic content announcements</li></ul><p><strong>Month 2: Moderate (polish)</strong></p><ul><li>Fix link text</li><li>Add language attributes</li><li>Fix focus order issues</li><li>Add ARIA to custom components</li><li>Fix reflow at 320px</li></ul><p><strong>Month 3: Minor + ongoing (maintenance)</strong></p><ul><li>Add autocomplete attributes</li><li>Optimize heading levels</li><li>Set up automated CI testing</li><li>Establish ongoing review process</li></ul><hr><h2>Phase 10: Organizational Accessibility Program</h2><h3>Maturity Model</h3><table><thead><tr><th>Level</th><th>Name</th><th>Characteristics</th></tr></thead><tbody><tr><td>---</td><td>---</td><td>---</td></tr><tr><td>1</td><td><strong>Ad Hoc</strong></td><td>No awareness, no process, reactive to complaints</td></tr><tr><td>2</td><td><strong>Aware</strong></td><td>Some training, fix issues when found, no standards</td></tr><tr><td>3</td><td><strong>Managed</strong></td><td>Guidelines documented, testing in QA, some automation</td></tr><tr><td>4</td><td><strong>Integrated</strong></td><td>A11y in design/dev process, CI testing, regular audits</td></tr><tr><td>5</td><td><strong>Leading</strong></td><td>Disability community involved, proactive innovation, culture of inclusion</td></tr></tbody></table><h3>Roles & Responsibilities</h3><table><thead><tr><th>Role</th><th>Responsibility</th><th>Training Needed</th></tr></thead><tbody><tr><td>---</td><td>---</td><td>---</td></tr><tr><td>Product Manager</td><td>Include a11y in requirements, accept/reject based on compliance</td><td>WCAG overview, legal landscape</td></tr><tr><td>Designer</td><td>Annotate designs with a11y specs, check contrast, design keyboard flows</td><td>Design patterns, ARIA, contrast tools</td></tr><tr><td>Developer</td><td>Implement semantic HTML, ARIA, keyboard support, write a11y tests</td><td>Semantic HTML, ARIA, testing tools</td></tr><tr><td>QA</td><td>Keyboard + screen reader testing, file a11y bugs with severity</td><td>Screen reader basics, testing methodology</td></tr><tr><td>Content</td><td>Plain language, alt text, heading structure, link text</td><td>Content guidelines, alt text writing</td></tr><tr><td>Leadership</td><td>Budget, staffing, accountability, legal compliance</td><td>Business case, legal risk</td></tr></tbody></table><h3>Accessibility Statement Template</h3><pre><code># Accessibility Statement [Company Name] is committed to ensuring digital accessibility for people with disabilities. ## Conformance Status We aim to conform to WCAG 2.1 Level AA. Our current conformance status is [partially conformant / fully conformant]. ## Measures Taken - Include accessibility as part of our design and development process - Conduct regular automated and manual accessibility testing - Train our team on accessibility best practices - Engage users with disabilities in testing ## Known Issues [List any known issues and expected fix dates] ## Feedback We welcome your accessibility feedback. Contact us at: - Email: accessibility@[company].com - Phone: [number] We aim to respond within [X] business days. ## Technical Specifications This website relies on: HTML, CSS, JavaScript, WAI-ARIA Compatible with: [browsers/AT listed] Last updated: [date] </code></pre><h3>ROI & Business Case</h3><p><strong>Risk reduction:</strong></p><ul><li>Average ADA lawsuit defense: $10K-$100K+ (even if you win)</li><li>Average settlement: $5K-$25K (but 4,600+ lawsuits/year in US alone)</li><li>EU EAA non-compliance: market access restrictions</li></ul><p><strong>Market expansion:</strong></p><ul><li>1.3 billion people globally live with disabilities (WHO)</li><li>16% of world population — larger than China's population</li><li>Disability community spending power: $13 trillion globally (Return on Disability Group)</li><li>Aging population: 80% of people over 65 use the internet</li></ul><p><strong>SEO benefits:</strong></p><ul><li>Semantic HTML improves crawlability</li><li>Alt text improves image search</li><li>Headings improve content understanding</li><li>Transcripts/captions index video content</li></ul><hr><h2>Phase 11: Mobile Accessibility</h2><h3>iOS/Android Additional Checks</h3><ul><li>[ ] Touch targets ≥ 44×44 points</li><li>[ ] Swipe gestures have tap alternatives</li><li>[ ] Screen reader (VoiceOver/TalkBack) navigates all elements</li><li>[ ] Custom actions exposed via accessibilityCustomActions</li><li>[ ] Haptic feedback for important state changes</li><li>[ ] Dark mode supported and contrast-checked</li><li>[ ] Dynamic Type (iOS) / Font Size (Android) supported up to 200%</li><li>[ ] Landscape orientation supported</li><li>[ ] No information conveyed solely through device motion</li></ul><h3>React Native Accessibility Props</h3><pre><code><TouchableOpacity accessible={true} accessibilityLabel="Delete item" accessibilityHint="Removes this item from your cart" accessibilityRole="button" accessibilityState={{ disabled: false }} /> </code></pre><h3>Flutter Accessibility</h3><pre><code>Semantics( label: 'Delete item', hint: 'Removes this item from your cart', button: true, child: IconButton( icon: Icon(Icons.delete), onPressed: _deleteItem, ), ) </code></pre><hr><h2>Phase 12: Advanced Patterns</h2><h3>Cognitive Accessibility (WCAG 2.2 / COGA)</h3><ul><li>Clear, simple language (aim for 8th grade reading level)</li><li>Consistent navigation and layout</li><li>Error prevention > error recovery</li><li>Undo for destructive actions</li><li>No time pressure unless essential</li><li>Progress indicators for multi-step processes</li><li>Help available on every page</li></ul><h3>Internationalization & Accessibility</h3><ul><li><code>dir="rtl"</code> for right-to-left languages</li><li>Don't concatenate translated strings (word order varies)</li><li>Number/date formatting: use <code>Intl</code> API</li><li>Currency symbols: position varies by locale</li><li>Test with longer text (German is ~30% longer than English)</li></ul><h3>PDF Accessibility</h3><ul><li>Tag all content (headings, paragraphs, lists, tables, images)</li><li>Reading order matches visual order</li><li>Alt text on all images</li><li>Language specified</li><li>Bookmarks for navigation</li><li><strong>Tool:</strong> PAC (PDF Accessibility Checker) — free</li></ul><h3>Email Accessibility</h3><ul><li><code>role="presentation"</code> on layout tables</li><li>Inline styles (not external CSS)</li><li><code>alt</code> on all images (including spacer GIFs: <code>alt=""</code>)</li><li>Sufficient color contrast (check in dark mode too)</li><li>Plain text version always available</li><li>Semantic headings (<code><h1></code>, <code><h2></code>)</li><li>Link text descriptive (not "click here")</li></ul><hr><h2>Quality Rubric: 100-Point Scoring (8 Dimensions)</h2><table><thead><tr><th>#</th><th>Dimension</th><th>Weight</th><th>Score (0-10)</th><th>Weighted</th></tr></thead><tbody><tr><td>---</td><td>---</td><td>---</td><td>---</td><td>---</td></tr><tr><td>1</td><td>Automated compliance (axe/pa11y)</td><td>15%</td><td></td><td></td></tr><tr><td>2</td><td>Keyboard operability</td><td>20%</td><td></td><td></td></tr><tr><td>3</td><td>Screen reader compatibility</td><td>20%</td><td></td><td></td></tr><tr><td>4</td><td>Visual design (contrast, spacing, motion)</td><td>10%</td><td></td><td></td></tr><tr><td>5</td><td>Forms and error handling</td><td>15%</td><td></td><td></td></tr><tr><td>6</td><td>Content structure (headings, landmarks)</td><td>10%</td><td></td><td></td></tr><tr><td>7</td><td>Dynamic content (live regions, SPA)</td><td>5%</td><td></td><td></td></tr><tr><td>8</td><td>Documentation & process</td><td>5%</td><td></td><td></td></tr><tr><td></td><td><strong>TOTAL</strong></td><td>100%</td><td></td><td><strong>/100</strong></td></tr></tbody></table><hr><h2>Natural Language Commands</h2><p>You can ask me to:</p><ol><li><strong>"Audit [URL/page] for accessibility"</strong> — Full WCAG 2.1 AA checklist review</li><li><strong>"Fix this component for accessibility"</strong> — Paste code, get accessible version</li><li><strong>"Write alt text for [image description]"</strong> — Context-appropriate alt text</li><li><strong>"Create ARIA pattern for [component]"</strong> — Full keyboard + screen reader spec</li><li><strong>"Score our accessibility"</strong> — Run the 100-point rubric</li><li><strong>"Generate accessibility statement"</strong> — Fill in the template</li><li><strong>"Plan remediation for [issues]"</strong> — Prioritized fix plan with timelines</li><li><strong>"Check contrast for [colors]"</strong> — Calculate ratios and pass/fail</li><li><strong>"Design accessible [component]"</strong> — Full spec with keyboard + ARIA + mobile</li><li><strong>"Build accessibility testing plan"</strong> — 4-layer pyramid customized to your stack</li><li><strong>"Create accessibility training for [role]"</strong> — Role-specific curriculum</li><li><strong>"Review our design system for accessibility"</strong> — Component-by-component audit</li></ol><hr><p><em>Built by AfrexAI — Turning agent knowledge into competitive advantage.</em></p></div> </div> </div> <div id="tab-versions" class="detail-content"> <div class="detail-section"> <h2>版本历史</h2> <p style="margin-bottom:12px;font-size:14px;color:#94a3b8;">共 1 个版本</p> <ul class="version-list"> <li> <div> <span class="version-tag">v1.0.0</span> <span style="font-size:11px;color:#5b6abf;margin-left:8px;background:#eef0ff;padding:1px 8px;border-radius:10px;">当前</span> </div> <div style="font-size:12px;color:#94a3b8;"> 2026-03-29 09:44 安全 </div> </li> </ul> </div> </div> <div id="tab-security" class="detail-content"> <div class="detail-section"> <h2>安全检测</h2> <div class="sec-grid"> <div class="sec-card"> <h4>腾讯云安全 (Keen)</h4> <div class="sec-status sec-safe"> 安全，无风险 </div> <a href="https://tix.qq.com/search/skill?keyword=3ea5353cef500dfebd1ac28d117a7b9d" target="_blank">查看报告</a> </div> <div class="sec-card"> <h4>腾讯云安全 (Sanbu)</h4> <div class="sec-status sec-queued"> suspicious </div> <a href="https://static.cloudsec.tencent.com/html-report-v2/2026/05/25/398979_0fe24758fa4cf95306d707b0af4fc36f.html?q-sign-algorithm=sha1&q-ak=AKID8JMG1bzBC1dz96qNhssfFftujT1NCoFi&q-sign-time=1781388880%3B1812924880&q-key-time=1781388880%3B1812924880&q-header-list=host&q-url-param-list=&q-signature=94be6b84ec51c03109a873daf609c69e1f4fcf38" target="_blank">查看报告</a> </div> </div> </div> </div> <!-- Recommended Skills --> <div style="margin-top:24px;"> <h2 style="font-size:18px;font-weight:600;margin-bottom:16px;">🔗 相关推荐</h2> <div class="rec-grid"> <div class="rec-card"> <span class="badge-cat" style="margin-bottom:8px;display:inline-block;">security-compliance</span> <h3><a href="/s/skill-vetter">Skill Vetter</a></h3> <div class="rec-owner">spclaudehome</div> <div class="rec-desc">AI智能体技能安全预审工具。安装ClawdHub、GitHub等来源技能前，检查风险信号、权限范围及可疑模式。</div> <div class="rec-stats"> <span style="color:#f39c12;">★ 1,215</span> <span style="color:#5b6abf;">📥 266,541</span> </div> </div> <div class="rec-card"> <span class="badge-cat" style="margin-bottom:8px;display:inline-block;">content-creation</span> <h3><a href="/s/social-media-scheduler">Social Media Scheduler</a></h3> <div class="rec-owner">1kalin</div> <div class="rec-desc">跨平台策划、起草与组织社交媒体内容；制定内容日历，撰写针对各平台优化的帖子，并保持稳定的发布节奏。</div> <div class="rec-stats"> <span style="color:#f39c12;">★ 15</span> <span style="color:#5b6abf;">📥 13,170</span> </div> </div> <div class="rec-card"> <span class="badge-cat" style="margin-bottom:8px;display:inline-block;">security-compliance</span> <h3><a href="/s/moltguard">MoltGuard - Security & Antivirus & Guardrails</a></h3> <div class="rec-owner">thomaslwang</div> <div class="rec-desc">MoltGuard — OpenClaw 安全守卫，由 OpenGuardrails 提供。安装 MoltGuard，保护您和您的用户免受提示注入、数据泄露和恶意攻击。</div> <div class="rec-stats"> <span style="color:#f39c12;">★ 116</span> <span style="color:#5b6abf;">📥 30,720</span> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded',function(){ document.querySelectorAll('.detail-tab').forEach(function(btn){ btn.addEventListener('click',function(e){ var tab = this.getAttribute('data-tab'); document.querySelectorAll('.detail-tab').forEach(function(b){b.classList.remove('active')}); document.querySelectorAll('.detail-content').forEach(function(c){c.classList.remove('active')}); this.classList.add('active'); var el = document.getElementById('tab-'+tab); if(el) el.classList.add('active'); }); }); }); </script> <div class="footer"> <p>Skill工具集 © 2026</p> </div></body> </html>