🦀 ClawHub

Accessibility Engine

by @1kalin

Helps teams achieve WCAG 2.1 AA compliance by auditing and guiding inclusive design for web, mobile, desktop, and other digital products.

Versionv1.0.0

Downloads1,560

#legal #communication

View on ClawHub →

TERMINAL

clawhub install afrexai-accessibility-engine

📖 About This Skill

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

| Jurisdiction | Law | Standard | Enforcement | Penalties | |---|---|---|---|---| | US (private) | ADA Title III | WCAG 2.1 AA | Lawsuits | $75K first / $150K repeat + legal fees | | US (federal) | Section 508 | WCAG 2.1 AA | Agency enforcement | Contract loss | | EU | EAA (Jun 2025) | EN 301 549 / WCAG 2.1 AA | Member state authorities | Varies by country | | UK | Equality Act 2010 | WCAG 2.1 AA | EHRC | Unlimited damages | | Canada | AODA | WCAG 2.0 AA | Province | $100K/day | | Australia | DDA | WCAG 2.1 AA | AHRC | Damages + 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) - Tables use , `scope`, - Forms use + `for` attribute (not placeholder-only) - Regions use landmarks (
,
,
,
)
[ ] 1.3.2 Meaningful Sequence (A) — DOM order matches visual reading order

[ ] 1.3.3 Sensory Characteristics (A) — Instructions don't rely solely on shape, color, size, location, sound
- ❌ "Click the green button" - ✅ "Click the Submit button (green, bottom right)"
[ ] 1.3.4 Orientation (AA) — Content not restricted to portrait or landscape

[ ] 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 style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">Page Name | Site Name</code>)</li> <li style="color:#94a3b8;margin:3px 0">[ ] <strong style="color:#e5e7eb">2.4.3 Focus Order (A)</strong> — Tab order follows logical reading sequence</li> <li style="color:#94a3b8;margin:3px 0">[ ] <strong style="color:#e5e7eb">2.4.4 Link Purpose (A)</strong> — Link text describes destination (no "click here", "read more")</li> <li style="color:#94a3b8;margin:3px 0">[ ] <strong style="color:#e5e7eb">2.4.5 Multiple Ways (AA)</strong> — 2+ ways to find pages (nav + search, or nav + sitemap)</li> <li style="color:#94a3b8;margin:3px 0">[ ] <strong style="color:#e5e7eb">2.4.6 Headings and Labels (AA)</strong> — Headings and labels are descriptive</li> <li style="color:#94a3b8;margin:3px 0">[ ] <strong style="color:#e5e7eb">2.4.7 Focus Visible (AA)</strong> — Keyboard focus indicator is clearly visible</li> - Minimum: 2px solid outline, 3:1 contrast against background - <strong style="color:#e5e7eb">Never:</strong> <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">outline: none</code> without a visible replacement</p><p style="margin:8px 0">#### 2.5 Input Modalities <li style="color:#94a3b8;margin:3px 0">[ ] <strong style="color:#e5e7eb">2.5.1 Pointer Gestures (A)</strong> — Multi-point gestures (pinch, swipe) have single-pointer alternatives</li> <li style="color:#94a3b8;margin:3px 0">[ ] <strong style="color:#e5e7eb">2.5.2 Pointer Cancellation (A)</strong> — Actions fire on up-event (not down), can be aborted</li> <li style="color:#94a3b8;margin:3px 0">[ ] <strong style="color:#e5e7eb">2.5.3 Label in Name (A)</strong> — Visible label text is included in accessible name</li> <li style="color:#94a3b8;margin:3px 0">[ ] <strong style="color:#e5e7eb">2.5.4 Motion Actuation (A)</strong> — Shake/tilt features have button alternatives</li></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Principle 3: UNDERSTANDABLE (content and interface must be understandable)</h4></p><p style="margin:8px 0">#### 3.1 Readable <li style="color:#94a3b8;margin:3px 0">[ ] <strong style="color:#e5e7eb">3.1.1 Language of Page (A)</strong> — <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em"><html lang="en"></code> (or appropriate language code)</li> <li style="color:#94a3b8;margin:3px 0">[ ] <strong style="color:#e5e7eb">3.1.2 Language of Parts (AA)</strong> — Foreign language passages marked with <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">lang</code> attribute</li></p><p style="margin:8px 0">#### 3.2 Predictable <li style="color:#94a3b8;margin:3px 0">[ ] <strong style="color:#e5e7eb">3.2.1 On Focus (A)</strong> — No unexpected context change on focus</li> <li style="color:#94a3b8;margin:3px 0">[ ] <strong style="color:#e5e7eb">3.2.2 On Input (A)</strong> — No unexpected context change on input (unless warned)</li> <li style="color:#94a3b8;margin:3px 0">[ ] <strong style="color:#e5e7eb">3.2.3 Consistent Navigation (AA)</strong> — Navigation order consistent across pages</li> <li style="color:#94a3b8;margin:3px 0">[ ] <strong style="color:#e5e7eb">3.2.4 Consistent Identification (AA)</strong> — Same function = same label everywhere</li></p><p style="margin:8px 0">#### 3.3 Input Assistance <li style="color:#94a3b8;margin:3px 0">[ ] <strong style="color:#e5e7eb">3.3.1 Error Identification (A)</strong> — Errors described in text (not just color)</li> <li style="color:#94a3b8;margin:3px 0">[ ] <strong style="color:#e5e7eb">3.3.2 Labels or Instructions (A)</strong> — Required fields, format hints provided upfront</li> <li style="color:#94a3b8;margin:3px 0">[ ] <strong style="color:#e5e7eb">3.3.3 Error Suggestion (AA)</strong> — Suggest corrections when possible</li> <li style="color:#94a3b8;margin:3px 0">[ ] <strong style="color:#e5e7eb">3.3.4 Error Prevention (AA)</strong> — Legal/financial submissions: reversible, or confirmed, or reviewed</li></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Principle 4: ROBUST (content must be compatible with assistive tech)</h4></p><p style="margin:8px 0"><li style="color:#94a3b8;margin:3px 0">[ ] <strong style="color:#e5e7eb">4.1.1 Parsing (A)</strong> — Valid HTML (no duplicate IDs, proper nesting)</li> <li style="color:#94a3b8;margin:3px 0">[ ] <strong style="color:#e5e7eb">4.1.2 Name, Role, Value (A)</strong> — Custom components expose correct ARIA roles/states</li> <li style="color:#94a3b8;margin:3px 0">[ ] <strong style="color:#e5e7eb">4.1.3 Status Messages (AA)</strong> — Status messages announced without focus change (<code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">role="alert"</code>, <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">aria-live</code>)</li></p><p style="margin:8px 0"><hr style="border:none;border-top:1px solid #1e1e3f;margin:12px 0"></p><p style="margin:8px 0"><h3 style="color:#e5e7eb;margin:18px 0 8px;font-size:1.05em">Phase 3: Semantic HTML & ARIA Cheat Sheet</h3></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Landmark Roles (use HTML5 elements, not <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">role</code> attributes when possible)</h4></p><p style="margin:8px 0"><pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em"><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></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Common ARIA Patterns</h4></p><p style="margin:8px 0">| Pattern | Key ARIA | Keyboard | |---|---|---| | Modal dialog | <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">role="dialog"</code>, <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">aria-modal="true"</code>, <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">aria-labelledby</code> | Esc closes, Tab trapped inside, focus returns on close | | Tabs | <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">role="tablist/tab/tabpanel"</code>, <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">aria-selected</code>, <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">aria-controls</code> | Arrow keys switch tabs, Tab enters panel | | Accordion | <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em"><button aria-expanded></code>, <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">aria-controls</code> | Enter/Space toggles, all keyboard reachable | | Menu | <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">role="menu/menuitem"</code>, <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">aria-haspopup</code> | Arrow keys navigate, Esc closes, Enter selects | | Combobox/autocomplete | <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">role="combobox"</code>, <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">aria-expanded</code>, <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">aria-activedescendant</code> | Arrow keys navigate list, Enter selects, Esc closes | | Alert/toast | <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">role="alert"</code> or <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">aria-live="assertive"</code> | Auto-announced, dismissible | | Progress | <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">role="progressbar"</code>, <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">aria-valuenow/min/max</code> | Announced on change | | Toggle button | <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">aria-pressed="true/false"</code> | Space/Enter toggles | | Tooltip | <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">role="tooltip"</code>, <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">aria-describedby</code> | Appears on focus+hover, Esc dismisses |</p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">ARIA Rules of Engagement</h4></p><p style="margin:8px 0">1. <strong style="color:#e5e7eb">First rule of ARIA: Don't use ARIA if native HTML works</strong> — <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em"><button></code> > <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em"><div role="button"></code> 2. <strong style="color:#e5e7eb">Second rule: Don't change native semantics</strong> — Don't <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em"><h2 role="tab"></code> 3. <strong style="color:#e5e7eb">Third rule: All interactive ARIA controls must be keyboard accessible</strong> 4. <strong style="color:#e5e7eb">Fourth rule: Don't use <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">role="presentation"</code> or <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">aria-hidden="true"</code> on focusable elements</strong> 5. <strong style="color:#e5e7eb">Fifth rule: All interactive elements must have an accessible name</strong></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Accessible Name Priority (browser resolution order)</h4> 1. <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">aria-labelledby</code> (references another element's text) 2. <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">aria-label</code> (string label) 3. <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em"><label></code> association (for form controls) 4. Contents (button text, link text) 5. <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">title</code> attribute (last resort — avoid) 6. <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">placeholder</code> (NOT a label — supplementary only)</p><p style="margin:8px 0"><hr style="border:none;border-top:1px solid #1e1e3f;margin:12px 0"></p><p style="margin:8px 0"><h3 style="color:#e5e7eb;margin:18px 0 8px;font-size:1.05em">Phase 4: Testing Methodology</h3></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">4-Layer Testing Pyramid</h4></p><p style="margin:8px 0">#### Layer 1: Automated Scanning (catches ~30% of issues) Run on EVERY build/PR:</p><p style="margin:8px 0"><strong style="color:#e5e7eb">Tools (all free):</strong> <li style="color:#94a3b8;margin:3px 0"><strong style="color:#e5e7eb">axe-core</strong> — industry standard, lowest false positives</li> <pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em"> # In Playwright/Cypress npm install @axe-core/playwright # or @axe-core/cypress # In CI npm install @axe-core/cli axe https://your-site.com --tags wcag2a,wcag2aa </code></pre> <li style="color:#94a3b8;margin:3px 0"><strong style="color:#e5e7eb">Lighthouse</strong> — Chrome DevTools → Lighthouse → Accessibility</li> <li style="color:#94a3b8;margin:3px 0"><strong style="color:#e5e7eb">WAVE</strong> — wave.webaim.org (visual overlay)</li> <li style="color:#94a3b8;margin:3px 0"><strong style="color:#e5e7eb">Pa11y</strong> — CLI scanner for CI pipelines</li> <pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em"> pa11y https://your-site.com --standard WCAG2AA </code></pre></p><p style="margin:8px 0"><strong style="color:#e5e7eb">CI pipeline integration:</strong> <pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em"># 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></p><p style="margin:8px 0">#### Layer 2: Keyboard Testing (catches navigation issues) Test EVERY page/feature manually:</p><p style="margin:8px 0">1. <strong style="color:#e5e7eb">Tab test:</strong> Tab through entire page — can you reach everything? Is order logical? 2. <strong style="color:#e5e7eb">Focus visibility test:</strong> Is the focus indicator always visible and clear? 3. <strong style="color:#e5e7eb">Activation test:</strong> Can you activate every button, link, form control with Enter/Space? 4. <strong style="color:#e5e7eb">Trap test:</strong> Can you always Tab or Esc out of components (modals, menus)? 5. <strong style="color:#e5e7eb">Skip link test:</strong> Does "Skip to main content" work?</p><p style="margin:8px 0"><strong style="color:#e5e7eb">Keyboard testing checklist per page:</strong> <pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em">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></p><p style="margin:8px 0">#### Layer 3: Screen Reader Testing (catches semantic issues) Test key flows with at least ONE screen reader:</p><p style="margin:8px 0">| Screen Reader | OS | Browser | Cost | |---|---|---|---| | <strong style="color:#e5e7eb">NVDA</strong> | Windows | Firefox/Chrome | Free | | <strong style="color:#e5e7eb">VoiceOver</strong> | macOS/iOS | Safari | Built-in | | <strong style="color:#e5e7eb">JAWS</strong> | Windows | Chrome/Edge | $$$ | | <strong style="color:#e5e7eb">TalkBack</strong> | Android | Chrome | Built-in |</p><p style="margin:8px 0"><strong style="color:#e5e7eb">Essential screen reader checks:</strong> 1. Page structure announced (headings, landmarks, lists) 2. Images described (or correctly hidden if decorative) 3. Forms: labels read, errors announced, required fields indicated 4. Dynamic content announced (alerts, loading states, live regions) 5. Custom components: role, name, state all announced</p><p style="margin:8px 0"><strong style="color:#e5e7eb">Quick VoiceOver test (macOS):</strong> <li style="color:#94a3b8;margin:3px 0">Cmd+F5 to toggle</li> <li style="color:#94a3b8;margin:3px 0">VO+Right arrow to navigate</li> <li style="color:#94a3b8;margin:3px 0">VO+U for rotor (headings, links, landmarks)</li> <li style="color:#94a3b8;margin:3px 0">Tab for interactive elements only</li></p><p style="margin:8px 0">#### Layer 4: Manual Expert Review (catches context & usability issues) Quarterly or before major releases:</p><p style="margin:8px 0"><li style="color:#94a3b8;margin:3px 0">Content readability and plain language</li> <li style="color:#94a3b8;margin:3px 0">Cognitive load assessment</li> <li style="color:#94a3b8;margin:3px 0">Error recovery paths</li> <li style="color:#94a3b8;margin:3px 0">Motion/animation sensitivity</li> <li style="color:#94a3b8;margin:3px 0">Touch target sizing (mobile)</li> <li style="color:#94a3b8;margin:3px 0">Color independence verification</li></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Testing Priority Matrix</h4></p><p style="margin:8px 0">| Page/Feature | Auto | Keyboard | Screen Reader | Expert | |---|---|---|---|---| | Homepage | Every build | Monthly | Quarterly | Annually | | Login/Signup | Every build | Monthly | Quarterly | Annually | | Checkout/Payment | Every build | Weekly | Monthly | Quarterly | | Search | Every build | Monthly | Quarterly | Annually | | Forms (all) | Every build | Monthly | Monthly | Quarterly | | New features | Before ship | Before ship | Before ship | Major only |</p><p style="margin:8px 0"><hr style="border:none;border-top:1px solid #1e1e3f;margin:12px 0"></p><p style="margin:8px 0"><h3 style="color:#e5e7eb;margin:18px 0 8px;font-size:1.05em">Phase 5: Common Fix Patterns</h3></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Fix 1: Missing alt text</h4> <pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em"> <img src="chart.png"> <img src="decorative-swoosh.svg"></p><p style="margin:8px 0"> <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></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Fix 2: Color-only indicators</h4> <pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em"> <input style="border-color: red"></p><p style="margin:8px 0"> <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></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Fix 3: Custom button</h4> <pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em"> <div class="btn" onclick="submit()">Submit</div></p><p style="margin:8px 0"> <button type="submit">Submit</button></p><p style="margin:8px 0"> <div role="button" tabindex="0" onclick="submit()" onkeydown="if(e.key==='Enter'||e.key===' ')submit()">Submit</div> </code></pre></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Fix 4: Form labels</h4> <pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em"> <input placeholder="Email address"></p><p style="margin:8px 0"> <label for="email">Email address</label> <input id="email" type="email" autocomplete="email" placeholder="you@example.com"></p><p style="margin:8px 0"> <label for="search" class="sr-only">Search</label> <input id="search" type="search" placeholder="Search..."> </code></pre></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Fix 5: Focus management (SPA route changes)</h4> <pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em">// After client-side navigation: // 1. Update document.title document.title = <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">${newPageName} | Site Name</code>;</p><p style="margin:8px 0">// 2. Move focus to main content or h1 const main = document.querySelector('main h1') || document.querySelector('main'); main.setAttribute('tabindex', '-1'); main.focus();</p><p style="margin:8px 0">// 3. Announce to screen readers const announcer = document.getElementById('route-announcer'); announcer.textContent = <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">Navigated to ${newPageName}</code>; // <div id="route-announcer" aria-live="assertive" class="sr-only"></div> </code></pre></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Fix 6: Modal focus trap</h4> <pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em">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];</p><p style="margin:8px 0"> 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(); } });</p><p style="margin:8px 0"> first.focus(); // Move focus into modal on open } // On close: return focus to the trigger element </code></pre></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Fix 7: Live region for dynamic content</h4> <pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em"> <div aria-live="polite" aria-atomic="true" id="status">  </div></p><p style="margin:8px 0"> <div role="alert" id="error-banner">  </div> </code></pre></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">CSS: Visually Hidden (screen reader only)</h4> <pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em">.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></p><p style="margin:8px 0"><hr style="border:none;border-top:1px solid #1e1e3f;margin:12px 0"></p><p style="margin:8px 0"><h3 style="color:#e5e7eb;margin:18px 0 8px;font-size:1.05em">Phase 6: Design System Accessibility Standards</h3></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Color Contrast Requirements</h4></p><p style="margin:8px 0"><strong style="color:#e5e7eb">Tools for checking:</strong> <li style="color:#94a3b8;margin:3px 0">Colour Contrast Analyser (desktop app)</li> <li style="color:#94a3b8;margin:3px 0">WebAIM Contrast Checker (webaim.org/resources/contrastchecker)</li> <li style="color:#94a3b8;margin:3px 0">Stark (Figma plugin)</li></p><p style="margin:8px 0"><strong style="color:#e5e7eb">Minimum ratios:</strong></p><p style="margin:8px 0">| Element | WCAG AA | WCAG AAA | |---|---|---| | Normal text (<18pt) | 4.5:1 | 7:1 | | Large text (≥18pt or ≥14pt bold) | 3:1 | 4.5:1 | | UI components & graphics | 3:1 | — | | Focus indicator | 3:1 | — | | Disabled elements | Exempt | — |</p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Touch Target Sizing</h4></p><p style="margin:8px 0">| Standard | Minimum Size | Spacing | |---|---|---| | WCAG 2.5.8 (AAA) | 44×44 CSS px | — | | WCAG 2.5.5 (AA) | 24×24 CSS px | 24px from other targets | | Apple HIG | 44×44 pt | — | | Material Design | 48×48 dp | 8dp spacing | | <strong style="color:#e5e7eb">Recommendation</strong> | 44×44 px minimum | 8px spacing |</p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Typography Accessibility</h4></p><p style="margin:8px 0"><li style="color:#94a3b8;margin:3px 0">Base font size: 16px minimum (body text)</li> <li style="color:#94a3b8;margin:3px 0">Line height: 1.5× minimum for body text</li> <li style="color:#94a3b8;margin:3px 0">Line length: 50-75 characters (measure)</li> <li style="color:#94a3b8;margin:3px 0">Paragraph spacing: 1.5× font size minimum</li> <li style="color:#94a3b8;margin:3px 0">Font choice: sans-serif for UI, high x-height, clear letterforms</li> <li style="color:#94a3b8;margin:3px 0"><strong style="color:#e5e7eb">Never:</strong> All caps for long text, justified alignment, font size < 12px</li></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Animation & Motion</h4></p><p style="margin:8px 0"><pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em">/* 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></p><p style="margin:8px 0"><li style="color:#94a3b8;margin:3px 0">All animations: provide pause/stop control</li> <li style="color:#94a3b8;margin:3px 0">No content conveyed only through animation</li> <li style="color:#94a3b8;margin:3px 0">Parallax scrolling: provide alternative or respect <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">prefers-reduced-motion</code></li> <li style="color:#94a3b8;margin:3px 0">Auto-playing video: never. User-initiated only.</li></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Dark Mode Accessibility</h4> <li style="color:#94a3b8;margin:3px 0">Re-check ALL contrast ratios in dark mode (common failure point)</li> <li style="color:#94a3b8;margin:3px 0">Don't just invert — pure white (#fff) on dark backgrounds causes halation</li> <li style="color:#94a3b8;margin:3px 0">Use off-white (#e0e0e0 to #f0f0f0) on dark backgrounds</li> <li style="color:#94a3b8;margin:3px 0">Colored text: re-verify contrast on dark backgrounds</li> <li style="color:#94a3b8;margin:3px 0">Images: consider transparent PNGs on dark backgrounds</li></p><p style="margin:8px 0"><hr style="border:none;border-top:1px solid #1e1e3f;margin:12px 0"></p><p style="margin:8px 0"><h3 style="color:#e5e7eb;margin:18px 0 8px;font-size:1.05em">Phase 7: Component Accessibility Specifications</h3></p><p style="margin:8px 0">For each common component, specify the complete accessible behavior:</p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Button</h4> <pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em">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></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Form Field</h4> <pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em">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></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Data Table</h4> <pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em">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></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Navigation</h4> <pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em">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></p><p style="margin:8px 0"><hr style="border:none;border-top:1px solid #1e1e3f;margin:12px 0"></p><p style="margin:8px 0"><h3 style="color:#e5e7eb;margin:18px 0 8px;font-size:1.05em">Phase 8: Accessibility Scoring Rubric (0-100)</h3></p><p style="margin:8px 0">| Dimension | Weight | 0-25 | 50 | 75 | 100 | |---|---|---|---|---|---| | Automated scan | 15% | 50+ violations | 20-49 | 5-19 | 0 critical/serious | | Keyboard navigation | 20% | Major traps, unreachable elements | Most works, some gaps | All reachable, minor focus issues | Perfect tab order, visible focus, no traps | | Screen reader compat | 20% | Unusable (missing labels, roles) | Partially navigable | Mostly correct, minor omissions | Full landmark/heading/label coverage | | Color & contrast | 10% | Multiple failures | Some failures | Mostly passing | All elements ≥ AA ratios | | Forms & errors | 15% | Unlabeled, no error handling | Labels exist, errors unclear | Good labels, some error gaps | Full labels, inline errors, suggestions | | Content structure | 10% | No heading hierarchy, no landmarks | Partial hierarchy | Good structure, minor gaps | Perfect heading levels, complete landmarks | | Dynamic content | 10% | No live regions, modals trap | Some announcements | Most dynamic content announced | All state changes properly announced |</p><p style="margin:8px 0"><strong style="color:#e5e7eb">Scoring thresholds:</strong> <li style="color:#94a3b8;margin:3px 0"><strong style="color:#e5e7eb">90-100:</strong> Audit-ready. Maintain with automated testing.</li> <li style="color:#94a3b8;margin:3px 0"><strong style="color:#e5e7eb">70-89:</strong> Good foundation. Fix remaining issues within 30 days.</li> <li style="color:#94a3b8;margin:3px 0"><strong style="color:#e5e7eb">50-69:</strong> Significant gaps. Prioritize critical/serious issues.</li> <li style="color:#94a3b8;margin:3px 0"><strong style="color:#e5e7eb">Below 50:</strong> Major remediation needed. Start with Phase 9 priority matrix.</li></p><p style="margin:8px 0"><hr style="border:none;border-top:1px solid #1e1e3f;margin:12px 0"></p><p style="margin:8px 0"><h3 style="color:#e5e7eb;margin:18px 0 8px;font-size:1.05em">Phase 9: Remediation Priority Framework</h3></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Severity Classification (align with axe-core)</h4></p><p style="margin:8px 0">| Severity | Impact | Fix Timeline | Examples | |---|---|---|---| | <strong style="color:#e5e7eb">Critical</strong> | Blocks entire feature for AT users | 48 hours | Keyboard trap, missing form labels, no alt on functional images | | <strong style="color:#e5e7eb">Serious</strong> | Major difficulty, workaround exists | 1 week | Low contrast text, missing heading hierarchy, unlabeled buttons | | <strong style="color:#e5e7eb">Moderate</strong> | Inconvenient but usable | 2 weeks | Missing lang attribute, unclear link text, minor focus order issues | | <strong style="color:#e5e7eb">Minor</strong> | Best practice / enhancement | 1 month | Missing autocomplete, suboptimal heading levels, redundant ARIA |</p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Remediation Sprint Plan</h4></p><p style="margin:8px 0"><strong style="color:#e5e7eb">Week 1-2: Critical (foundation)</strong> <li style="color:#94a3b8;margin:3px 0">Add skip link</li> <li style="color:#94a3b8;margin:3px 0">Fix all keyboard traps</li> <li style="color:#94a3b8;margin:3px 0">Label all form fields</li> <li style="color:#94a3b8;margin:3px 0">Add alt text to functional images</li> <li style="color:#94a3b8;margin:3px 0">Fix focus management in modals</li></p><p style="margin:8px 0"><strong style="color:#e5e7eb">Week 3-4: Serious (structure)</strong> <li style="color:#94a3b8;margin:3px 0">Fix heading hierarchy</li> <li style="color:#94a3b8;margin:3px 0">Add landmark regions</li> <li style="color:#94a3b8;margin:3px 0">Fix color contrast failures</li> <li style="color:#94a3b8;margin:3px 0">Add visible focus indicators</li> <li style="color:#94a3b8;margin:3px 0">Fix dynamic content announcements</li></p><p style="margin:8px 0"><strong style="color:#e5e7eb">Month 2: Moderate (polish)</strong> <li style="color:#94a3b8;margin:3px 0">Fix link text</li> <li style="color:#94a3b8;margin:3px 0">Add language attributes</li> <li style="color:#94a3b8;margin:3px 0">Fix focus order issues</li> <li style="color:#94a3b8;margin:3px 0">Add ARIA to custom components</li> <li style="color:#94a3b8;margin:3px 0">Fix reflow at 320px</li></p><p style="margin:8px 0"><strong style="color:#e5e7eb">Month 3: Minor + ongoing (maintenance)</strong> <li style="color:#94a3b8;margin:3px 0">Add autocomplete attributes</li> <li style="color:#94a3b8;margin:3px 0">Optimize heading levels</li> <li style="color:#94a3b8;margin:3px 0">Set up automated CI testing</li> <li style="color:#94a3b8;margin:3px 0">Establish ongoing review process</li></p><p style="margin:8px 0"><hr style="border:none;border-top:1px solid #1e1e3f;margin:12px 0"></p><p style="margin:8px 0"><h3 style="color:#e5e7eb;margin:18px 0 8px;font-size:1.05em">Phase 10: Organizational Accessibility Program</h3></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Maturity Model</h4></p><p style="margin:8px 0">| Level | Name | Characteristics | |---|---|---| | 1 | <strong style="color:#e5e7eb">Ad Hoc</strong> | No awareness, no process, reactive to complaints | | 2 | <strong style="color:#e5e7eb">Aware</strong> | Some training, fix issues when found, no standards | | 3 | <strong style="color:#e5e7eb">Managed</strong> | Guidelines documented, testing in QA, some automation | | 4 | <strong style="color:#e5e7eb">Integrated</strong> | A11y in design/dev process, CI testing, regular audits | | 5 | <strong style="color:#e5e7eb">Leading</strong> | Disability community involved, proactive innovation, culture of inclusion |</p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Roles & Responsibilities</h4></p><p style="margin:8px 0">| Role | Responsibility | Training Needed | |---|---|---| | Product Manager | Include a11y in requirements, accept/reject based on compliance | WCAG overview, legal landscape | | Designer | Annotate designs with a11y specs, check contrast, design keyboard flows | Design patterns, ARIA, contrast tools | | Developer | Implement semantic HTML, ARIA, keyboard support, write a11y tests | Semantic HTML, ARIA, testing tools | | QA | Keyboard + screen reader testing, file a11y bugs with severity | Screen reader basics, testing methodology | | Content | Plain language, alt text, heading structure, link text | Content guidelines, alt text writing | | Leadership | Budget, staffing, accountability, legal compliance | Business case, legal risk |</p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Accessibility Statement Template</h4></p><p style="margin:8px 0"><pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em"># Accessibility Statement</p><p style="margin:8px 0">[Company Name] is committed to ensuring digital accessibility for people with disabilities.</p><p style="margin:8px 0"><h3 style="color:#e5e7eb;margin:18px 0 8px;font-size:1.05em">Conformance Status</h3> We aim to conform to WCAG 2.1 Level AA. Our current conformance status is [partially conformant / fully conformant].</p><p style="margin:8px 0"><h3 style="color:#e5e7eb;margin:18px 0 8px;font-size:1.05em">Measures Taken</h3> <li style="color:#94a3b8;margin:3px 0">Include accessibility as part of our design and development process</li> <li style="color:#94a3b8;margin:3px 0">Conduct regular automated and manual accessibility testing</li> <li style="color:#94a3b8;margin:3px 0">Train our team on accessibility best practices</li> <li style="color:#94a3b8;margin:3px 0">Engage users with disabilities in testing</li></p><p style="margin:8px 0"><h3 style="color:#e5e7eb;margin:18px 0 8px;font-size:1.05em">Known Issues</h3> [List any known issues and expected fix dates]</p><p style="margin:8px 0"><h3 style="color:#e5e7eb;margin:18px 0 8px;font-size:1.05em">Feedback</h3> We welcome your accessibility feedback. Contact us at: <li style="color:#94a3b8;margin:3px 0">Email: accessibility@[company].com</li> <li style="color:#94a3b8;margin:3px 0">Phone: [number]</li> We aim to respond within [X] business days.</p><p style="margin:8px 0"><h3 style="color:#e5e7eb;margin:18px 0 8px;font-size:1.05em">Technical Specifications</h3> This website relies on: HTML, CSS, JavaScript, WAI-ARIA Compatible with: [browsers/AT listed]</p><p style="margin:8px 0">Last updated: [date] </code></pre></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">ROI & Business Case</h4></p><p style="margin:8px 0"><strong style="color:#e5e7eb">Risk reduction:</strong> <li style="color:#94a3b8;margin:3px 0">Average ADA lawsuit defense: $10K-$100K+ (even if you win)</li> <li style="color:#94a3b8;margin:3px 0">Average settlement: $5K-$25K (but 4,600+ lawsuits/year in US alone)</li> <li style="color:#94a3b8;margin:3px 0">EU EAA non-compliance: market access restrictions</li></p><p style="margin:8px 0"><strong style="color:#e5e7eb">Market expansion:</strong> <li style="color:#94a3b8;margin:3px 0">1.3 billion people globally live with disabilities (WHO)</li> <li style="color:#94a3b8;margin:3px 0">16% of world population — larger than China's population</li> <li style="color:#94a3b8;margin:3px 0">Disability community spending power: $13 trillion globally (Return on Disability Group)</li> <li style="color:#94a3b8;margin:3px 0">Aging population: 80% of people over 65 use the internet</li></p><p style="margin:8px 0"><strong style="color:#e5e7eb">SEO benefits:</strong> <li style="color:#94a3b8;margin:3px 0">Semantic HTML improves crawlability</li> <li style="color:#94a3b8;margin:3px 0">Alt text improves image search</li> <li style="color:#94a3b8;margin:3px 0">Headings improve content understanding</li> <li style="color:#94a3b8;margin:3px 0">Transcripts/captions index video content</li></p><p style="margin:8px 0"><hr style="border:none;border-top:1px solid #1e1e3f;margin:12px 0"></p><p style="margin:8px 0"><h3 style="color:#e5e7eb;margin:18px 0 8px;font-size:1.05em">Phase 11: Mobile Accessibility</h3></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">iOS/Android Additional Checks</h4></p><p style="margin:8px 0"><li style="color:#94a3b8;margin:3px 0">[ ] Touch targets ≥ 44×44 points</li> <li style="color:#94a3b8;margin:3px 0">[ ] Swipe gestures have tap alternatives</li> <li style="color:#94a3b8;margin:3px 0">[ ] Screen reader (VoiceOver/TalkBack) navigates all elements</li> <li style="color:#94a3b8;margin:3px 0">[ ] Custom actions exposed via accessibilityCustomActions</li> <li style="color:#94a3b8;margin:3px 0">[ ] Haptic feedback for important state changes</li> <li style="color:#94a3b8;margin:3px 0">[ ] Dark mode supported and contrast-checked</li> <li style="color:#94a3b8;margin:3px 0">[ ] Dynamic Type (iOS) / Font Size (Android) supported up to 200%</li> <li style="color:#94a3b8;margin:3px 0">[ ] Landscape orientation supported</li> <li style="color:#94a3b8;margin:3px 0">[ ] No information conveyed solely through device motion</li></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">React Native Accessibility Props</h4> <pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em"><TouchableOpacity accessible={true} accessibilityLabel="Delete item" accessibilityHint="Removes this item from your cart" accessibilityRole="button" accessibilityState={{ disabled: false }} /> </code></pre></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Flutter Accessibility</h4> <pre style="background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0"><code style="color:#a5f3fc;background:none;padding:0;font-size:1em">Semantics( label: 'Delete item', hint: 'Removes this item from your cart', button: true, child: IconButton( icon: Icon(Icons.delete), onPressed: _deleteItem, ), ) </code></pre></p><p style="margin:8px 0"><hr style="border:none;border-top:1px solid #1e1e3f;margin:12px 0"></p><p style="margin:8px 0"><h3 style="color:#e5e7eb;margin:18px 0 8px;font-size:1.05em">Phase 12: Advanced Patterns</h3></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Cognitive Accessibility (WCAG 2.2 / COGA)</h4> <li style="color:#94a3b8;margin:3px 0">Clear, simple language (aim for 8th grade reading level)</li> <li style="color:#94a3b8;margin:3px 0">Consistent navigation and layout</li> <li style="color:#94a3b8;margin:3px 0">Error prevention > error recovery</li> <li style="color:#94a3b8;margin:3px 0">Undo for destructive actions</li> <li style="color:#94a3b8;margin:3px 0">No time pressure unless essential</li> <li style="color:#94a3b8;margin:3px 0">Progress indicators for multi-step processes</li> <li style="color:#94a3b8;margin:3px 0">Help available on every page</li></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Internationalization & Accessibility</h4> <li style="color:#94a3b8;margin:3px 0"><code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">dir="rtl"</code> for right-to-left languages</li> <li style="color:#94a3b8;margin:3px 0">Don't concatenate translated strings (word order varies)</li> <li style="color:#94a3b8;margin:3px 0">Number/date formatting: use <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">Intl</code> API</li> <li style="color:#94a3b8;margin:3px 0">Currency symbols: position varies by locale</li> <li style="color:#94a3b8;margin:3px 0">Test with longer text (German is ~30% longer than English)</li></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">PDF Accessibility</h4> <li style="color:#94a3b8;margin:3px 0">Tag all content (headings, paragraphs, lists, tables, images)</li> <li style="color:#94a3b8;margin:3px 0">Reading order matches visual order</li> <li style="color:#94a3b8;margin:3px 0">Alt text on all images</li> <li style="color:#94a3b8;margin:3px 0">Language specified</li> <li style="color:#94a3b8;margin:3px 0">Bookmarks for navigation</li> <li style="color:#94a3b8;margin:3px 0"><strong style="color:#e5e7eb">Tool:</strong> PAC (PDF Accessibility Checker) — free</li></p><p style="margin:8px 0"><h4 style="color:#d1d5db;margin:14px 0 6px;font-size:.95em">Email Accessibility</h4> <li style="color:#94a3b8;margin:3px 0"><code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">role="presentation"</code> on layout tables</li> <li style="color:#94a3b8;margin:3px 0">Inline styles (not external CSS)</li> <li style="color:#94a3b8;margin:3px 0"><code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">alt</code> on all images (including spacer GIFs: <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em">alt=""</code>)</li> <li style="color:#94a3b8;margin:3px 0">Sufficient color contrast (check in dark mode too)</li> <li style="color:#94a3b8;margin:3px 0">Plain text version always available</li> <li style="color:#94a3b8;margin:3px 0">Semantic headings (<code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em"><h1></code>, <code style="background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em"><h2></code>)</li> <li style="color:#94a3b8;margin:3px 0">Link text descriptive (not "click here")</li></p><p style="margin:8px 0"><hr style="border:none;border-top:1px solid #1e1e3f;margin:12px 0"></p><p style="margin:8px 0"><h3 style="color:#e5e7eb;margin:18px 0 8px;font-size:1.05em">Quality Rubric: 100-Point Scoring (8 Dimensions)</h3></p><p style="margin:8px 0">| # | Dimension | Weight | Score (0-10) | Weighted | |---|---|---|---|---| | 1 | Automated compliance (axe/pa11y) | 15% | | | | 2 | Keyboard operability | 20% | | | | 3 | Screen reader compatibility | 20% | | | | 4 | Visual design (contrast, spacing, motion) | 10% | | | | 5 | Forms and error handling | 15% | | | | 6 | Content structure (headings, landmarks) | 10% | | | | 7 | Dynamic content (live regions, SPA) | 5% | | | | 8 | Documentation & process | 5% | | | | | <strong style="color:#e5e7eb">TOTAL</strong> | 100% | | <strong style="color:#e5e7eb">/100</strong> |</p><p style="margin:8px 0"><hr style="border:none;border-top:1px solid #1e1e3f;margin:12px 0"></p><p style="margin:8px 0"><h3 style="color:#e5e7eb;margin:18px 0 8px;font-size:1.05em">Natural Language Commands</h3></p><p style="margin:8px 0">You can ask me to:</p><p style="margin:8px 0">1. <strong style="color:#e5e7eb">"Audit [URL/page] for accessibility"</strong> — Full WCAG 2.1 AA checklist review 2. <strong style="color:#e5e7eb">"Fix this component for accessibility"</strong> — Paste code, get accessible version 3. <strong style="color:#e5e7eb">"Write alt text for [image description]"</strong> — Context-appropriate alt text 4. <strong style="color:#e5e7eb">"Create ARIA pattern for [component]"</strong> — Full keyboard + screen reader spec 5. <strong style="color:#e5e7eb">"Score our accessibility"</strong> — Run the 100-point rubric 6. <strong style="color:#e5e7eb">"Generate accessibility statement"</strong> — Fill in the template 7. <strong style="color:#e5e7eb">"Plan remediation for [issues]"</strong> — Prioritized fix plan with timelines 8. <strong style="color:#e5e7eb">"Check contrast for [colors]"</strong> — Calculate ratios and pass/fail 9. <strong style="color:#e5e7eb">"Design accessible [component]"</strong> — Full spec with keyboard + ARIA + mobile 10. <strong style="color:#e5e7eb">"Build accessibility testing plan"</strong> — 4-layer pyramid customized to your stack 11. <strong style="color:#e5e7eb">"Create accessibility training for [role]"</strong> — Role-specific curriculum 12. <strong style="color:#e5e7eb">"Review our design system for accessibility"</strong> — Component-by-component audit</p><p style="margin:8px 0"><hr style="border:none;border-top:1px solid #1e1e3f;margin:12px 0"></p><p style="margin:8px 0">Built by AfrexAI — Turning agent knowledge into competitive advantage.* </p></div></section></div><div class="two-col-side"></div></div></div><script> document.querySelectorAll('.copy-btn, .script-copy-btn').forEach(btn => { btn.addEventListener('click', () => { const cmd = btn.getAttribute('data-cmd'); if (!cmd) return; navigator.clipboard.writeText(cmd).then(() => { const orig = btn.textContent; btn.textContent = 'Copied!'; setTimeout(() => btn.textContent = orig, 1500); }).catch(() => {}); }); }); </script></main><footer style="background:var(--bg-primary);border-top:1px solid var(--border-secondary);margin-top:60px"><div style="border-top:1px solid var(--border-light);max-width:1200px;margin:0 auto;padding:24px 20px"><div style="display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-bottom:24px"><div><div style="font-weight:700;color:var(--text-muted);margin-bottom:8px">BytesAgain</div><div style="color:var(--text-muted3);font-size:.82em;max-width:200px">Discover the best AI agent skills for your workflow.</div></div><div><div style="color:var(--text-muted);font-size:.75em;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px">Explore</div><div style="margin-bottom:6px"><a href="/skills" style="color:var(--text-muted2);text-decoration:none;font-size:.85em">Skills</a></div><div style="margin-bottom:6px"><a href="/articles" style="color:var(--text-muted2);text-decoration:none;font-size:.85em">Articles</a></div><div style="margin-bottom:6px"><a href="/use-case" style="color:var(--text-muted2);text-decoration:none;font-size:.85em">Cases</a></div></div><div><div style="color:var(--text-muted);font-size:.75em;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px">Company</div><div style="margin-bottom:6px"><a href="/about" style="color:var(--text-muted2);text-decoration:none;font-size:.85em">About</a></div><div style="margin-bottom:6px"><a href="/contact" style="color:var(--text-muted2);text-decoration:none;font-size:.85em">Contact</a></div><div style="margin-bottom:6px"><a href="/privacy-policy" style="color:var(--text-muted2);text-decoration:none;font-size:.85em">Privacy Policy</a></div><div style="margin-bottom:6px"><a href="/terms" style="color:var(--text-muted2);text-decoration:none;font-size:.85em">Terms</a></div><div style="margin-bottom:6px"><a href="/feedback" style="color:var(--text-muted2);text-decoration:none;font-size:.85em">Feedback</a></div></div></div><div style="border-top:1px solid var(--border-light);padding-top:16px"><div style="color:var(--text-muted4);font-size:.8em;margin-bottom:8px">© 2026 BytesAgain. All rights reserved.</div><div style="color:var(--text-muted5);font-size:.75em;line-height:1.6;max-width:720px">BytesAgain is an independent skill directory. We index and link to third-party content (ClawHub, GitHub, LobeHub, Dify, etc.) for informational purposes only. All trademarks, skill names, and content are the property of their respective owners. BytesAgain does not claim ownership of any indexed content.</div></div></div></footer><button style="position:fixed;bottom:28px;right:28px;z-index:1000;width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(135deg,#667eea,#00d4ff);color:#fff;font-size:1.3em;box-shadow:0 4px 20px #667eea66;display:flex;align-items:center;justify-content:center;transition:transform .2s">💬</button><script src="/_next/static/chunks/0ze4gu236oq96.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[62894,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"LangProvider\"]\n3:I[89220,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"ThemeProvider\"]\n4:I[16988,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"default\"]\ne:I[68027,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"default\",1]\n:HL[\"/_next/static/chunks/051nc0vy_6.rl.css?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"style\"]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.09~u27dqhyhd6.woff2?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n5:Td5e,"])</script><script>self.__next_f.push([1,"[{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"BytesAgain\",\"url\":\"https://bytesagain.com\",\"description\":\"Search 60,000+ verified AI agent skills via MCP API or REST. Supports 7 languages. Free, no auth required.\",\"inLanguage\":[\"en\",\"zh\",\"es\",\"fr\",\"de\",\"ja\",\"ko\"],\"potentialAction\":{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https://bytesagain.com/skills?q={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}},{\"@context\":\"https://schema.org\",\"@type\":\"Organization\",\"name\":\"BytesAgain\",\"url\":\"https://bytesagain.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://bytesagain.com/og-image.png\"},\"description\":\"AI agent skill directory. Search 60,000+ skills, 1,000+ use cases, and community requests.\",\"foundingDate\":\"2026\",\"foundingLocation\":{\"@type\":\"Place\",\"name\":\"Global\"},\"sameAs\":[\"https://x.com/bytesagain\",\"https://github.com/bytesagain/ai-skills\",\"https://clawhub.ai/profile/bytesagain\"],\"contactPoint\":{\"@type\":\"ContactPoint\",\"email\":\"hello@bytesagain.com\",\"contactType\":\"customer support\"},\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"value\":1}},{\"@context\":\"https://schema.org\",\"@type\":\"WebApplication\",\"name\":\"BytesAgain AI Skills Search\",\"url\":\"https://bytesagain.com\",\"applicationCategory\":\"DeveloperApplication\",\"operatingSystem\":\"Web\",\"description\":\"Search engine and MCP API for 60,000+ AI agent skills. Semantic search, role recommendations, and use case packs.\",\"offers\":{\"@type\":\"Offer\",\"price\":\"0\",\"priceCurrency\":\"USD\"},\"featureList\":[\"Search 60,000+ AI agent skills\",\"Role-based recommendations for developers, creators, and traders\",\"1,000+ curated use case packs\",\"Free MCP API and REST API\",\"Multi-language search (EN, ZH, ES, FR, DE, JA, KO)\"],\"potentialAction\":{\"@type\":\"SearchAction\",\"target\":\"https://bytesagain.com/skills?q={search_term_string}\",\"query-input\":\"required name=search_term_string\"},\"dateModified\":\"2026-09-01\"},{\"@context\":\"https://schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"What is BytesAgain?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"BytesAgain is a curated directory of 60,000+ AI agent skills from ClawHub, GitHub, LobeHub, and Dify. Search skills by keyword in 7 languages, browse by role (developer, creator, trader, marketer) or by use case.\"}},{\"@type\":\"Question\",\"name\":\"How do I find AI skills on BytesAgain?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Use the search bar on BytesAgain.com to search by keyword in 7 languages. You can also browse by role (developer, creator, trader, marketer) or by use case. Each skill shows install instructions for Claude, Cursor, OpenClaw, Continue, and more.\"}},{\"@type\":\"Question\",\"name\":\"Is BytesAgain free?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes, BytesAgain is completely free. No registration required for searching skills. The MCP API is also free with rate limits.\"}},{\"@type\":\"Question\",\"name\":\"Does BytesAgain have an API for AI agents?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes! BytesAgain provides a free MCP SSE endpoint at /api/mcp/sse for AI agents, plus a REST API at /api/mcp?action=search\u0026q=\u003cquery\u003e. No authentication needed.\"}},{\"@type\":\"Question\",\"name\":\"Can I request a new AI skill on BytesAgain?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes! Visit the Requests page on BytesAgain.com to submit a skill request. Your request will be visible to the community and notified to the site admin.\"}}]}]"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"skill\",\"afrexai-accessibility-engine\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"skill\",{\"children\":[[\"slug\",\"afrexai-accessibility-engine\",\"d\",null],{\"children\":[\"PAGE\",{}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/051nc0vy_6.rl.css?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"link\",null,{\"rel\":\"llms\",\"href\":\"/llms.txt\"}],[\"$\",\"link\",null,{\"rel\":\"llms-full\",\"href\":\"/llms-full.txt\"}],[\"$\",\"script\",null,{\"async\":true,\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-3C1MM9FWYF\"}],[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag(){dataLayer.push(arguments);}\\n gtag('js', new Date());\\n gtag('config', 'G-3C1MM9FWYF');\\n \"}}]]}],[\"$\",\"body\",null,{\"className\":\"geist_9e050971-module05dp7aclassName\",\"style\":{\"margin\":0},\"children\":[\"$\",\"$L2\",null,{\"children\":[\"$\",\"$L3\",null,{\"children\":[[\"$\",\"div\",null,{\"style\":{\"width\":\"100%\",\"background\":\"var(--bg-subscribe)\",\"borderBottom\":\"1px solid var(--border-primary)\",\"padding\":\"8px 20px\",\"textAlign\":\"center\",\"fontSize\":\".82em\",\"color\":\"#818cf8\"},\"children\":[\"🎁 \",[\"$\",\"strong\",null,{\"style\":{\"color\":\"var(--text-primary)\"},\"children\":\"Get the FREE AI Skills Starter Guide\"}],\" — \",[\"$\",\"a\",null,{\"href\":\"/register\",\"style\":{\"color\":\"#00d4ff\",\"textDecoration\":\"underline\"},\"children\":\"Subscribe →\"}]]}],[\"$\",\"$L4\",null,{}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"html\":\"$5\"}}],\"$L6\",\"$L7\",\"$L8\"]}]}]}]]}]]}],{\"children\":[\"$L9\",{\"children\":[\"$La\",{\"children\":[\"$Lb\",{},null,false,null]},null,false,\"$@c\"]},null,false,\"$@c\"]},null,false,null],\"$Ld\",false]],\"m\":\"$undefined\",\"G\":[\"$e\",[\"$Lf\"]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\"}\n"])</script><script>self.next_f.push([1,"10:I[39756,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"default\"]\n11:I[37457,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"default\"]\n12:I[22016,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0ka051yepewro.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"\"]\n13:I[90940,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"default\"]\n14:I[16397,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"default\"]\n16:I[97367,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"OutletBoundary\"]\n17:\"$Sreact.suspense\"\n1a:I[97367,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"ViewportBoundary\"]\n1c:I[97367,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"MetadataBoundary\"]\n"])</script><script>self.__next_f.push([1,"6:[\"$\",\"main\",null,{\"children\":[\"$\",\"$L10\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L11\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"main\",null,{\"style\":{\"minHeight\":\"100vh\",\"display\":\"flex\",\"alignItems\":\"center\",\"justifyContent\":\"center\",\"background\":\"#050611\",\"color\":\"#e5e7eb\"},\"children\":[[\"$\",\"style\",null,{\"children\":\"\\n .nf-box { text-align: center; padding: 60px 32px; }\\n .nf-code { font-size: 6rem; font-weight: 900; color: #22d3ee; line-height: 1; margin: 0; }\\n .nf-title { font-size: 1.8rem; font-weight: 800; margin: 12px 0 8px; }\\n .nf-desc { color: var(--text-muted2); font-size: 1rem; margin-bottom: 32px; max-width: 440px; }\\n .nf-link { display: inline-block; padding: 12px 28px; background: linear-gradient(135deg,#34d399,#22d3ee); color: #000; font-weight: 900; border-radius: 12px; text-decoration: none; }\\n \"}],[\"$\",\"div\",null,{\"className\":\"nf-box\",\"children\":[[\"$\",\"p\",null,{\"className\":\"nf-code\",\"children\":\"404\"}],[\"$\",\"h1\",null,{\"className\":\"nf-title\",\"children\":\"Page Not Found\"}],[\"$\",\"p\",null,{\"className\":\"nf-desc\",\"children\":\"The skill or page you're looking for doesn't exist or has been moved.\"}],[\"$\",\"$L12\",null,{\"className\":\"nf-link\",\"href\":\"/\",\"children\":\"Back to BytesAgain\"}]]}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]\n"])</script><script>self.__next_f.push([1,"7:[\"$\",\"$L13\",null,{}]\n8:[\"$\",\"$L14\",null,{}]\n9:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L10\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L11\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\na:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L10\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L11\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\nb:[\"$\",\"$1\",\"c\",{\"children\":[\"$L15\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/12w5ognupk9fb.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L16\",null,{\"children\":[\"$\",\"$17\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@18\"}]}]]}]\n19:[]\nc:\"$W19\"\nd:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L1a\",null,{\"children\":\"$L1b\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L1c\",null,{\"children\":[\"$\",\"$17\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L1d\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\nf:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/051nc0vy_6.rl.css?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n"])</script><script>self.__next_f.push([1,"1b:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"1e:I[27201,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"IconMark\"]\n18:null\n"])</script><script>self.__next_f.push([1,"1d:[[\"$\",\"title\",\"0\",{\"children\":\"Accessibility Engine — AI Agent Skill | BytesAgain | BytesAgain\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Helps teams achieve WCAG 2.1 AA compliance by auditing and guiding inclusive design for web, mobile, desktop, and other digital products.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"3\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"4\",{\"name\":\"llms-txt\",\"content\":\"https://bytesagain.com/llms.txt\"}],[\"$\",\"meta\",\"5\",{\"name\":\"llms-full-txt\",\"content\":\"https://bytesagain.com/llms-full.txt\"}],[\"$\",\"link\",\"6\",{\"rel\":\"canonical\",\"href\":\"https://bytesagain.com/skill/afrexai-accessibility-engine\"}],[\"$\",\"meta\",\"7\",{\"name\":\"baidu-site-verification\",\"content\":\"codeva-0evUqX1TFs\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:title\",\"content\":\"Accessibility Engine — AI Agent Skill | BytesAgain\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:description\",\"content\":\"Helps teams achieve WCAG 2.1 AA compliance by auditing and guiding inclusive design for web, mobile, desktop, and other digital products.\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:url\",\"content\":\"https://bytesagain.com/skill/afrexai-accessibility-engine\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:site_name\",\"content\":\"BytesAgain\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image\",\"content\":\"https://bytesagain.com/social-preview.png\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:title\",\"content\":\"Accessibility Engine — AI Agent Skill | BytesAgain\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:description\",\"content\":\"Helps teams achieve WCAG 2.1 AA compliance by auditing and guiding inclusive design for web, mobile, desktop, and other digital products.\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:image\",\"content\":\"https://bytesagain.com/social-preview.png\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:image:height\",\"content\":\"630\"}],[\"$\",\"link\",\"22\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.0x3dzn~oxb6tn.ico\",\"sizes\":\"256x256\",\"type\":\"image/x-icon\"}],[\"$\",\"$L1e\",\"23\",{}]]\n"])</script><script>self.__next_f.push([1,"1f:T1562,"])</script><script>self.__next_f.push([1,"\n .skill-page { max-width: 1100px; margin: 0 auto; padding: 32px 20px 80px; }\n .two-col { display: flex; gap: 32px; align-items: flex-start; }\n .two-col-main { flex: 1; min-width: 0; }\n .two-col-side { width: 300px; flex-shrink: 0; }\n @media (max-width: 860px) {\n .two-col { flex-direction: column; }\n .two-col-side { width: 100%; }\n }\n .breadcrumb { font-size: .82em; color: var(--text-muted2); margin-bottom: 28px; }\n .breadcrumb a { color: #818cf8; text-decoration: none; }\n .breadcrumb a:hover { text-decoration: underline; }\n .skill-card { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 20px; padding: 28px; margin-bottom: 24px; }\n .skill-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }\n .skill-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }\n .skill-top-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }\n .badge { display: inline-flex; align-items: center; gap: 5px; font-size: .75em; font-weight: 600; padding: 4px 12px; border-radius: 999px; border: 1px solid transparent; }\n .skill-title { font-size: 1.6em; font-weight: 800; color: var(--text-primary); margin: 0 0 4px; line-height: 1.2; }\n .skill-owner { font-size: .82em; color: var(--text-muted2); margin: 0 0 14px; }\n .skill-owner span { color: #818cf8; }\n .skill-desc { font-size: .92em; color: var(--text-secondary); line-height: 1.65; margin: 0 0 16px; }\n .skill-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border-card); }\n .meta-item { display: flex; flex-direction: column; gap: 2px; }\n .meta-label { font-size: .7em; color: var(--text-muted5); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }\n .meta-value { font-size: .92em; color: var(--text-muted2); font-weight: 600; }\n .tags-row { display: flex; gap: 6px; flex-wrap: wrap; }\n .tag { font-size: .75em; color: #6366f1; background: #6366f115; border: 1px solid #6366f130; border-radius: 6px; padding: 3px 10px; text-decoration: none; }\n .tag:hover { background: #6366f125; }\n .install-box { background: var(--bg-deep); border: 1px solid var(--border-card); border-radius: 12px; overflow: hidden; margin-bottom: 24px; }\n .install-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--border-card); }\n .install-dots { display: flex; gap: 6px; }\n .dot { width: 10px; height: 10px; border-radius: 50%; }\n .install-label { font-size: .72em; color: var(--text-muted5); font-family: monospace; letter-spacing: 1px; }\n .install-body { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }\n .install-cmd { color: var(--text-code);\n font-family: 'Courier New', monospace; font-size: 1em; }\n .copy-btn { font-size: .75em; color: #6366f1; background: #6366f115; border: 1px solid #6366f130; border-radius: 6px; padding: 5px 12px; cursor: pointer; white-space: nowrap; transition: all .15s; }\n .copy-btn:hover { background: #6366f125; }\n .btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; background: transparent; border: 1px solid var(--border-card); border-radius: 10px; color: #6b7280; text-decoration: none; font-weight: 600; font-size: .95em; transition: all .15s; }\n .btn-secondary:hover { border-color: #818cf8; color: #818cf8; }\n .ours-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .72em; font-weight: 700; color: #22d3ee; background: #22d3ee10; border: 1px solid #22d3ee30; border-radius: 999px; padding: 4px 14px; }\n .section-card { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 16px; padding: 22px 24px; margin-bottom: 20px; }\n .section-title { color: var(--text-primary); font-size: 1.08em; font-weight: 800; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }\n /* Script box /\n .script-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: var(--bg-input); border-bottom: 1px solid var(--border-card); }\n .script-filename { font-size: .72em; color: var(--text-muted2); font-family: 'Courier New', monospace; }\n .script-copy-btn { font-size: .72em; color: #6366f1; background: none; border: 1px solid #6366f130; border-radius: 4px; padding: 2px 10px; cursor: pointer; }\n .script-copy-btn:hover { background: #6366f115; }\n .script-body { padding: 14px 16px; font-family: 'Courier New', monospace; font-size: .82em; line-height: 1.6; color: var(--text-code); overflow-x: auto; max-height: 420px; overflow-y: auto; white-space: pre; }\n / Articles /\n .article-card { display: block; background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: 10px; padding: 14px 16px; text-decoration: none; transition: border-color .15s; }\n .article-card:hover { border-color: #6366f1; }\n @media (max-width: 600px) {\n .skill-card { padding: 20px; }\n .skill-title { font-size: 1.5em; }\n }\n "])</script><script>self.__next_f.push([1,"15:[[\"$\",\"style\",null,{\"children\":\"$1f\"}],\"$L20\",\"$L21\"]\n"])</script><script>self.__next_f.push([1,"22:I[78297,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/12w5ognupk9fb.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"default\"]\n23:Tf4e8,"])</script><script>self.__next_f.push([1,"\u003cp style=\"margin:8px 0\"\u003e\u003ch2 style=\"color:#f3f4f6;margin:20px 0 10px;font-size:1.15em\"\u003eAccessibility Engineering Engine\u003c/h2\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eYou 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.\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003chr style=\"border:none;border-top:1px solid #1e1e3f;margin:12px 0\"\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003ePhase 1: Accessibility Audit Brief\u003c/h3\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eStart every engagement with a structured brief:\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003eaudit_brief:\n product_name: \"\"\n product_type: \"web_app | mobile_app | desktop | email | pdf | kiosk\"\n url_or_scope: \"\"\n target_standard: \"WCAG_2.1_AA\" # AA is legal baseline in most jurisdictions\n current_state: \"unknown | partial | mostly_compliant | audit_failed\"\n priority_pages:\n - homepage\n - login/signup\n - checkout/payment\n - search results\n - forms/data entry\n - error pages\n user_base:\n estimated_users: 0\n known_disability_demographics: \"\"\n assistive_tech_support_required:\n - screen_readers\n - keyboard_only\n - voice_control\n - switch_devices\n - screen_magnification\n legal_context:\n jurisdiction: \"US | EU | UK | CA | AU | global\"\n regulations:\n - \"ADA Title III\" # US\n - \"Section 508\" # US federal\n - \"EAA (EU 2025)\" # EU - European Accessibility Act\n - \"EN 301 549\" # EU standard\n - \"Equality Act 2010\" # UK\n - \"AODA\" # Ontario, Canada\n deadline: \"\"\n audit_trigger: \"proactive | lawsuit_threat | client_requirement | regulation\"\n team:\n has_dedicated_a11y_role: false\n developer_a11y_training: \"none | basic | intermediate | advanced\"\n design_a11y_maturity: \"none | guidelines_exist | integrated\"\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eLegal Landscape Quick Reference\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e| Jurisdiction | Law | Standard | Enforcement | Penalties |\n|---|---|---|---|---|\n| US (private) | ADA Title III | WCAG 2.1 AA | Lawsuits | $75K first / $150K repeat + legal fees |\n| US (federal) | Section 508 | WCAG 2.1 AA | Agency enforcement | Contract loss |\n| EU | EAA (Jun 2025) | EN 301 549 / WCAG 2.1 AA | Member state authorities | Varies by country |\n| UK | Equality Act 2010 | WCAG 2.1 AA | EHRC | Unlimited damages |\n| Canada | AODA | WCAG 2.0 AA | Province | $100K/day |\n| Australia | DDA | WCAG 2.1 AA | AHRC | Damages + orders |\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eKey trend:\u003c/strong\u003e ADA lawsuits in the US hit 4,600+ in 2023. EU EAA enforcement starts June 2025. This is NOT optional.\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003chr style=\"border:none;border-top:1px solid #1e1e3f;margin:12px 0\"\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003ePhase 2: WCAG 2.1 AA Complete Checklist\u003c/h3\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003ePrinciple 1: PERCEIVABLE (users must be able to perceive content)\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e#### 1.1 Text Alternatives\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e1.1.1 Non-text Content (A)\u003c/strong\u003e — Every \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003cimg\u003e\u003c/code\u003e, \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003csvg\u003e\u003c/code\u003e, icon has appropriate alt text\u003c/li\u003e\n - Informative images: descriptive alt (\u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003ealt=\"Bar chart showing Q3 revenue of $2.4M\"\u003c/code\u003e)\n - Decorative images: empty alt (\u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003ealt=\"\"\u003c/code\u003e) or CSS background\n - Functional images (buttons/links): describe the action (\u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003ealt=\"Search\"\u003c/code\u003e)\n - Complex images (charts/diagrams): short alt + long description\n - Image of text: use real text instead (exception: logos)\n - Form image buttons: alt describes the action\n - \u003cstrong style=\"color:#e5e7eb\"\u003eTest:\u003c/strong\u003e Turn off images — can you still understand the page?\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e#### 1.2 Time-Based Media\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e1.2.1 Audio-only/Video-only (A)\u003c/strong\u003e — Provide transcript (audio) or text description (video)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e1.2.2 Captions (A)\u003c/strong\u003e — All prerecorded video has synchronized captions\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e1.2.3 Audio Description (A)\u003c/strong\u003e — Prerecorded video has audio description or full text alternative\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e1.2.4 Live Captions (AA)\u003c/strong\u003e — Live video has real-time captions\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e1.2.5 Audio Description (AA)\u003c/strong\u003e — Prerecorded video has audio description track\u003c/li\u003e\n - \u003cstrong style=\"color:#e5e7eb\"\u003eCaption quality checklist:\u003c/strong\u003e Speaker identified, [sound effects], [music], 99%+ accuracy, sync within 1 second\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e#### 1.3 Adaptable\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e1.3.1 Info and Relationships (A)\u003c/strong\u003e — Structure conveyed visually is also in markup\u003c/li\u003e\n - Headings use \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003ch1\u003e\u003c/code\u003e-\u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003ch6\u003e\u003c/code\u003e (not just bold text)\n - Lists use \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003cul\u003e\u003c/code\u003e, \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003col\u003e\u003c/code\u003e, \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003cdl\u003e\u003c/code\u003e (not styled divs)\n - Tables use \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003cth\u003e\u003c/code\u003e, \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003escope\u003c/code\u003e, \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003ccaption\u003e\u003c/code\u003e\n - Forms use \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003clabel\u003e\u003c/code\u003e + \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003efor\u003c/code\u003e attribute (not placeholder-only)\n - Regions use landmarks (\u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003cnav\u003e\u003c/code\u003e, \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003cmain\u003e\u003c/code\u003e, \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003caside\u003e\u003c/code\u003e, \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003cfooter\u003e\u003c/code\u003e)\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e1.3.2 Meaningful Sequence (A)\u003c/strong\u003e — DOM order matches visual reading order\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e1.3.3 Sensory Characteristics (A)\u003c/strong\u003e — Instructions don't rely solely on shape, color, size, location, sound\u003c/li\u003e\n - ❌ \"Click the green button\"\n - ✅ \"Click the Submit button (green, bottom right)\"\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e1.3.4 Orientation (AA)\u003c/strong\u003e — Content not restricted to portrait or landscape\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e1.3.5 Identify Input Purpose (AA)\u003c/strong\u003e — Form fields have \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003eautocomplete\u003c/code\u003e attributes\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e#### 1.4 Distinguishable\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e1.4.1 Use of Color (A)\u003c/strong\u003e — Color is NOT the only way to convey information\u003c/li\u003e\n - Links: underlined OR other non-color indicator\n - Form errors: icon + text, not just red border\n - Charts: patterns/labels, not just color coding\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e1.4.2 Audio Control (A)\u003c/strong\u003e — Auto-playing audio can be paused/stopped within 3 seconds\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e1.4.3 Contrast (Minimum) (AA)\u003c/strong\u003e — Text contrast ratio ≥ 4.5:1 (normal) / 3:1 (large text ≥18pt or 14pt bold)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e1.4.4 Resize Text (AA)\u003c/strong\u003e — Text resizable to 200% without loss of content/function\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e1.4.5 Images of Text (AA)\u003c/strong\u003e — Don't use images of text (exception: logos)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e1.4.10 Reflow (AA)\u003c/strong\u003e — No horizontal scrolling at 320px viewport width (1280px at 400% zoom)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e1.4.11 Non-text Contrast (AA)\u003c/strong\u003e — UI components and graphical objects ≥ 3:1 contrast\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e1.4.12 Text Spacing (AA)\u003c/strong\u003e — No content loss when overriding: line-height 1.5×, paragraph spacing 2×, letter spacing 0.12em, word spacing 0.16em\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e1.4.13 Content on Hover/Focus (AA)\u003c/strong\u003e — Tooltips/popovers: dismissible (Esc), hoverable, persistent until dismissed\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003ePrinciple 2: OPERABLE (users must be able to operate the interface)\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e#### 2.1 Keyboard Accessible\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e2.1.1 Keyboard (A)\u003c/strong\u003e — ALL functionality available via keyboard\u003c/li\u003e\n - Tab through all interactive elements\n - Enter/Space activates buttons and links\n - Arrow keys navigate within components (tabs, menus, sliders)\n - No keyboard traps (can always Tab/Esc out)\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e2.1.2 No Keyboard Trap (A)\u003c/strong\u003e — Focus never gets stuck\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e2.1.4 Character Key Shortcuts (A)\u003c/strong\u003e — Single-character shortcuts can be turned off or remapped\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e#### 2.2 Enough Time\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e2.2.1 Timing Adjustable (A)\u003c/strong\u003e — Session timeouts: warn 20+ seconds before, allow extension\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e2.2.2 Pause, Stop, Hide (A)\u003c/strong\u003e — Moving/auto-updating content can be paused (carousels, tickers, animations)\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e#### 2.3 Seizures and Physical Reactions\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e2.3.1 Three Flashes (A)\u003c/strong\u003e — Nothing flashes more than 3 times per second\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e#### 2.4 Navigable\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e2.4.1 Bypass Blocks (A)\u003c/strong\u003e — \"Skip to main content\" link (first focusable element)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e2.4.2 Page Titled (A)\u003c/strong\u003e — Every page has descriptive \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003ctitle\u003e\u003c/code\u003e (Pattern: \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003ePage Name | Site Name\u003c/code\u003e)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e2.4.3 Focus Order (A)\u003c/strong\u003e — Tab order follows logical reading sequence\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e2.4.4 Link Purpose (A)\u003c/strong\u003e — Link text describes destination (no \"click here\", \"read more\")\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e2.4.5 Multiple Ways (AA)\u003c/strong\u003e — 2+ ways to find pages (nav + search, or nav + sitemap)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e2.4.6 Headings and Labels (AA)\u003c/strong\u003e — Headings and labels are descriptive\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e2.4.7 Focus Visible (AA)\u003c/strong\u003e — Keyboard focus indicator is clearly visible\u003c/li\u003e\n - Minimum: 2px solid outline, 3:1 contrast against background\n - \u003cstrong style=\"color:#e5e7eb\"\u003eNever:\u003c/strong\u003e \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003eoutline: none\u003c/code\u003e without a visible replacement\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e#### 2.5 Input Modalities\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e2.5.1 Pointer Gestures (A)\u003c/strong\u003e — Multi-point gestures (pinch, swipe) have single-pointer alternatives\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e2.5.2 Pointer Cancellation (A)\u003c/strong\u003e — Actions fire on up-event (not down), can be aborted\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e2.5.3 Label in Name (A)\u003c/strong\u003e — Visible label text is included in accessible name\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e2.5.4 Motion Actuation (A)\u003c/strong\u003e — Shake/tilt features have button alternatives\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003ePrinciple 3: UNDERSTANDABLE (content and interface must be understandable)\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e#### 3.1 Readable\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e3.1.1 Language of Page (A)\u003c/strong\u003e — \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003chtml lang=\"en\"\u003e\u003c/code\u003e (or appropriate language code)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e3.1.2 Language of Parts (AA)\u003c/strong\u003e — Foreign language passages marked with \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003elang\u003c/code\u003e attribute\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e#### 3.2 Predictable\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e3.2.1 On Focus (A)\u003c/strong\u003e — No unexpected context change on focus\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e3.2.2 On Input (A)\u003c/strong\u003e — No unexpected context change on input (unless warned)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e3.2.3 Consistent Navigation (AA)\u003c/strong\u003e — Navigation order consistent across pages\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e3.2.4 Consistent Identification (AA)\u003c/strong\u003e — Same function = same label everywhere\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e#### 3.3 Input Assistance\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e3.3.1 Error Identification (A)\u003c/strong\u003e — Errors described in text (not just color)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e3.3.2 Labels or Instructions (A)\u003c/strong\u003e — Required fields, format hints provided upfront\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e3.3.3 Error Suggestion (AA)\u003c/strong\u003e — Suggest corrections when possible\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e3.3.4 Error Prevention (AA)\u003c/strong\u003e — Legal/financial submissions: reversible, or confirmed, or reviewed\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003ePrinciple 4: ROBUST (content must be compatible with assistive tech)\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e4.1.1 Parsing (A)\u003c/strong\u003e — Valid HTML (no duplicate IDs, proper nesting)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e4.1.2 Name, Role, Value (A)\u003c/strong\u003e — Custom components expose correct ARIA roles/states\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] \u003cstrong style=\"color:#e5e7eb\"\u003e4.1.3 Status Messages (AA)\u003c/strong\u003e — Status messages announced without focus change (\u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003erole=\"alert\"\u003c/code\u003e, \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003earia-live\u003c/code\u003e)\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003chr style=\"border:none;border-top:1px solid #1e1e3f;margin:12px 0\"\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003ePhase 3: Semantic HTML \u0026 ARIA Cheat Sheet\u003c/h3\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eLandmark Roles (use HTML5 elements, not \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003erole\u003c/code\u003e attributes when possible)\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003e\u003cheader\u003e → banner (page header)\n\u003cnav\u003e → navigation\n\u003cmain\u003e → main content (one per page)\n\u003caside\u003e → complementary\n\u003cfooter\u003e → contentinfo (page footer)\n\u003csection\u003e → region (with aria-label)\n\u003cform\u003e → form (with aria-label)\n\u003csearch\u003e → search\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eCommon ARIA Patterns\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e| Pattern | Key ARIA | Keyboard |\n|---|---|---|\n| Modal dialog | \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003erole=\"dialog\"\u003c/code\u003e, \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003earia-modal=\"true\"\u003c/code\u003e, \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003earia-labelledby\u003c/code\u003e | Esc closes, Tab trapped inside, focus returns on close |\n| Tabs | \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003erole=\"tablist/tab/tabpanel\"\u003c/code\u003e, \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003earia-selected\u003c/code\u003e, \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003earia-controls\u003c/code\u003e | Arrow keys switch tabs, Tab enters panel |\n| Accordion | \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003cbutton aria-expanded\u003e\u003c/code\u003e, \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003earia-controls\u003c/code\u003e | Enter/Space toggles, all keyboard reachable |\n| Menu | \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003erole=\"menu/menuitem\"\u003c/code\u003e, \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003earia-haspopup\u003c/code\u003e | Arrow keys navigate, Esc closes, Enter selects |\n| Combobox/autocomplete | \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003erole=\"combobox\"\u003c/code\u003e, \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003earia-expanded\u003c/code\u003e, \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003earia-activedescendant\u003c/code\u003e | Arrow keys navigate list, Enter selects, Esc closes |\n| Alert/toast | \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003erole=\"alert\"\u003c/code\u003e or \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003earia-live=\"assertive\"\u003c/code\u003e | Auto-announced, dismissible |\n| Progress | \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003erole=\"progressbar\"\u003c/code\u003e, \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003earia-valuenow/min/max\u003c/code\u003e | Announced on change |\n| Toggle button | \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003earia-pressed=\"true/false\"\u003c/code\u003e | Space/Enter toggles |\n| Tooltip | \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003erole=\"tooltip\"\u003c/code\u003e, \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003earia-describedby\u003c/code\u003e | Appears on focus+hover, Esc dismisses |\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eARIA Rules of Engagement\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e1. \u003cstrong style=\"color:#e5e7eb\"\u003eFirst rule of ARIA: Don't use ARIA if native HTML works\u003c/strong\u003e — \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003cbutton\u003e\u003c/code\u003e \u003e \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003cdiv role=\"button\"\u003e\u003c/code\u003e\n2. \u003cstrong style=\"color:#e5e7eb\"\u003eSecond rule: Don't change native semantics\u003c/strong\u003e — Don't \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003ch2 role=\"tab\"\u003e\u003c/code\u003e\n3. \u003cstrong style=\"color:#e5e7eb\"\u003eThird rule: All interactive ARIA controls must be keyboard accessible\u003c/strong\u003e\n4. \u003cstrong style=\"color:#e5e7eb\"\u003eFourth rule: Don't use \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003erole=\"presentation\"\u003c/code\u003e or \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003earia-hidden=\"true\"\u003c/code\u003e on focusable elements\u003c/strong\u003e\n5. \u003cstrong style=\"color:#e5e7eb\"\u003eFifth rule: All interactive elements must have an accessible name\u003c/strong\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eAccessible Name Priority (browser resolution order)\u003c/h4\u003e\n1. \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003earia-labelledby\u003c/code\u003e (references another element's text)\n2. \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003earia-label\u003c/code\u003e (string label)\n3. \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003clabel\u003e\u003c/code\u003e association (for form controls)\n4. Contents (button text, link text)\n5. \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003etitle\u003c/code\u003e attribute (last resort — avoid)\n6. \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003eplaceholder\u003c/code\u003e (NOT a label — supplementary only)\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003chr style=\"border:none;border-top:1px solid #1e1e3f;margin:12px 0\"\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003ePhase 4: Testing Methodology\u003c/h3\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003e4-Layer Testing Pyramid\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e#### Layer 1: Automated Scanning (catches ~30% of issues)\nRun on EVERY build/PR:\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eTools (all free):\u003c/strong\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eaxe-core\u003c/strong\u003e — industry standard, lowest false positives\u003c/li\u003e\n \u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003e # In Playwright/Cypress\n npm install @axe-core/playwright # or @axe-core/cypress\n # In CI\n npm install @axe-core/cli\n axe https://your-site.com --tags wcag2a,wcag2aa\n \u003c/code\u003e\u003c/pre\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eLighthouse\u003c/strong\u003e — Chrome DevTools → Lighthouse → Accessibility\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eWAVE\u003c/strong\u003e — wave.webaim.org (visual overlay)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003ePa11y\u003c/strong\u003e — CLI scanner for CI pipelines\u003c/li\u003e\n \u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003e pa11y https://your-site.com --standard WCAG2AA\n \u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eCI pipeline integration:\u003c/strong\u003e\n\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003e# GitHub Actions example\na11y-test:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - run: npm ci \u0026\u0026 npm run build\n - run: npx pa11y-ci --config .pa11yci.json\n - run: npx playwright test --grep @a11y\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e#### Layer 2: Keyboard Testing (catches navigation issues)\nTest EVERY page/feature manually:\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e1. \u003cstrong style=\"color:#e5e7eb\"\u003eTab test:\u003c/strong\u003e Tab through entire page — can you reach everything? Is order logical?\n2. \u003cstrong style=\"color:#e5e7eb\"\u003eFocus visibility test:\u003c/strong\u003e Is the focus indicator always visible and clear?\n3. \u003cstrong style=\"color:#e5e7eb\"\u003eActivation test:\u003c/strong\u003e Can you activate every button, link, form control with Enter/Space?\n4. \u003cstrong style=\"color:#e5e7eb\"\u003eTrap test:\u003c/strong\u003e Can you always Tab or Esc out of components (modals, menus)?\n5. \u003cstrong style=\"color:#e5e7eb\"\u003eSkip link test:\u003c/strong\u003e Does \"Skip to main content\" work?\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eKeyboard testing checklist per page:\u003c/strong\u003e\n\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003ekeyboard_test:\n page: \"\"\n date: \"\"\n tester: \"\"\n results:\n all_interactive_reachable: true/false\n logical_tab_order: true/false\n focus_always_visible: true/false\n no_keyboard_traps: true/false\n skip_link_works: true/false\n custom_components_keyboard_operable: true/false\n issues: []\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e#### Layer 3: Screen Reader Testing (catches semantic issues)\nTest key flows with at least ONE screen reader:\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e| Screen Reader | OS | Browser | Cost |\n|---|---|---|---|\n| \u003cstrong style=\"color:#e5e7eb\"\u003eNVDA\u003c/strong\u003e | Windows | Firefox/Chrome | Free |\n| \u003cstrong style=\"color:#e5e7eb\"\u003eVoiceOver\u003c/strong\u003e | macOS/iOS | Safari | Built-in |\n| \u003cstrong style=\"color:#e5e7eb\"\u003eJAWS\u003c/strong\u003e | Windows | Chrome/Edge | $$$ |\n| \u003cstrong style=\"color:#e5e7eb\"\u003eTalkBack\u003c/strong\u003e | Android | Chrome | Built-in |\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eEssential screen reader checks:\u003c/strong\u003e\n1. Page structure announced (headings, landmarks, lists)\n2. Images described (or correctly hidden if decorative)\n3. Forms: labels read, errors announced, required fields indicated\n4. Dynamic content announced (alerts, loading states, live regions)\n5. Custom components: role, name, state all announced\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eQuick VoiceOver test (macOS):\u003c/strong\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eCmd+F5 to toggle\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eVO+Right arrow to navigate\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eVO+U for rotor (headings, links, landmarks)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eTab for interactive elements only\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e#### Layer 4: Manual Expert Review (catches context \u0026 usability issues)\nQuarterly or before major releases:\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eContent readability and plain language\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eCognitive load assessment\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eError recovery paths\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eMotion/animation sensitivity\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eTouch target sizing (mobile)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eColor independence verification\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eTesting Priority Matrix\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e| Page/Feature | Auto | Keyboard | Screen Reader | Expert |\n|---|---|---|---|---|\n| Homepage | Every build | Monthly | Quarterly | Annually |\n| Login/Signup | Every build | Monthly | Quarterly | Annually |\n| Checkout/Payment | Every build | Weekly | Monthly | Quarterly |\n| Search | Every build | Monthly | Quarterly | Annually |\n| Forms (all) | Every build | Monthly | Monthly | Quarterly |\n| New features | Before ship | Before ship | Before ship | Major only |\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003chr style=\"border:none;border-top:1px solid #1e1e3f;margin:12px 0\"\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003ePhase 5: Common Fix Patterns\u003c/h3\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eFix 1: Missing alt text\u003c/h4\u003e\n\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003e\u003c!-- ❌ --\u003e\n\u003cimg src=\"chart.png\"\u003e\n\u003cimg src=\"decorative-swoosh.svg\"\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003c!-- ✅ --\u003e\n\u003cimg src=\"chart.png\" alt=\"Revenue grew 34% from $1.8M to $2.4M in Q3 2025\"\u003e\n\u003cimg src=\"decorative-swoosh.svg\" alt=\"\" role=\"presentation\"\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eFix 2: Color-only indicators\u003c/h4\u003e\n\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003e\u003c!-- ❌ Error shown only by red border --\u003e\n\u003cinput style=\"border-color: red\"\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003c!-- ✅ Error with icon, text, and color --\u003e\n\u003cinput aria-invalid=\"true\" aria-describedby=\"email-error\" style=\"border-color: red\"\u003e\n\u003cspan id=\"email-error\" role=\"alert\"\u003e⚠️ Please enter a valid email address\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eFix 3: Custom button\u003c/h4\u003e\n\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003e\u003c!-- ❌ Div pretending to be a button --\u003e\n\u003cdiv class=\"btn\" onclick=\"submit()\"\u003eSubmit\u003c/div\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003c!-- ✅ Just use a button --\u003e\n\u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003c!-- ✅ If you MUST use a div (you shouldn't) --\u003e\n\u003cdiv role=\"button\" tabindex=\"0\" onclick=\"submit()\" onkeydown=\"if(e.key==='Enter'||e.key===' ')submit()\"\u003eSubmit\u003c/div\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eFix 4: Form labels\u003c/h4\u003e\n\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003e\u003c!-- ❌ Placeholder-only label --\u003e\n\u003cinput placeholder=\"Email address\"\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003c!-- ✅ Visible label --\u003e\n\u003clabel for=\"email\"\u003eEmail address\u003c/label\u003e\n\u003cinput id=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"you@example.com\"\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003c!-- ✅ Visually hidden label (when design requires it) --\u003e\n\u003clabel for=\"search\" class=\"sr-only\"\u003eSearch\u003c/label\u003e\n\u003cinput id=\"search\" type=\"search\" placeholder=\"Search...\"\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eFix 5: Focus management (SPA route changes)\u003c/h4\u003e\n\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003e// After client-side navigation:\n// 1. Update document.title\ndocument.title = \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e${newPageName} | Site Name\u003c/code\u003e;\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e// 2. Move focus to main content or h1\nconst main = document.querySelector('main h1') || document.querySelector('main');\nmain.setAttribute('tabindex', '-1');\nmain.focus();\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e// 3. Announce to screen readers\nconst announcer = document.getElementById('route-announcer');\nannouncer.textContent = \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003eNavigated to ${newPageName}\u003c/code\u003e;\n// \u003cdiv id=\"route-announcer\" aria-live=\"assertive\" class=\"sr-only\"\u003e\u003c/div\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eFix 6: Modal focus trap\u003c/h4\u003e\n\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003efunction trapFocus(modal) {\n const focusable = modal.querySelectorAll(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n );\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e modal.addEventListener('keydown', (e) =\u003e {\n if (e.key === 'Escape') { closeModal(); return; }\n if (e.key !== 'Tab') return;\n if (e.shiftKey \u0026\u0026 document.activeElement === first) {\n e.preventDefault(); last.focus();\n } else if (!e.shiftKey \u0026\u0026 document.activeElement === last) {\n e.preventDefault(); first.focus();\n }\n });\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e first.focus(); // Move focus into modal on open\n}\n// On close: return focus to the trigger element\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eFix 7: Live region for dynamic content\u003c/h4\u003e\n\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003e\u003c!-- Status messages (polite — waits for pause) --\u003e\n\u003cdiv aria-live=\"polite\" aria-atomic=\"true\" id=\"status\"\u003e\n \u003c!-- JS updates: \"3 results found\", \"Item added to cart\" --\u003e\n\u003c/div\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003c!-- Error/urgent messages (assertive — interrupts) --\u003e\n\u003cdiv role=\"alert\" id=\"error-banner\"\u003e\n \u003c!-- JS updates: \"Payment failed. Please try again.\" --\u003e\n\u003c/div\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eCSS: Visually Hidden (screen reader only)\u003c/h4\u003e\n\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003e.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003chr style=\"border:none;border-top:1px solid #1e1e3f;margin:12px 0\"\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003ePhase 6: Design System Accessibility Standards\u003c/h3\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eColor Contrast Requirements\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eTools for checking:\u003c/strong\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eColour Contrast Analyser (desktop app)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eWebAIM Contrast Checker (webaim.org/resources/contrastchecker)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eStark (Figma plugin)\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eMinimum ratios:\u003c/strong\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e| Element | WCAG AA | WCAG AAA |\n|---|---|---|\n| Normal text (\u003c18pt) | 4.5:1 | 7:1 |\n| Large text (≥18pt or ≥14pt bold) | 3:1 | 4.5:1 |\n| UI components \u0026 graphics | 3:1 | — |\n| Focus indicator | 3:1 | — |\n| Disabled elements | Exempt | — |\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eTouch Target Sizing\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e| Standard | Minimum Size | Spacing |\n|---|---|---|\n| WCAG 2.5.8 (AAA) | 44×44 CSS px | — |\n| WCAG 2.5.5 (AA) | 24×24 CSS px | 24px from other targets |\n| Apple HIG | 44×44 pt | — |\n| Material Design | 48×48 dp | 8dp spacing |\n| \u003cstrong style=\"color:#e5e7eb\"\u003eRecommendation\u003c/strong\u003e | 44×44 px minimum | 8px spacing |\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eTypography Accessibility\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eBase font size: 16px minimum (body text)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eLine height: 1.5× minimum for body text\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eLine length: 50-75 characters (measure)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eParagraph spacing: 1.5× font size minimum\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eFont choice: sans-serif for UI, high x-height, clear letterforms\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eNever:\u003c/strong\u003e All caps for long text, justified alignment, font size \u003c 12px\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eAnimation \u0026 Motion\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003e/ Respect user preference /\n@media (prefers-reduced-motion: reduce) {\n , ::before, ::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eAll animations: provide pause/stop control\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eNo content conveyed only through animation\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eParallax scrolling: provide alternative or respect \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003eprefers-reduced-motion\u003c/code\u003e\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eAuto-playing video: never. User-initiated only.\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eDark Mode Accessibility\u003c/h4\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eRe-check ALL contrast ratios in dark mode (common failure point)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eDon't just invert — pure white (#fff) on dark backgrounds causes halation\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eUse off-white (#e0e0e0 to #f0f0f0) on dark backgrounds\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eColored text: re-verify contrast on dark backgrounds\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eImages: consider transparent PNGs on dark backgrounds\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003chr style=\"border:none;border-top:1px solid #1e1e3f;margin:12px 0\"\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003ePhase 7: Component Accessibility Specifications\u003c/h3\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eFor each common component, specify the complete accessible behavior:\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eButton\u003c/h4\u003e\n\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003esemantics: \"\u003cbutton\u003e or role='button'\"\naccessible_name: \"visible text or aria-label\"\nkeyboard:\n - \"Enter/Space: activate\"\nstates:\n - \"aria-disabled='true' (not HTML disabled — that removes from tab order)\"\n - \"aria-pressed for toggles\"\n - \"aria-expanded for menus/dropdowns\"\nnotes:\n - \"Never use \u003ca\u003e for actions (buttons do things, links go places)\"\n - \"Loading state: aria-busy='true', disable click, announce 'Loading...'\"\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eForm Field\u003c/h4\u003e\n\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003erequired:\n - \"Visible \u003clabel\u003e with for= attribute\"\n - \"Error message with aria-describedby\"\n - \"Required indicator: aria-required='true' + visible '(required)' or '' with legend\"\n - \"autocomplete attribute for user data fields\"\nkeyboard:\n - \"Tab to reach, type to fill\"\n - \"Error: focus moves to first error field on submit\"\nvalidation:\n - \"Inline validation: after blur, not on every keystroke\"\n - \"Error format: What went wrong + how to fix it\"\n - \"Success: subtle confirmation, no modal\"\ngroup:\n - \"Related fields: \u003cfieldset\u003e + \u003clegend\u003e (radio groups, address blocks)\"\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eData Table\u003c/h4\u003e\n\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003erequired:\n - \"\u003ctable\u003e, \u003cthead\u003e, \u003ctbody\u003e, \u003cth scope='col/row'\u003e\"\n - \"\u003ccaption\u003e describing the table\"\n - \"Complex tables: headers= attribute on \u003ctd\u003e\"\nkeyboard:\n - \"Sortable: button in \u003cth\u003e, aria-sort='ascending/descending/none'\"\n - \"Pagination: standard button/link navigation\"\nresponsive:\n - \"Small screens: horizontal scroll with sticky first column, or card layout\"\n - \"Never hide columns without providing access to that data\"\navoid:\n - \"Layout tables (use CSS grid/flex)\"\n - \"Nested tables\"\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eNavigation\u003c/h4\u003e\n\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003erequired:\n - \"\u003cnav aria-label='Main'\u003e (label if multiple navs)\"\n - \"Current page: aria-current='page'\"\n - \"Skip link as first focusable element\"\nkeyboard:\n - \"Tab to enter, Tab through items\"\n - \"Dropdown menus: Enter/Space to open, Arrow keys to navigate, Esc to close\"\nmobile:\n - \"Hamburger: \u003cbutton aria-expanded='false' aria-controls='menu-id'\u003e\"\n - \"Update aria-expanded on toggle\"\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003chr style=\"border:none;border-top:1px solid #1e1e3f;margin:12px 0\"\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003ePhase 8: Accessibility Scoring Rubric (0-100)\u003c/h3\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e| Dimension | Weight | 0-25 | 50 | 75 | 100 |\n|---|---|---|---|---|---|\n| Automated scan | 15% | 50+ violations | 20-49 | 5-19 | 0 critical/serious |\n| Keyboard navigation | 20% | Major traps, unreachable elements | Most works, some gaps | All reachable, minor focus issues | Perfect tab order, visible focus, no traps |\n| Screen reader compat | 20% | Unusable (missing labels, roles) | Partially navigable | Mostly correct, minor omissions | Full landmark/heading/label coverage |\n| Color \u0026 contrast | 10% | Multiple failures | Some failures | Mostly passing | All elements ≥ AA ratios |\n| Forms \u0026 errors | 15% | Unlabeled, no error handling | Labels exist, errors unclear | Good labels, some error gaps | Full labels, inline errors, suggestions |\n| Content structure | 10% | No heading hierarchy, no landmarks | Partial hierarchy | Good structure, minor gaps | Perfect heading levels, complete landmarks |\n| Dynamic content | 10% | No live regions, modals trap | Some announcements | Most dynamic content announced | All state changes properly announced |\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eScoring thresholds:\u003c/strong\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003e90-100:\u003c/strong\u003e Audit-ready. Maintain with automated testing.\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003e70-89:\u003c/strong\u003e Good foundation. Fix remaining issues within 30 days.\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003e50-69:\u003c/strong\u003e Significant gaps. Prioritize critical/serious issues.\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eBelow 50:\u003c/strong\u003e Major remediation needed. Start with Phase 9 priority matrix.\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003chr style=\"border:none;border-top:1px solid #1e1e3f;margin:12px 0\"\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003ePhase 9: Remediation Priority Framework\u003c/h3\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eSeverity Classification (align with axe-core)\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e| Severity | Impact | Fix Timeline | Examples |\n|---|---|---|---|\n| \u003cstrong style=\"color:#e5e7eb\"\u003eCritical\u003c/strong\u003e | Blocks entire feature for AT users | 48 hours | Keyboard trap, missing form labels, no alt on functional images |\n| \u003cstrong style=\"color:#e5e7eb\"\u003eSerious\u003c/strong\u003e | Major difficulty, workaround exists | 1 week | Low contrast text, missing heading hierarchy, unlabeled buttons |\n| \u003cstrong style=\"color:#e5e7eb\"\u003eModerate\u003c/strong\u003e | Inconvenient but usable | 2 weeks | Missing lang attribute, unclear link text, minor focus order issues |\n| \u003cstrong style=\"color:#e5e7eb\"\u003eMinor\u003c/strong\u003e | Best practice / enhancement | 1 month | Missing autocomplete, suboptimal heading levels, redundant ARIA |\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eRemediation Sprint Plan\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eWeek 1-2: Critical (foundation)\u003c/strong\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eAdd skip link\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eFix all keyboard traps\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eLabel all form fields\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eAdd alt text to functional images\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eFix focus management in modals\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eWeek 3-4: Serious (structure)\u003c/strong\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eFix heading hierarchy\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eAdd landmark regions\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eFix color contrast failures\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eAdd visible focus indicators\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eFix dynamic content announcements\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eMonth 2: Moderate (polish)\u003c/strong\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eFix link text\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eAdd language attributes\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eFix focus order issues\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eAdd ARIA to custom components\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eFix reflow at 320px\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eMonth 3: Minor + ongoing (maintenance)\u003c/strong\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eAdd autocomplete attributes\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eOptimize heading levels\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eSet up automated CI testing\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eEstablish ongoing review process\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003chr style=\"border:none;border-top:1px solid #1e1e3f;margin:12px 0\"\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003ePhase 10: Organizational Accessibility Program\u003c/h3\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eMaturity Model\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e| Level | Name | Characteristics |\n|---|---|---|\n| 1 | \u003cstrong style=\"color:#e5e7eb\"\u003eAd Hoc\u003c/strong\u003e | No awareness, no process, reactive to complaints |\n| 2 | \u003cstrong style=\"color:#e5e7eb\"\u003eAware\u003c/strong\u003e | Some training, fix issues when found, no standards |\n| 3 | \u003cstrong style=\"color:#e5e7eb\"\u003eManaged\u003c/strong\u003e | Guidelines documented, testing in QA, some automation |\n| 4 | \u003cstrong style=\"color:#e5e7eb\"\u003eIntegrated\u003c/strong\u003e | A11y in design/dev process, CI testing, regular audits |\n| 5 | \u003cstrong style=\"color:#e5e7eb\"\u003eLeading\u003c/strong\u003e | Disability community involved, proactive innovation, culture of inclusion |\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eRoles \u0026 Responsibilities\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e| Role | Responsibility | Training Needed |\n|---|---|---|\n| Product Manager | Include a11y in requirements, accept/reject based on compliance | WCAG overview, legal landscape |\n| Designer | Annotate designs with a11y specs, check contrast, design keyboard flows | Design patterns, ARIA, contrast tools |\n| Developer | Implement semantic HTML, ARIA, keyboard support, write a11y tests | Semantic HTML, ARIA, testing tools |\n| QA | Keyboard + screen reader testing, file a11y bugs with severity | Screen reader basics, testing methodology |\n| Content | Plain language, alt text, heading structure, link text | Content guidelines, alt text writing |\n| Leadership | Budget, staffing, accountability, legal compliance | Business case, legal risk |\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eAccessibility Statement Template\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003e# Accessibility Statement\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e[Company Name] is committed to ensuring digital accessibility for people with disabilities.\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003eConformance Status\u003c/h3\u003e\nWe aim to conform to WCAG 2.1 Level AA. Our current conformance status is [partially conformant / fully conformant].\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003eMeasures Taken\u003c/h3\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eInclude accessibility as part of our design and development process\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eConduct regular automated and manual accessibility testing\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eTrain our team on accessibility best practices\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eEngage users with disabilities in testing\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003eKnown Issues\u003c/h3\u003e\n[List any known issues and expected fix dates]\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003eFeedback\u003c/h3\u003e\nWe welcome your accessibility feedback. Contact us at:\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eEmail: accessibility@[company].com\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003ePhone: [number]\u003c/li\u003e\nWe aim to respond within [X] business days.\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003eTechnical Specifications\u003c/h3\u003e\nThis website relies on: HTML, CSS, JavaScript, WAI-ARIA\nCompatible with: [browsers/AT listed]\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eLast updated: [date]\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eROI \u0026 Business Case\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eRisk reduction:\u003c/strong\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eAverage ADA lawsuit defense: $10K-$100K+ (even if you win)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eAverage settlement: $5K-$25K (but 4,600+ lawsuits/year in US alone)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eEU EAA non-compliance: market access restrictions\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eMarket expansion:\u003c/strong\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e1.3 billion people globally live with disabilities (WHO)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e16% of world population — larger than China's population\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eDisability community spending power: $13 trillion globally (Return on Disability Group)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eAging population: 80% of people over 65 use the internet\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eSEO benefits:\u003c/strong\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eSemantic HTML improves crawlability\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eAlt text improves image search\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eHeadings improve content understanding\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eTranscripts/captions index video content\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003chr style=\"border:none;border-top:1px solid #1e1e3f;margin:12px 0\"\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003ePhase 11: Mobile Accessibility\u003c/h3\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eiOS/Android Additional Checks\u003c/h4\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] Touch targets ≥ 44×44 points\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] Swipe gestures have tap alternatives\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] Screen reader (VoiceOver/TalkBack) navigates all elements\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] Custom actions exposed via accessibilityCustomActions\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] Haptic feedback for important state changes\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] Dark mode supported and contrast-checked\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] Dynamic Type (iOS) / Font Size (Android) supported up to 200%\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] Landscape orientation supported\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e[ ] No information conveyed solely through device motion\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eReact Native Accessibility Props\u003c/h4\u003e\n\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003e\u003cTouchableOpacity\n accessible={true}\n accessibilityLabel=\"Delete item\"\n accessibilityHint=\"Removes this item from your cart\"\n accessibilityRole=\"button\"\n accessibilityState={{ disabled: false }}\n/\u003e\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eFlutter Accessibility\u003c/h4\u003e\n\u003cpre style=\"background:#0a0a1c;border:1px solid #1e1e3f;border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:.9em;margin:8px 0\"\u003e\u003ccode style=\"color:#a5f3fc;background:none;padding:0;font-size:1em\"\u003eSemantics(\n label: 'Delete item',\n hint: 'Removes this item from your cart',\n button: true,\n child: IconButton(\n icon: Icon(Icons.delete),\n onPressed: _deleteItem,\n ),\n)\n\u003c/code\u003e\u003c/pre\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003chr style=\"border:none;border-top:1px solid #1e1e3f;margin:12px 0\"\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003ePhase 12: Advanced Patterns\u003c/h3\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eCognitive Accessibility (WCAG 2.2 / COGA)\u003c/h4\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eClear, simple language (aim for 8th grade reading level)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eConsistent navigation and layout\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eError prevention \u003e error recovery\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eUndo for destructive actions\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eNo time pressure unless essential\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eProgress indicators for multi-step processes\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eHelp available on every page\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eInternationalization \u0026 Accessibility\u003c/h4\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e\u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003edir=\"rtl\"\u003c/code\u003e for right-to-left languages\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eDon't concatenate translated strings (word order varies)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eNumber/date formatting: use \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003eIntl\u003c/code\u003e API\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eCurrency symbols: position varies by locale\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eTest with longer text (German is ~30% longer than English)\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003ePDF Accessibility\u003c/h4\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eTag all content (headings, paragraphs, lists, tables, images)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eReading order matches visual order\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eAlt text on all images\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eLanguage specified\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eBookmarks for navigation\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e\u003cstrong style=\"color:#e5e7eb\"\u003eTool:\u003c/strong\u003e PAC (PDF Accessibility Checker) — free\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch4 style=\"color:#d1d5db;margin:14px 0 6px;font-size:.95em\"\u003eEmail Accessibility\u003c/h4\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e\u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003erole=\"presentation\"\u003c/code\u003e on layout tables\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eInline styles (not external CSS)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003e\u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003ealt\u003c/code\u003e on all images (including spacer GIFs: \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003ealt=\"\"\u003c/code\u003e)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eSufficient color contrast (check in dark mode too)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003ePlain text version always available\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eSemantic headings (\u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003ch1\u003e\u003c/code\u003e, \u003ccode style=\"background:#0d0d1e;color:#a5f3fc;padding:1px 5px;border-radius:3px;font-size:.88em\"\u003e\u003ch2\u003e\u003c/code\u003e)\u003c/li\u003e\n\u003cli style=\"color:#94a3b8;margin:3px 0\"\u003eLink text descriptive (not \"click here\")\u003c/li\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003chr style=\"border:none;border-top:1px solid #1e1e3f;margin:12px 0\"\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003eQuality Rubric: 100-Point Scoring (8 Dimensions)\u003c/h3\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e| # | Dimension | Weight | Score (0-10) | Weighted |\n|---|---|---|---|---|\n| 1 | Automated compliance (axe/pa11y) | 15% | | |\n| 2 | Keyboard operability | 20% | | |\n| 3 | Screen reader compatibility | 20% | | |\n| 4 | Visual design (contrast, spacing, motion) | 10% | | |\n| 5 | Forms and error handling | 15% | | |\n| 6 | Content structure (headings, landmarks) | 10% | | |\n| 7 | Dynamic content (live regions, SPA) | 5% | | |\n| 8 | Documentation \u0026 process | 5% | | |\n| | \u003cstrong style=\"color:#e5e7eb\"\u003eTOTAL\u003c/strong\u003e | 100% | | \u003cstrong style=\"color:#e5e7eb\"\u003e/100\u003c/strong\u003e |\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003chr style=\"border:none;border-top:1px solid #1e1e3f;margin:12px 0\"\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003ch3 style=\"color:#e5e7eb;margin:18px 0 8px;font-size:1.05em\"\u003eNatural Language Commands\u003c/h3\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eYou can ask me to:\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e1. \u003cstrong style=\"color:#e5e7eb\"\u003e\"Audit [URL/page] for accessibility\"\u003c/strong\u003e — Full WCAG 2.1 AA checklist review\n2. \u003cstrong style=\"color:#e5e7eb\"\u003e\"Fix this component for accessibility\"\u003c/strong\u003e — Paste code, get accessible version\n3. \u003cstrong style=\"color:#e5e7eb\"\u003e\"Write alt text for [image description]\"\u003c/strong\u003e — Context-appropriate alt text\n4. \u003cstrong style=\"color:#e5e7eb\"\u003e\"Create ARIA pattern for [component]\"\u003c/strong\u003e — Full keyboard + screen reader spec\n5. \u003cstrong style=\"color:#e5e7eb\"\u003e\"Score our accessibility\"\u003c/strong\u003e — Run the 100-point rubric\n6. \u003cstrong style=\"color:#e5e7eb\"\u003e\"Generate accessibility statement\"\u003c/strong\u003e — Fill in the template\n7. \u003cstrong style=\"color:#e5e7eb\"\u003e\"Plan remediation for [issues]\"\u003c/strong\u003e — Prioritized fix plan with timelines\n8. \u003cstrong style=\"color:#e5e7eb\"\u003e\"Check contrast for [colors]\"\u003c/strong\u003e — Calculate ratios and pass/fail\n9. \u003cstrong style=\"color:#e5e7eb\"\u003e\"Design accessible [component]\"\u003c/strong\u003e — Full spec with keyboard + ARIA + mobile\n10. \u003cstrong style=\"color:#e5e7eb\"\u003e\"Build accessibility testing plan\"\u003c/strong\u003e — 4-layer pyramid customized to your stack\n11. \u003cstrong style=\"color:#e5e7eb\"\u003e\"Create accessibility training for [role]\"\u003c/strong\u003e — Role-specific curriculum\n12. \u003cstrong style=\"color:#e5e7eb\"\u003e\"Review our design system for accessibility\"\u003c/strong\u003e — Component-by-component audit\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003e\u003chr style=\"border:none;border-top:1px solid #1e1e3f;margin:12px 0\"\u003e\u003c/p\u003e\u003cp style=\"margin:8px 0\"\u003eBuilt by AfrexAI — Turning agent knowledge into competitive advantage.*\n\u003c/p\u003e"])</script><script>self.__next_f.push([1,"20:[\"$\",\"div\",null,{\"className\":\"skill-page\",\"children\":[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"SoftwareApplication\\\",\\\"name\\\":\\\"Accessibility Engine\\\",\\\"description\\\":\\\"Helps teams achieve WCAG 2.1 AA compliance by auditing and guiding inclusive design for web, mobile, desktop, and other digital products.\\\",\\\"url\\\":\\\"https://bytesagain.com/skill/afrexai-accessibility-engine\\\",\\\"applicationCategory\\\":\\\"clawhub\\\",\\\"operatingSystem\\\":\\\"Any\\\",\\\"offers\\\":{\\\"@type\\\":\\\"Offer\\\",\\\"price\\\":\\\"0\\\",\\\"priceCurrency\\\":\\\"USD\\\"},\\\"publisher\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"BytesAgain\\\",\\\"url\\\":\\\"https://bytesagain.com\\\"}}\"}}],[\"$\",\"div\",null,{\"className\":\"breadcrumb\",\"children\":[[\"$\",\"a\",null,{\"href\":\"/\",\"children\":\"BytesAgain\"}],\" › \",[\"$\",\"a\",null,{\"href\":\"/skills\",\"children\":\"Skills\"}],\" › \",\"Accessibility Engine\"]}],[\"$\",\"div\",null,{\"className\":\"two-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"two-col-main\",\"children\":[[\"$\",\"div\",null,{\"className\":\"skill-card\",\"children\":[[\"$\",\"div\",null,{\"className\":\"skill-header\",\"children\":[[\"$\",\"div\",null,{\"className\":\"skill-badges\",\"children\":[[\"$\",\"span\",null,{\"className\":\"badge\",\"style\":{\"color\":\"#818cf8\",\"background\":\"#818cf822\",\"borderColor\":\"#818cf844\"},\"children\":[\"🦀\",\" \",\"ClawHub\"]}],false]}],[\"$\",\"div\",null,{\"className\":\"skill-top-actions\",\"children\":[\"$\",\"$L22\",null,{\"slug\":\"afrexai-accessibility-engine\"}]}]]}],[\"$\",\"h1\",null,{\"className\":\"skill-title\",\"children\":\"Accessibility Engine\"}],[\"$\",\"p\",null,{\"className\":\"skill-owner\",\"children\":[\"by \",[\"$\",\"span\",null,{\"children\":[\"@\",\"1kalin\"]}]]}],[\"$\",\"p\",null,{\"className\":\"skill-desc\",\"children\":\"Helps teams achieve WCAG 2.1 AA compliance by auditing and guiding inclusive design for web, mobile, desktop, and other digital products.\"}],[\"$\",\"div\",null,{\"className\":\"skill-meta\",\"children\":[[\"$\",\"div\",null,{\"className\":\"meta-item\",\"children\":[[\"$\",\"span\",null,{\"className\":\"meta-label\",\"children\":\"Version\"}],[\"$\",\"span\",null,{\"className\":\"meta-value\",\"children\":[\"v\",\"1.0.0\"]}]]}],[\"$\",\"div\",null,{\"className\":\"meta-item\",\"children\":[[\"$\",\"span\",null,{\"className\":\"meta-label\",\"children\":\"Downloads\"}],[\"$\",\"span\",null,{\"className\":\"meta-value\",\"children\":\"1,560\"}]]}],false,false,false,[\"$\",\"div\",null,{\"className\":\"meta-item\",\"style\":{\"flexDirection\":\"row\",\"gap\":6,\"alignItems\":\"center\"},\"children\":[[\"$\",\"a\",\"legal\",{\"href\":\"/?q=legal\",\"className\":\"tag\",\"children\":[\"#\",\"legal\"]}],[\"$\",\"a\",\"communication\",{\"href\":\"/?q=communication\",\"className\":\"tag\",\"children\":[\"#\",\"communication\"]}]]}]]}],[\"$\",\"div\",null,{\"style\":{\"marginTop\":6},\"children\":[\"$\",\"a\",null,{\"href\":\"https://clawhub.ai/1kalin/afrexai-accessibility-engine\",\"target\":\"_blank\",\"rel\":\"noopener\",\"className\":\"btn-secondary\",\"style\":{\"padding\":\"6px 12px\",\"fontSize\":\".82em\",\"borderRadius\":8,\"background\":\"transparent\",\"border\":\"1px solid var(--border-card)\",\"color\":\"var(--text-muted2)\",\"textDecoration\":\"none\",\"whiteSpace\":\"nowrap\"},\"children\":[\"View on \",\"ClawHub\",\" →\"]}]}]]}],[\"$\",\"div\",null,{\"className\":\"install-box\",\"children\":[[\"$\",\"div\",null,{\"className\":\"install-header\",\"children\":[[\"$\",\"div\",null,{\"className\":\"install-dots\",\"children\":[[\"$\",\"div\",null,{\"className\":\"dot\",\"style\":{\"background\":\"#ef4444\"}}],[\"$\",\"div\",null,{\"className\":\"dot\",\"style\":{\"background\":\"#eab308\"}}],[\"$\",\"div\",null,{\"className\":\"dot\",\"style\":{\"background\":\"#22c55e\"}}]]}],[\"$\",\"span\",null,{\"className\":\"install-label\",\"children\":\"TERMINAL\"}]]}],[\"$\",\"div\",null,{\"className\":\"install-body\",\"style\":{\"flexWrap\":\"wrap\"},\"children\":[[\"$\",\"code\",null,{\"className\":\"install-cmd\",\"children\":\"clawhub install afrexai-accessibility-engine\"}],[\"$\",\"button\",null,{\"className\":\"copy-btn\",\"data-cmd\":\"clawhub install afrexai-accessibility-engine\",\"style\":{\"fontWeight\":700},\"children\":\"Copy\"}]]}]]}],[\"$\",\"section\",null,{\"className\":\"skill-card\",\"style\":{\"marginBottom\":20},\"children\":[[\"$\",\"h2\",null,{\"style\":{\"color\":\"#f8fafc\",\"fontSize\":\"1.2em\",\"fontWeight\":800,\"margin\":\"0 0 16px\",\"display\":\"flex\",\"alignItems\":\"center\",\"gap\":8},\"children\":\"📖 About This Skill\"}],[\"$\",\"div\",null,{\"style\":{\"fontSize\":\".92em\",\"color\":\"#94a3b8\",\"lineHeight\":1.75},\"dangerouslySetInnerHTML\":{\"html\":\"$23\"}}]]}],null,null,null,null,null,null,null,false,false]}],\"$L24\"]}]]}]\n"])</script><script>self.next_f.push([1,"21:[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"html\":\"\\n document.querySelectorAll('.copy-btn, .script-copy-btn').forEach(btn =\u003e {\\n btn.addEventListener('click', () =\u003e {\\n const cmd = btn.getAttribute('data-cmd');\\n if (!cmd) return;\\n navigator.clipboard.writeText(cmd).then(() =\u003e {\\n const orig = btn.textContent;\\n btn.textContent = 'Copied!';\\n setTimeout(() =\u003e btn.textContent = orig, 1500);\\n }).catch(() =\u003e {});\\n });\\n });\\n \"}}]\n"])</script><script>self.next_f.push([1,"25:I[71521,[\"/_next/static/chunks/0ph_0rx9ah5dc.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/0i_x3w546rsb3.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/06ig5gym-0n-u.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\",\"/_next/static/chunks/12w5ognupk9fb.js?dpl=dpl_9zPFH6pojPkqyspdDNz28GzCc6KQ\"],\"default\"]\n24:[\"$\",\"div\",null,{\"className\":\"two-col-side\",\"children\":[\"$\",\"$L25\",null,{\"category\":\"clawhub\",\"currentSlug\":\"afrexai-accessibility-engine\",\"name\":\"Accessibility Engine\",\"tags\":[\"legal\",\"communication\"]}]}]\n"])</script></body></html>