{
  "schemaVersion": "1.0",
  "item": {
    "slug": "afrexai-accessibility-engine",
    "name": "Accessibility Engine",
    "source": "tencent",
    "type": "skill",
    "category": "开发工具",
    "sourceUrl": "https://clawhub.ai/1kalin/afrexai-accessibility-engine",
    "canonicalUrl": "https://clawhub.ai/1kalin/afrexai-accessibility-engine",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/afrexai-accessibility-engine",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-accessibility-engine",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "README.md",
      "SKILL.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-23T16:43:11.935Z",
      "expiresAt": "2026-04-30T16:43:11.935Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
        "contentDisposition": "attachment; filename=\"4claw-imageboard-1.0.1.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/afrexai-accessibility-engine"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/afrexai-accessibility-engine",
    "agentPageUrl": "https://openagent3.xyz/skills/afrexai-accessibility-engine/agent",
    "manifestUrl": "https://openagent3.xyz/skills/afrexai-accessibility-engine/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/afrexai-accessibility-engine/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Accessibility Engineering Engine",
        "body": "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."
      },
      {
        "title": "Phase 1: Accessibility Audit Brief",
        "body": "Start every engagement with a structured brief:\n\naudit_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\""
      },
      {
        "title": "Legal Landscape Quick Reference",
        "body": "JurisdictionLawStandardEnforcementPenaltiesUS (private)ADA Title IIIWCAG 2.1 AALawsuits$75K first / $150K repeat + legal feesUS (federal)Section 508WCAG 2.1 AAAgency enforcementContract lossEUEAA (Jun 2025)EN 301 549 / WCAG 2.1 AAMember state authoritiesVaries by countryUKEquality Act 2010WCAG 2.1 AAEHRCUnlimited damagesCanadaAODAWCAG 2.0 AAProvince$100K/dayAustraliaDDAWCAG 2.1 AAAHRCDamages + orders\n\nKey trend: ADA lawsuits in the US hit 4,600+ in 2023. EU EAA enforcement starts June 2025. This is NOT optional."
      },
      {
        "title": "Principle 1: PERCEIVABLE (users must be able to perceive content)",
        "body": "1.1 Text Alternatives\n\n1.1.1 Non-text Content (A) — Every <img>, <svg>, icon has appropriate alt text\n\nInformative images: descriptive alt (alt=\"Bar chart showing Q3 revenue of $2.4M\")\nDecorative images: empty alt (alt=\"\") or CSS background\nFunctional images (buttons/links): describe the action (alt=\"Search\")\nComplex images (charts/diagrams): short alt + long description\nImage of text: use real text instead (exception: logos)\nForm image buttons: alt describes the action\nTest: Turn off images — can you still understand the page?\n\n1.2 Time-Based Media\n\n1.2.1 Audio-only/Video-only (A) — Provide transcript (audio) or text description (video)\n 1.2.2 Captions (A) — All prerecorded video has synchronized captions\n 1.2.3 Audio Description (A) — Prerecorded video has audio description or full text alternative\n 1.2.4 Live Captions (AA) — Live video has real-time captions\n 1.2.5 Audio Description (AA) — Prerecorded video has audio description track\n\nCaption quality checklist: Speaker identified, [sound effects], [music], 99%+ accuracy, sync within 1 second\n\n1.3 Adaptable\n\n1.3.1 Info and Relationships (A) — Structure conveyed visually is also in markup\n\nHeadings use <h1>-<h6> (not just bold text)\nLists use <ul>, <ol>, <dl> (not styled divs)\nTables use <th>, scope, <caption>\nForms use <label> + for attribute (not placeholder-only)\nRegions use landmarks (<nav>, <main>, <aside>, <footer>)\n\n\n 1.3.2 Meaningful Sequence (A) — DOM order matches visual reading order\n 1.3.3 Sensory Characteristics (A) — Instructions don't rely solely on shape, color, size, location, sound\n\n❌ \"Click the green button\"\n✅ \"Click the Submit button (green, bottom right)\"\n\n\n 1.3.4 Orientation (AA) — Content not restricted to portrait or landscape\n 1.3.5 Identify Input Purpose (AA) — Form fields have autocomplete attributes\n\n1.4 Distinguishable\n\n1.4.1 Use of Color (A) — Color is NOT the only way to convey information\n\nLinks: underlined OR other non-color indicator\nForm errors: icon + text, not just red border\nCharts: patterns/labels, not just color coding\n\n\n 1.4.2 Audio Control (A) — Auto-playing audio can be paused/stopped within 3 seconds\n 1.4.3 Contrast (Minimum) (AA) — Text contrast ratio ≥ 4.5:1 (normal) / 3:1 (large text ≥18pt or 14pt bold)\n 1.4.4 Resize Text (AA) — Text resizable to 200% without loss of content/function\n 1.4.5 Images of Text (AA) — Don't use images of text (exception: logos)\n 1.4.10 Reflow (AA) — No horizontal scrolling at 320px viewport width (1280px at 400% zoom)\n 1.4.11 Non-text Contrast (AA) — UI components and graphical objects ≥ 3:1 contrast\n 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\n 1.4.13 Content on Hover/Focus (AA) — Tooltips/popovers: dismissible (Esc), hoverable, persistent until dismissed"
      },
      {
        "title": "Principle 2: OPERABLE (users must be able to operate the interface)",
        "body": "2.1 Keyboard Accessible\n\n2.1.1 Keyboard (A) — ALL functionality available via keyboard\n\nTab through all interactive elements\nEnter/Space activates buttons and links\nArrow keys navigate within components (tabs, menus, sliders)\nNo keyboard traps (can always Tab/Esc out)\n\n\n 2.1.2 No Keyboard Trap (A) — Focus never gets stuck\n 2.1.4 Character Key Shortcuts (A) — Single-character shortcuts can be turned off or remapped\n\n2.2 Enough Time\n\n2.2.1 Timing Adjustable (A) — Session timeouts: warn 20+ seconds before, allow extension\n 2.2.2 Pause, Stop, Hide (A) — Moving/auto-updating content can be paused (carousels, tickers, animations)\n\n2.3 Seizures and Physical Reactions\n\n2.3.1 Three Flashes (A) — Nothing flashes more than 3 times per second\n\n2.4 Navigable\n\n2.4.1 Bypass Blocks (A) — \"Skip to main content\" link (first focusable element)\n 2.4.2 Page Titled (A) — Every page has descriptive <title> (Pattern: Page Name | Site Name)\n 2.4.3 Focus Order (A) — Tab order follows logical reading sequence\n 2.4.4 Link Purpose (A) — Link text describes destination (no \"click here\", \"read more\")\n 2.4.5 Multiple Ways (AA) — 2+ ways to find pages (nav + search, or nav + sitemap)\n 2.4.6 Headings and Labels (AA) — Headings and labels are descriptive\n 2.4.7 Focus Visible (AA) — Keyboard focus indicator is clearly visible\n\nMinimum: 2px solid outline, 3:1 contrast against background\nNever: outline: none without a visible replacement\n\n2.5 Input Modalities\n\n2.5.1 Pointer Gestures (A) — Multi-point gestures (pinch, swipe) have single-pointer alternatives\n 2.5.2 Pointer Cancellation (A) — Actions fire on up-event (not down), can be aborted\n 2.5.3 Label in Name (A) — Visible label text is included in accessible name\n 2.5.4 Motion Actuation (A) — Shake/tilt features have button alternatives"
      },
      {
        "title": "Principle 3: UNDERSTANDABLE (content and interface must be understandable)",
        "body": "3.1 Readable\n\n3.1.1 Language of Page (A) — <html lang=\"en\"> (or appropriate language code)\n 3.1.2 Language of Parts (AA) — Foreign language passages marked with lang attribute\n\n3.2 Predictable\n\n3.2.1 On Focus (A) — No unexpected context change on focus\n 3.2.2 On Input (A) — No unexpected context change on input (unless warned)\n 3.2.3 Consistent Navigation (AA) — Navigation order consistent across pages\n 3.2.4 Consistent Identification (AA) — Same function = same label everywhere\n\n3.3 Input Assistance\n\n3.3.1 Error Identification (A) — Errors described in text (not just color)\n 3.3.2 Labels or Instructions (A) — Required fields, format hints provided upfront\n 3.3.3 Error Suggestion (AA) — Suggest corrections when possible\n 3.3.4 Error Prevention (AA) — Legal/financial submissions: reversible, or confirmed, or reviewed"
      },
      {
        "title": "Principle 4: ROBUST (content must be compatible with assistive tech)",
        "body": "4.1.1 Parsing (A) — Valid HTML (no duplicate IDs, proper nesting)\n 4.1.2 Name, Role, Value (A) — Custom components expose correct ARIA roles/states\n 4.1.3 Status Messages (AA) — Status messages announced without focus change (role=\"alert\", aria-live)"
      },
      {
        "title": "Landmark Roles (use HTML5 elements, not role attributes when possible)",
        "body": "<header>     → banner (page header)\n<nav>        → navigation\n<main>       → main content (one per page)\n<aside>      → complementary\n<footer>     → contentinfo (page footer)\n<section>    → region (with aria-label)\n<form>       → form (with aria-label)\n<search>     → search"
      },
      {
        "title": "Common ARIA Patterns",
        "body": "PatternKey ARIAKeyboardModal dialogrole=\"dialog\", aria-modal=\"true\", aria-labelledbyEsc closes, Tab trapped inside, focus returns on closeTabsrole=\"tablist/tab/tabpanel\", aria-selected, aria-controlsArrow keys switch tabs, Tab enters panelAccordion<button aria-expanded>, aria-controlsEnter/Space toggles, all keyboard reachableMenurole=\"menu/menuitem\", aria-haspopupArrow keys navigate, Esc closes, Enter selectsCombobox/autocompleterole=\"combobox\", aria-expanded, aria-activedescendantArrow keys navigate list, Enter selects, Esc closesAlert/toastrole=\"alert\" or aria-live=\"assertive\"Auto-announced, dismissibleProgressrole=\"progressbar\", aria-valuenow/min/maxAnnounced on changeToggle buttonaria-pressed=\"true/false\"Space/Enter togglesTooltiprole=\"tooltip\", aria-describedbyAppears on focus+hover, Esc dismisses"
      },
      {
        "title": "ARIA Rules of Engagement",
        "body": "First rule of ARIA: Don't use ARIA if native HTML works — <button> > <div role=\"button\">\nSecond rule: Don't change native semantics — Don't <h2 role=\"tab\">\nThird rule: All interactive ARIA controls must be keyboard accessible\nFourth rule: Don't use role=\"presentation\" or aria-hidden=\"true\" on focusable elements\nFifth rule: All interactive elements must have an accessible name"
      },
      {
        "title": "Accessible Name Priority (browser resolution order)",
        "body": "aria-labelledby (references another element's text)\naria-label (string label)\n<label> association (for form controls)\nContents (button text, link text)\ntitle attribute (last resort — avoid)\nplaceholder (NOT a label — supplementary only)"
      },
      {
        "title": "4-Layer Testing Pyramid",
        "body": "Layer 1: Automated Scanning (catches ~30% of issues)\n\nRun on EVERY build/PR:\n\nTools (all free):\n\naxe-core — industry standard, lowest false positives\n# In Playwright/Cypress\nnpm install @axe-core/playwright  # or @axe-core/cypress\n# In CI\nnpm install @axe-core/cli\naxe https://your-site.com --tags wcag2a,wcag2aa\n\n\nLighthouse — Chrome DevTools → Lighthouse → Accessibility\nWAVE — wave.webaim.org (visual overlay)\nPa11y — CLI scanner for CI pipelines\npa11y https://your-site.com --standard WCAG2AA\n\nCI pipeline integration:\n\n# GitHub Actions example\na11y-test:\n  runs-on: ubuntu-latest\n  steps:\n    - uses: actions/checkout@v4\n    - run: npm ci && npm run build\n    - run: npx pa11y-ci --config .pa11yci.json\n    - run: npx playwright test --grep @a11y\n\nLayer 2: Keyboard Testing (catches navigation issues)\n\nTest EVERY page/feature manually:\n\nTab test: Tab through entire page — can you reach everything? Is order logical?\nFocus visibility test: Is the focus indicator always visible and clear?\nActivation test: Can you activate every button, link, form control with Enter/Space?\nTrap test: Can you always Tab or Esc out of components (modals, menus)?\nSkip link test: Does \"Skip to main content\" work?\n\nKeyboard testing checklist per page:\n\nkeyboard_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\nLayer 3: Screen Reader Testing (catches semantic issues)\n\nTest key flows with at least ONE screen reader:\n\nScreen ReaderOSBrowserCostNVDAWindowsFirefox/ChromeFreeVoiceOvermacOS/iOSSafariBuilt-inJAWSWindowsChrome/Edge$$$TalkBackAndroidChromeBuilt-in\n\nEssential screen reader checks:\n\nPage structure announced (headings, landmarks, lists)\nImages described (or correctly hidden if decorative)\nForms: labels read, errors announced, required fields indicated\nDynamic content announced (alerts, loading states, live regions)\nCustom components: role, name, state all announced\n\nQuick VoiceOver test (macOS):\n\nCmd+F5 to toggle\nVO+Right arrow to navigate\nVO+U for rotor (headings, links, landmarks)\nTab for interactive elements only\n\nLayer 4: Manual Expert Review (catches context & usability issues)\n\nQuarterly or before major releases:\n\nContent readability and plain language\nCognitive load assessment\nError recovery paths\nMotion/animation sensitivity\nTouch target sizing (mobile)\nColor independence verification"
      },
      {
        "title": "Testing Priority Matrix",
        "body": "Page/FeatureAutoKeyboardScreen ReaderExpertHomepageEvery buildMonthlyQuarterlyAnnuallyLogin/SignupEvery buildMonthlyQuarterlyAnnuallyCheckout/PaymentEvery buildWeeklyMonthlyQuarterlySearchEvery buildMonthlyQuarterlyAnnuallyForms (all)Every buildMonthlyMonthlyQuarterlyNew featuresBefore shipBefore shipBefore shipMajor only"
      },
      {
        "title": "Fix 1: Missing alt text",
        "body": "<!-- ❌ -->\n<img src=\"chart.png\">\n<img src=\"decorative-swoosh.svg\">\n\n<!-- ✅ -->\n<img src=\"chart.png\" alt=\"Revenue grew 34% from $1.8M to $2.4M in Q3 2025\">\n<img src=\"decorative-swoosh.svg\" alt=\"\" role=\"presentation\">"
      },
      {
        "title": "Fix 2: Color-only indicators",
        "body": "<!-- ❌ Error shown only by red border -->\n<input style=\"border-color: red\">\n\n<!-- ✅ Error with icon, text, and color -->\n<input aria-invalid=\"true\" aria-describedby=\"email-error\" style=\"border-color: red\">\n<span id=\"email-error\" role=\"alert\">⚠️ Please enter a valid email address</span>"
      },
      {
        "title": "Fix 3: Custom button",
        "body": "<!-- ❌ Div pretending to be a button -->\n<div class=\"btn\" onclick=\"submit()\">Submit</div>\n\n<!-- ✅ Just use a button -->\n<button type=\"submit\">Submit</button>\n\n<!-- ✅ If you MUST use a div (you shouldn't) -->\n<div role=\"button\" tabindex=\"0\" onclick=\"submit()\" onkeydown=\"if(e.key==='Enter'||e.key===' ')submit()\">Submit</div>"
      },
      {
        "title": "Fix 4: Form labels",
        "body": "<!-- ❌ Placeholder-only label -->\n<input placeholder=\"Email address\">\n\n<!-- ✅ Visible label -->\n<label for=\"email\">Email address</label>\n<input id=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"you@example.com\">\n\n<!-- ✅ Visually hidden label (when design requires it) -->\n<label for=\"search\" class=\"sr-only\">Search</label>\n<input id=\"search\" type=\"search\" placeholder=\"Search...\">"
      },
      {
        "title": "Fix 5: Focus management (SPA route changes)",
        "body": "// After client-side navigation:\n// 1. Update document.title\ndocument.title = `${newPageName} | Site Name`;\n\n// 2. Move focus to main content or h1\nconst main = document.querySelector('main h1') || document.querySelector('main');\nmain.setAttribute('tabindex', '-1');\nmain.focus();\n\n// 3. Announce to screen readers\nconst announcer = document.getElementById('route-announcer');\nannouncer.textContent = `Navigated to ${newPageName}`;\n// <div id=\"route-announcer\" aria-live=\"assertive\" class=\"sr-only\"></div>"
      },
      {
        "title": "Fix 6: Modal focus trap",
        "body": "function 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];\n\n  modal.addEventListener('keydown', (e) => {\n    if (e.key === 'Escape') { closeModal(); return; }\n    if (e.key !== 'Tab') return;\n    if (e.shiftKey && document.activeElement === first) {\n      e.preventDefault(); last.focus();\n    } else if (!e.shiftKey && document.activeElement === last) {\n      e.preventDefault(); first.focus();\n    }\n  });\n\n  first.focus(); // Move focus into modal on open\n}\n// On close: return focus to the trigger element"
      },
      {
        "title": "Fix 7: Live region for dynamic content",
        "body": "<!-- Status messages (polite — waits for pause) -->\n<div aria-live=\"polite\" aria-atomic=\"true\" id=\"status\">\n  <!-- JS updates: \"3 results found\", \"Item added to cart\" -->\n</div>\n\n<!-- Error/urgent messages (assertive — interrupts) -->\n<div role=\"alert\" id=\"error-banner\">\n  <!-- JS updates: \"Payment failed. Please try again.\" -->\n</div>"
      },
      {
        "title": "CSS: Visually Hidden (screen reader only)",
        "body": ".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}"
      },
      {
        "title": "Color Contrast Requirements",
        "body": "Tools for checking:\n\nColour Contrast Analyser (desktop app)\nWebAIM Contrast Checker (webaim.org/resources/contrastchecker)\nStark (Figma plugin)\n\nMinimum ratios:\n\nElementWCAG AAWCAG AAANormal text (<18pt)4.5:17:1Large text (≥18pt or ≥14pt bold)3:14.5:1UI components & graphics3:1—Focus indicator3:1—Disabled elementsExempt—"
      },
      {
        "title": "Touch Target Sizing",
        "body": "StandardMinimum SizeSpacingWCAG 2.5.8 (AAA)44×44 CSS px—WCAG 2.5.5 (AA)24×24 CSS px24px from other targetsApple HIG44×44 pt—Material Design48×48 dp8dp spacingRecommendation44×44 px minimum8px spacing"
      },
      {
        "title": "Typography Accessibility",
        "body": "Base font size: 16px minimum (body text)\nLine height: 1.5× minimum for body text\nLine length: 50-75 characters (measure)\nParagraph spacing: 1.5× font size minimum\nFont choice: sans-serif for UI, high x-height, clear letterforms\nNever: All caps for long text, justified alignment, font size < 12px"
      },
      {
        "title": "Animation & Motion",
        "body": "/* 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\nAll animations: provide pause/stop control\nNo content conveyed only through animation\nParallax scrolling: provide alternative or respect prefers-reduced-motion\nAuto-playing video: never. User-initiated only."
      },
      {
        "title": "Dark Mode Accessibility",
        "body": "Re-check ALL contrast ratios in dark mode (common failure point)\nDon't just invert — pure white (#fff) on dark backgrounds causes halation\nUse off-white (#e0e0e0 to #f0f0f0) on dark backgrounds\nColored text: re-verify contrast on dark backgrounds\nImages: consider transparent PNGs on dark backgrounds"
      },
      {
        "title": "Phase 7: Component Accessibility Specifications",
        "body": "For each common component, specify the complete accessible behavior:"
      },
      {
        "title": "Button",
        "body": "semantics: \"<button> 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 <a> for actions (buttons do things, links go places)\"\n  - \"Loading state: aria-busy='true', disable click, announce 'Loading...'\""
      },
      {
        "title": "Form Field",
        "body": "required:\n  - \"Visible <label> 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: <fieldset> + <legend> (radio groups, address blocks)\""
      },
      {
        "title": "Data Table",
        "body": "required:\n  - \"<table>, <thead>, <tbody>, <th scope='col/row'>\"\n  - \"<caption> describing the table\"\n  - \"Complex tables: headers= attribute on <td>\"\nkeyboard:\n  - \"Sortable: button in <th>, 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\""
      },
      {
        "title": "Navigation",
        "body": "required:\n  - \"<nav aria-label='Main'> (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: <button aria-expanded='false' aria-controls='menu-id'>\"\n  - \"Update aria-expanded on toggle\""
      },
      {
        "title": "Phase 8: Accessibility Scoring Rubric (0-100)",
        "body": "DimensionWeight0-255075100Automated scan15%50+ violations20-495-190 critical/seriousKeyboard navigation20%Major traps, unreachable elementsMost works, some gapsAll reachable, minor focus issuesPerfect tab order, visible focus, no trapsScreen reader compat20%Unusable (missing labels, roles)Partially navigableMostly correct, minor omissionsFull landmark/heading/label coverageColor & contrast10%Multiple failuresSome failuresMostly passingAll elements ≥ AA ratiosForms & errors15%Unlabeled, no error handlingLabels exist, errors unclearGood labels, some error gapsFull labels, inline errors, suggestionsContent structure10%No heading hierarchy, no landmarksPartial hierarchyGood structure, minor gapsPerfect heading levels, complete landmarksDynamic content10%No live regions, modals trapSome announcementsMost dynamic content announcedAll state changes properly announced\n\nScoring thresholds:\n\n90-100: Audit-ready. Maintain with automated testing.\n70-89: Good foundation. Fix remaining issues within 30 days.\n50-69: Significant gaps. Prioritize critical/serious issues.\nBelow 50: Major remediation needed. Start with Phase 9 priority matrix."
      },
      {
        "title": "Severity Classification (align with axe-core)",
        "body": "SeverityImpactFix TimelineExamplesCriticalBlocks entire feature for AT users48 hoursKeyboard trap, missing form labels, no alt on functional imagesSeriousMajor difficulty, workaround exists1 weekLow contrast text, missing heading hierarchy, unlabeled buttonsModerateInconvenient but usable2 weeksMissing lang attribute, unclear link text, minor focus order issuesMinorBest practice / enhancement1 monthMissing autocomplete, suboptimal heading levels, redundant ARIA"
      },
      {
        "title": "Remediation Sprint Plan",
        "body": "Week 1-2: Critical (foundation)\n\nAdd skip link\nFix all keyboard traps\nLabel all form fields\nAdd alt text to functional images\nFix focus management in modals\n\nWeek 3-4: Serious (structure)\n\nFix heading hierarchy\nAdd landmark regions\nFix color contrast failures\nAdd visible focus indicators\nFix dynamic content announcements\n\nMonth 2: Moderate (polish)\n\nFix link text\nAdd language attributes\nFix focus order issues\nAdd ARIA to custom components\nFix reflow at 320px\n\nMonth 3: Minor + ongoing (maintenance)\n\nAdd autocomplete attributes\nOptimize heading levels\nSet up automated CI testing\nEstablish ongoing review process"
      },
      {
        "title": "Maturity Model",
        "body": "LevelNameCharacteristics1Ad HocNo awareness, no process, reactive to complaints2AwareSome training, fix issues when found, no standards3ManagedGuidelines documented, testing in QA, some automation4IntegratedA11y in design/dev process, CI testing, regular audits5LeadingDisability community involved, proactive innovation, culture of inclusion"
      },
      {
        "title": "Roles & Responsibilities",
        "body": "RoleResponsibilityTraining NeededProduct ManagerInclude a11y in requirements, accept/reject based on complianceWCAG overview, legal landscapeDesignerAnnotate designs with a11y specs, check contrast, design keyboard flowsDesign patterns, ARIA, contrast toolsDeveloperImplement semantic HTML, ARIA, keyboard support, write a11y testsSemantic HTML, ARIA, testing toolsQAKeyboard + screen reader testing, file a11y bugs with severityScreen reader basics, testing methodologyContentPlain language, alt text, heading structure, link textContent guidelines, alt text writingLeadershipBudget, staffing, accountability, legal complianceBusiness case, legal risk"
      },
      {
        "title": "Accessibility Statement Template",
        "body": "# Accessibility Statement\n\n[Company Name] is committed to ensuring digital accessibility for people with disabilities.\n\n## Conformance Status\nWe aim to conform to WCAG 2.1 Level AA. Our current conformance status is [partially conformant / fully conformant].\n\n## Measures Taken\n- Include accessibility as part of our design and development process\n- Conduct regular automated and manual accessibility testing\n- Train our team on accessibility best practices\n- Engage users with disabilities in testing\n\n## Known Issues\n[List any known issues and expected fix dates]\n\n## Feedback\nWe welcome your accessibility feedback. Contact us at:\n- Email: accessibility@[company].com\n- Phone: [number]\nWe aim to respond within [X] business days.\n\n## Technical Specifications\nThis website relies on: HTML, CSS, JavaScript, WAI-ARIA\nCompatible with: [browsers/AT listed]\n\nLast updated: [date]"
      },
      {
        "title": "ROI & Business Case",
        "body": "Risk reduction:\n\nAverage ADA lawsuit defense: $10K-$100K+ (even if you win)\nAverage settlement: $5K-$25K (but 4,600+ lawsuits/year in US alone)\nEU EAA non-compliance: market access restrictions\n\nMarket expansion:\n\n1.3 billion people globally live with disabilities (WHO)\n16% of world population — larger than China's population\nDisability community spending power: $13 trillion globally (Return on Disability Group)\nAging population: 80% of people over 65 use the internet\n\nSEO benefits:\n\nSemantic HTML improves crawlability\nAlt text improves image search\nHeadings improve content understanding\nTranscripts/captions index video content"
      },
      {
        "title": "iOS/Android Additional Checks",
        "body": "Touch targets ≥ 44×44 points\n Swipe gestures have tap alternatives\n Screen reader (VoiceOver/TalkBack) navigates all elements\n Custom actions exposed via accessibilityCustomActions\n Haptic feedback for important state changes\n Dark mode supported and contrast-checked\n Dynamic Type (iOS) / Font Size (Android) supported up to 200%\n Landscape orientation supported\n No information conveyed solely through device motion"
      },
      {
        "title": "React Native Accessibility Props",
        "body": "<TouchableOpacity\n  accessible={true}\n  accessibilityLabel=\"Delete item\"\n  accessibilityHint=\"Removes this item from your cart\"\n  accessibilityRole=\"button\"\n  accessibilityState={{ disabled: false }}\n/>"
      },
      {
        "title": "Flutter Accessibility",
        "body": "Semantics(\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)"
      },
      {
        "title": "Cognitive Accessibility (WCAG 2.2 / COGA)",
        "body": "Clear, simple language (aim for 8th grade reading level)\nConsistent navigation and layout\nError prevention > error recovery\nUndo for destructive actions\nNo time pressure unless essential\nProgress indicators for multi-step processes\nHelp available on every page"
      },
      {
        "title": "Internationalization & Accessibility",
        "body": "dir=\"rtl\" for right-to-left languages\nDon't concatenate translated strings (word order varies)\nNumber/date formatting: use Intl API\nCurrency symbols: position varies by locale\nTest with longer text (German is ~30% longer than English)"
      },
      {
        "title": "PDF Accessibility",
        "body": "Tag all content (headings, paragraphs, lists, tables, images)\nReading order matches visual order\nAlt text on all images\nLanguage specified\nBookmarks for navigation\nTool: PAC (PDF Accessibility Checker) — free"
      },
      {
        "title": "Email Accessibility",
        "body": "role=\"presentation\" on layout tables\nInline styles (not external CSS)\nalt on all images (including spacer GIFs: alt=\"\")\nSufficient color contrast (check in dark mode too)\nPlain text version always available\nSemantic headings (<h1>, <h2>)\nLink text descriptive (not \"click here\")"
      },
      {
        "title": "Quality Rubric: 100-Point Scoring (8 Dimensions)",
        "body": "#DimensionWeightScore (0-10)Weighted1Automated compliance (axe/pa11y)15%2Keyboard operability20%3Screen reader compatibility20%4Visual design (contrast, spacing, motion)10%5Forms and error handling15%6Content structure (headings, landmarks)10%7Dynamic content (live regions, SPA)5%8Documentation & process5%TOTAL100%/100"
      },
      {
        "title": "Natural Language Commands",
        "body": "You can ask me to:\n\n\"Audit [URL/page] for accessibility\" — Full WCAG 2.1 AA checklist review\n\"Fix this component for accessibility\" — Paste code, get accessible version\n\"Write alt text for [image description]\" — Context-appropriate alt text\n\"Create ARIA pattern for [component]\" — Full keyboard + screen reader spec\n\"Score our accessibility\" — Run the 100-point rubric\n\"Generate accessibility statement\" — Fill in the template\n\"Plan remediation for [issues]\" — Prioritized fix plan with timelines\n\"Check contrast for [colors]\" — Calculate ratios and pass/fail\n\"Design accessible [component]\" — Full spec with keyboard + ARIA + mobile\n\"Build accessibility testing plan\" — 4-layer pyramid customized to your stack\n\"Create accessibility training for [role]\" — Role-specific curriculum\n\"Review our design system for accessibility\" — Component-by-component audit\n\nBuilt by AfrexAI — Turning agent knowledge into competitive advantage."
      }
    ],
    "body": "Accessibility Engineering Engine\n\nYou 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.\n\nPhase 1: Accessibility Audit Brief\n\nStart every engagement with a structured brief:\n\naudit_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\nLegal Landscape Quick Reference\nJurisdiction\tLaw\tStandard\tEnforcement\tPenalties\nUS (private)\tADA Title III\tWCAG 2.1 AA\tLawsuits\t$75K first / $150K repeat + legal fees\nUS (federal)\tSection 508\tWCAG 2.1 AA\tAgency enforcement\tContract loss\nEU\tEAA (Jun 2025)\tEN 301 549 / WCAG 2.1 AA\tMember state authorities\tVaries by country\nUK\tEquality Act 2010\tWCAG 2.1 AA\tEHRC\tUnlimited damages\nCanada\tAODA\tWCAG 2.0 AA\tProvince\t$100K/day\nAustralia\tDDA\tWCAG 2.1 AA\tAHRC\tDamages + orders\n\nKey trend: ADA lawsuits in the US hit 4,600+ in 2023. EU EAA enforcement starts June 2025. This is NOT optional.\n\nPhase 2: WCAG 2.1 AA Complete Checklist\nPrinciple 1: PERCEIVABLE (users must be able to perceive content)\n1.1 Text Alternatives\n 1.1.1 Non-text Content (A) — Every <img>, <svg>, icon has appropriate alt text\nInformative images: descriptive alt (alt=\"Bar chart showing Q3 revenue of $2.4M\")\nDecorative images: empty alt (alt=\"\") or CSS background\nFunctional images (buttons/links): describe the action (alt=\"Search\")\nComplex images (charts/diagrams): short alt + long description\nImage of text: use real text instead (exception: logos)\nForm image buttons: alt describes the action\nTest: Turn off images — can you still understand the page?\n1.2 Time-Based Media\n 1.2.1 Audio-only/Video-only (A) — Provide transcript (audio) or text description (video)\n 1.2.2 Captions (A) — All prerecorded video has synchronized captions\n 1.2.3 Audio Description (A) — Prerecorded video has audio description or full text alternative\n 1.2.4 Live Captions (AA) — Live video has real-time captions\n 1.2.5 Audio Description (AA) — Prerecorded video has audio description track\nCaption quality checklist: Speaker identified, [sound effects], [music], 99%+ accuracy, sync within 1 second\n1.3 Adaptable\n 1.3.1 Info and Relationships (A) — Structure conveyed visually is also in markup\nHeadings use <h1>-<h6> (not just bold text)\nLists use <ul>, <ol>, <dl> (not styled divs)\nTables use <th>, scope, <caption>\nForms use <label> + for attribute (not placeholder-only)\nRegions use landmarks (<nav>, <main>, <aside>, <footer>)\n 1.3.2 Meaningful Sequence (A) — DOM order matches visual reading order\n 1.3.3 Sensory Characteristics (A) — Instructions don't rely solely on shape, color, size, location, sound\n❌ \"Click the green button\"\n✅ \"Click the Submit button (green, bottom right)\"\n 1.3.4 Orientation (AA) — Content not restricted to portrait or landscape\n 1.3.5 Identify Input Purpose (AA) — Form fields have autocomplete attributes\n1.4 Distinguishable\n 1.4.1 Use of Color (A) — Color is NOT the only way to convey information\nLinks: underlined OR other non-color indicator\nForm errors: icon + text, not just red border\nCharts: patterns/labels, not just color coding\n 1.4.2 Audio Control (A) — Auto-playing audio can be paused/stopped within 3 seconds\n 1.4.3 Contrast (Minimum) (AA) — Text contrast ratio ≥ 4.5:1 (normal) / 3:1 (large text ≥18pt or 14pt bold)\n 1.4.4 Resize Text (AA) — Text resizable to 200% without loss of content/function\n 1.4.5 Images of Text (AA) — Don't use images of text (exception: logos)\n 1.4.10 Reflow (AA) — No horizontal scrolling at 320px viewport width (1280px at 400% zoom)\n 1.4.11 Non-text Contrast (AA) — UI components and graphical objects ≥ 3:1 contrast\n 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\n 1.4.13 Content on Hover/Focus (AA) — Tooltips/popovers: dismissible (Esc), hoverable, persistent until dismissed\nPrinciple 2: OPERABLE (users must be able to operate the interface)\n2.1 Keyboard Accessible\n 2.1.1 Keyboard (A) — ALL functionality available via keyboard\nTab through all interactive elements\nEnter/Space activates buttons and links\nArrow keys navigate within components (tabs, menus, sliders)\nNo keyboard traps (can always Tab/Esc out)\n 2.1.2 No Keyboard Trap (A) — Focus never gets stuck\n 2.1.4 Character Key Shortcuts (A) — Single-character shortcuts can be turned off or remapped\n2.2 Enough Time\n 2.2.1 Timing Adjustable (A) — Session timeouts: warn 20+ seconds before, allow extension\n 2.2.2 Pause, Stop, Hide (A) — Moving/auto-updating content can be paused (carousels, tickers, animations)\n2.3 Seizures and Physical Reactions\n 2.3.1 Three Flashes (A) — Nothing flashes more than 3 times per second\n2.4 Navigable\n 2.4.1 Bypass Blocks (A) — \"Skip to main content\" link (first focusable element)\n 2.4.2 Page Titled (A) — Every page has descriptive <title> (Pattern: Page Name | Site Name)\n 2.4.3 Focus Order (A) — Tab order follows logical reading sequence\n 2.4.4 Link Purpose (A) — Link text describes destination (no \"click here\", \"read more\")\n 2.4.5 Multiple Ways (AA) — 2+ ways to find pages (nav + search, or nav + sitemap)\n 2.4.6 Headings and Labels (AA) — Headings and labels are descriptive\n 2.4.7 Focus Visible (AA) — Keyboard focus indicator is clearly visible\nMinimum: 2px solid outline, 3:1 contrast against background\nNever: outline: none without a visible replacement\n2.5 Input Modalities\n 2.5.1 Pointer Gestures (A) — Multi-point gestures (pinch, swipe) have single-pointer alternatives\n 2.5.2 Pointer Cancellation (A) — Actions fire on up-event (not down), can be aborted\n 2.5.3 Label in Name (A) — Visible label text is included in accessible name\n 2.5.4 Motion Actuation (A) — Shake/tilt features have button alternatives\nPrinciple 3: UNDERSTANDABLE (content and interface must be understandable)\n3.1 Readable\n 3.1.1 Language of Page (A) — <html lang=\"en\"> (or appropriate language code)\n 3.1.2 Language of Parts (AA) — Foreign language passages marked with lang attribute\n3.2 Predictable\n 3.2.1 On Focus (A) — No unexpected context change on focus\n 3.2.2 On Input (A) — No unexpected context change on input (unless warned)\n 3.2.3 Consistent Navigation (AA) — Navigation order consistent across pages\n 3.2.4 Consistent Identification (AA) — Same function = same label everywhere\n3.3 Input Assistance\n 3.3.1 Error Identification (A) — Errors described in text (not just color)\n 3.3.2 Labels or Instructions (A) — Required fields, format hints provided upfront\n 3.3.3 Error Suggestion (AA) — Suggest corrections when possible\n 3.3.4 Error Prevention (AA) — Legal/financial submissions: reversible, or confirmed, or reviewed\nPrinciple 4: ROBUST (content must be compatible with assistive tech)\n 4.1.1 Parsing (A) — Valid HTML (no duplicate IDs, proper nesting)\n 4.1.2 Name, Role, Value (A) — Custom components expose correct ARIA roles/states\n 4.1.3 Status Messages (AA) — Status messages announced without focus change (role=\"alert\", aria-live)\nPhase 3: Semantic HTML & ARIA Cheat Sheet\nLandmark Roles (use HTML5 elements, not role attributes when possible)\n<header>     → banner (page header)\n<nav>        → navigation\n<main>       → main content (one per page)\n<aside>      → complementary\n<footer>     → contentinfo (page footer)\n<section>    → region (with aria-label)\n<form>       → form (with aria-label)\n<search>     → search\n\nCommon ARIA Patterns\nPattern\tKey ARIA\tKeyboard\nModal dialog\trole=\"dialog\", aria-modal=\"true\", aria-labelledby\tEsc closes, Tab trapped inside, focus returns on close\nTabs\trole=\"tablist/tab/tabpanel\", aria-selected, aria-controls\tArrow keys switch tabs, Tab enters panel\nAccordion\t<button aria-expanded>, aria-controls\tEnter/Space toggles, all keyboard reachable\nMenu\trole=\"menu/menuitem\", aria-haspopup\tArrow keys navigate, Esc closes, Enter selects\nCombobox/autocomplete\trole=\"combobox\", aria-expanded, aria-activedescendant\tArrow keys navigate list, Enter selects, Esc closes\nAlert/toast\trole=\"alert\" or aria-live=\"assertive\"\tAuto-announced, dismissible\nProgress\trole=\"progressbar\", aria-valuenow/min/max\tAnnounced on change\nToggle button\taria-pressed=\"true/false\"\tSpace/Enter toggles\nTooltip\trole=\"tooltip\", aria-describedby\tAppears on focus+hover, Esc dismisses\nARIA Rules of Engagement\nFirst rule of ARIA: Don't use ARIA if native HTML works — <button> > <div role=\"button\">\nSecond rule: Don't change native semantics — Don't <h2 role=\"tab\">\nThird rule: All interactive ARIA controls must be keyboard accessible\nFourth rule: Don't use role=\"presentation\" or aria-hidden=\"true\" on focusable elements\nFifth rule: All interactive elements must have an accessible name\nAccessible Name Priority (browser resolution order)\naria-labelledby (references another element's text)\naria-label (string label)\n<label> association (for form controls)\nContents (button text, link text)\ntitle attribute (last resort — avoid)\nplaceholder (NOT a label — supplementary only)\nPhase 4: Testing Methodology\n4-Layer Testing Pyramid\nLayer 1: Automated Scanning (catches ~30% of issues)\n\nRun on EVERY build/PR:\n\nTools (all free):\n\naxe-core — industry standard, lowest false positives\n# In Playwright/Cypress\nnpm install @axe-core/playwright  # or @axe-core/cypress\n# In CI\nnpm install @axe-core/cli\naxe https://your-site.com --tags wcag2a,wcag2aa\n\nLighthouse — Chrome DevTools → Lighthouse → Accessibility\nWAVE — wave.webaim.org (visual overlay)\nPa11y — CLI scanner for CI pipelines\npa11y https://your-site.com --standard WCAG2AA\n\n\nCI pipeline integration:\n\n# GitHub Actions example\na11y-test:\n  runs-on: ubuntu-latest\n  steps:\n    - uses: actions/checkout@v4\n    - run: npm ci && npm run build\n    - run: npx pa11y-ci --config .pa11yci.json\n    - run: npx playwright test --grep @a11y\n\nLayer 2: Keyboard Testing (catches navigation issues)\n\nTest EVERY page/feature manually:\n\nTab test: Tab through entire page — can you reach everything? Is order logical?\nFocus visibility test: Is the focus indicator always visible and clear?\nActivation test: Can you activate every button, link, form control with Enter/Space?\nTrap test: Can you always Tab or Esc out of components (modals, menus)?\nSkip link test: Does \"Skip to main content\" work?\n\nKeyboard testing checklist per page:\n\nkeyboard_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\nLayer 3: Screen Reader Testing (catches semantic issues)\n\nTest key flows with at least ONE screen reader:\n\nScreen Reader\tOS\tBrowser\tCost\nNVDA\tWindows\tFirefox/Chrome\tFree\nVoiceOver\tmacOS/iOS\tSafari\tBuilt-in\nJAWS\tWindows\tChrome/Edge\t$$$\nTalkBack\tAndroid\tChrome\tBuilt-in\n\nEssential screen reader checks:\n\nPage structure announced (headings, landmarks, lists)\nImages described (or correctly hidden if decorative)\nForms: labels read, errors announced, required fields indicated\nDynamic content announced (alerts, loading states, live regions)\nCustom components: role, name, state all announced\n\nQuick VoiceOver test (macOS):\n\nCmd+F5 to toggle\nVO+Right arrow to navigate\nVO+U for rotor (headings, links, landmarks)\nTab for interactive elements only\nLayer 4: Manual Expert Review (catches context & usability issues)\n\nQuarterly or before major releases:\n\nContent readability and plain language\nCognitive load assessment\nError recovery paths\nMotion/animation sensitivity\nTouch target sizing (mobile)\nColor independence verification\nTesting Priority Matrix\nPage/Feature\tAuto\tKeyboard\tScreen Reader\tExpert\nHomepage\tEvery build\tMonthly\tQuarterly\tAnnually\nLogin/Signup\tEvery build\tMonthly\tQuarterly\tAnnually\nCheckout/Payment\tEvery build\tWeekly\tMonthly\tQuarterly\nSearch\tEvery build\tMonthly\tQuarterly\tAnnually\nForms (all)\tEvery build\tMonthly\tMonthly\tQuarterly\nNew features\tBefore ship\tBefore ship\tBefore ship\tMajor only\nPhase 5: Common Fix Patterns\nFix 1: Missing alt text\n<!-- ❌ -->\n<img src=\"chart.png\">\n<img src=\"decorative-swoosh.svg\">\n\n<!-- ✅ -->\n<img src=\"chart.png\" alt=\"Revenue grew 34% from $1.8M to $2.4M in Q3 2025\">\n<img src=\"decorative-swoosh.svg\" alt=\"\" role=\"presentation\">\n\nFix 2: Color-only indicators\n<!-- ❌ Error shown only by red border -->\n<input style=\"border-color: red\">\n\n<!-- ✅ Error with icon, text, and color -->\n<input aria-invalid=\"true\" aria-describedby=\"email-error\" style=\"border-color: red\">\n<span id=\"email-error\" role=\"alert\">⚠️ Please enter a valid email address</span>\n\nFix 3: Custom button\n<!-- ❌ Div pretending to be a button -->\n<div class=\"btn\" onclick=\"submit()\">Submit</div>\n\n<!-- ✅ Just use a button -->\n<button type=\"submit\">Submit</button>\n\n<!-- ✅ If you MUST use a div (you shouldn't) -->\n<div role=\"button\" tabindex=\"0\" onclick=\"submit()\" onkeydown=\"if(e.key==='Enter'||e.key===' ')submit()\">Submit</div>\n\nFix 4: Form labels\n<!-- ❌ Placeholder-only label -->\n<input placeholder=\"Email address\">\n\n<!-- ✅ Visible label -->\n<label for=\"email\">Email address</label>\n<input id=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"you@example.com\">\n\n<!-- ✅ Visually hidden label (when design requires it) -->\n<label for=\"search\" class=\"sr-only\">Search</label>\n<input id=\"search\" type=\"search\" placeholder=\"Search...\">\n\nFix 5: Focus management (SPA route changes)\n// After client-side navigation:\n// 1. Update document.title\ndocument.title = `${newPageName} | Site Name`;\n\n// 2. Move focus to main content or h1\nconst main = document.querySelector('main h1') || document.querySelector('main');\nmain.setAttribute('tabindex', '-1');\nmain.focus();\n\n// 3. Announce to screen readers\nconst announcer = document.getElementById('route-announcer');\nannouncer.textContent = `Navigated to ${newPageName}`;\n// <div id=\"route-announcer\" aria-live=\"assertive\" class=\"sr-only\"></div>\n\nFix 6: Modal focus trap\nfunction 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];\n\n  modal.addEventListener('keydown', (e) => {\n    if (e.key === 'Escape') { closeModal(); return; }\n    if (e.key !== 'Tab') return;\n    if (e.shiftKey && document.activeElement === first) {\n      e.preventDefault(); last.focus();\n    } else if (!e.shiftKey && document.activeElement === last) {\n      e.preventDefault(); first.focus();\n    }\n  });\n\n  first.focus(); // Move focus into modal on open\n}\n// On close: return focus to the trigger element\n\nFix 7: Live region for dynamic content\n<!-- Status messages (polite — waits for pause) -->\n<div aria-live=\"polite\" aria-atomic=\"true\" id=\"status\">\n  <!-- JS updates: \"3 results found\", \"Item added to cart\" -->\n</div>\n\n<!-- Error/urgent messages (assertive — interrupts) -->\n<div role=\"alert\" id=\"error-banner\">\n  <!-- JS updates: \"Payment failed. Please try again.\" -->\n</div>\n\nCSS: Visually Hidden (screen reader only)\n.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\nPhase 6: Design System Accessibility Standards\nColor Contrast Requirements\n\nTools for checking:\n\nColour Contrast Analyser (desktop app)\nWebAIM Contrast Checker (webaim.org/resources/contrastchecker)\nStark (Figma plugin)\n\nMinimum ratios:\n\nElement\tWCAG AA\tWCAG AAA\nNormal text (<18pt)\t4.5:1\t7:1\nLarge text (≥18pt or ≥14pt bold)\t3:1\t4.5:1\nUI components & graphics\t3:1\t—\nFocus indicator\t3:1\t—\nDisabled elements\tExempt\t—\nTouch Target Sizing\nStandard\tMinimum Size\tSpacing\nWCAG 2.5.8 (AAA)\t44×44 CSS px\t—\nWCAG 2.5.5 (AA)\t24×24 CSS px\t24px from other targets\nApple HIG\t44×44 pt\t—\nMaterial Design\t48×48 dp\t8dp spacing\nRecommendation\t44×44 px minimum\t8px spacing\nTypography Accessibility\nBase font size: 16px minimum (body text)\nLine height: 1.5× minimum for body text\nLine length: 50-75 characters (measure)\nParagraph spacing: 1.5× font size minimum\nFont choice: sans-serif for UI, high x-height, clear letterforms\nNever: All caps for long text, justified alignment, font size < 12px\nAnimation & Motion\n/* 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\nAll animations: provide pause/stop control\nNo content conveyed only through animation\nParallax scrolling: provide alternative or respect prefers-reduced-motion\nAuto-playing video: never. User-initiated only.\nDark Mode Accessibility\nRe-check ALL contrast ratios in dark mode (common failure point)\nDon't just invert — pure white (#fff) on dark backgrounds causes halation\nUse off-white (#e0e0e0 to #f0f0f0) on dark backgrounds\nColored text: re-verify contrast on dark backgrounds\nImages: consider transparent PNGs on dark backgrounds\nPhase 7: Component Accessibility Specifications\n\nFor each common component, specify the complete accessible behavior:\n\nButton\nsemantics: \"<button> 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 <a> for actions (buttons do things, links go places)\"\n  - \"Loading state: aria-busy='true', disable click, announce 'Loading...'\"\n\nForm Field\nrequired:\n  - \"Visible <label> 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: <fieldset> + <legend> (radio groups, address blocks)\"\n\nData Table\nrequired:\n  - \"<table>, <thead>, <tbody>, <th scope='col/row'>\"\n  - \"<caption> describing the table\"\n  - \"Complex tables: headers= attribute on <td>\"\nkeyboard:\n  - \"Sortable: button in <th>, 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\nNavigation\nrequired:\n  - \"<nav aria-label='Main'> (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: <button aria-expanded='false' aria-controls='menu-id'>\"\n  - \"Update aria-expanded on toggle\"\n\nPhase 8: Accessibility Scoring Rubric (0-100)\nDimension\tWeight\t0-25\t50\t75\t100\nAutomated scan\t15%\t50+ violations\t20-49\t5-19\t0 critical/serious\nKeyboard navigation\t20%\tMajor traps, unreachable elements\tMost works, some gaps\tAll reachable, minor focus issues\tPerfect tab order, visible focus, no traps\nScreen reader compat\t20%\tUnusable (missing labels, roles)\tPartially navigable\tMostly correct, minor omissions\tFull landmark/heading/label coverage\nColor & contrast\t10%\tMultiple failures\tSome failures\tMostly passing\tAll elements ≥ AA ratios\nForms & errors\t15%\tUnlabeled, no error handling\tLabels exist, errors unclear\tGood labels, some error gaps\tFull labels, inline errors, suggestions\nContent structure\t10%\tNo heading hierarchy, no landmarks\tPartial hierarchy\tGood structure, minor gaps\tPerfect heading levels, complete landmarks\nDynamic content\t10%\tNo live regions, modals trap\tSome announcements\tMost dynamic content announced\tAll state changes properly announced\n\nScoring thresholds:\n\n90-100: Audit-ready. Maintain with automated testing.\n70-89: Good foundation. Fix remaining issues within 30 days.\n50-69: Significant gaps. Prioritize critical/serious issues.\nBelow 50: Major remediation needed. Start with Phase 9 priority matrix.\nPhase 9: Remediation Priority Framework\nSeverity Classification (align with axe-core)\nSeverity\tImpact\tFix Timeline\tExamples\nCritical\tBlocks entire feature for AT users\t48 hours\tKeyboard trap, missing form labels, no alt on functional images\nSerious\tMajor difficulty, workaround exists\t1 week\tLow contrast text, missing heading hierarchy, unlabeled buttons\nModerate\tInconvenient but usable\t2 weeks\tMissing lang attribute, unclear link text, minor focus order issues\nMinor\tBest practice / enhancement\t1 month\tMissing autocomplete, suboptimal heading levels, redundant ARIA\nRemediation Sprint Plan\n\nWeek 1-2: Critical (foundation)\n\nAdd skip link\nFix all keyboard traps\nLabel all form fields\nAdd alt text to functional images\nFix focus management in modals\n\nWeek 3-4: Serious (structure)\n\nFix heading hierarchy\nAdd landmark regions\nFix color contrast failures\nAdd visible focus indicators\nFix dynamic content announcements\n\nMonth 2: Moderate (polish)\n\nFix link text\nAdd language attributes\nFix focus order issues\nAdd ARIA to custom components\nFix reflow at 320px\n\nMonth 3: Minor + ongoing (maintenance)\n\nAdd autocomplete attributes\nOptimize heading levels\nSet up automated CI testing\nEstablish ongoing review process\nPhase 10: Organizational Accessibility Program\nMaturity Model\nLevel\tName\tCharacteristics\n1\tAd Hoc\tNo awareness, no process, reactive to complaints\n2\tAware\tSome training, fix issues when found, no standards\n3\tManaged\tGuidelines documented, testing in QA, some automation\n4\tIntegrated\tA11y in design/dev process, CI testing, regular audits\n5\tLeading\tDisability community involved, proactive innovation, culture of inclusion\nRoles & Responsibilities\nRole\tResponsibility\tTraining Needed\nProduct Manager\tInclude a11y in requirements, accept/reject based on compliance\tWCAG overview, legal landscape\nDesigner\tAnnotate designs with a11y specs, check contrast, design keyboard flows\tDesign patterns, ARIA, contrast tools\nDeveloper\tImplement semantic HTML, ARIA, keyboard support, write a11y tests\tSemantic HTML, ARIA, testing tools\nQA\tKeyboard + screen reader testing, file a11y bugs with severity\tScreen reader basics, testing methodology\nContent\tPlain language, alt text, heading structure, link text\tContent guidelines, alt text writing\nLeadership\tBudget, staffing, accountability, legal compliance\tBusiness case, legal risk\nAccessibility Statement Template\n# Accessibility Statement\n\n[Company Name] is committed to ensuring digital accessibility for people with disabilities.\n\n## Conformance Status\nWe aim to conform to WCAG 2.1 Level AA. Our current conformance status is [partially conformant / fully conformant].\n\n## Measures Taken\n- Include accessibility as part of our design and development process\n- Conduct regular automated and manual accessibility testing\n- Train our team on accessibility best practices\n- Engage users with disabilities in testing\n\n## Known Issues\n[List any known issues and expected fix dates]\n\n## Feedback\nWe welcome your accessibility feedback. Contact us at:\n- Email: accessibility@[company].com\n- Phone: [number]\nWe aim to respond within [X] business days.\n\n## Technical Specifications\nThis website relies on: HTML, CSS, JavaScript, WAI-ARIA\nCompatible with: [browsers/AT listed]\n\nLast updated: [date]\n\nROI & Business Case\n\nRisk reduction:\n\nAverage ADA lawsuit defense: $10K-$100K+ (even if you win)\nAverage settlement: $5K-$25K (but 4,600+ lawsuits/year in US alone)\nEU EAA non-compliance: market access restrictions\n\nMarket expansion:\n\n1.3 billion people globally live with disabilities (WHO)\n16% of world population — larger than China's population\nDisability community spending power: $13 trillion globally (Return on Disability Group)\nAging population: 80% of people over 65 use the internet\n\nSEO benefits:\n\nSemantic HTML improves crawlability\nAlt text improves image search\nHeadings improve content understanding\nTranscripts/captions index video content\nPhase 11: Mobile Accessibility\niOS/Android Additional Checks\n Touch targets ≥ 44×44 points\n Swipe gestures have tap alternatives\n Screen reader (VoiceOver/TalkBack) navigates all elements\n Custom actions exposed via accessibilityCustomActions\n Haptic feedback for important state changes\n Dark mode supported and contrast-checked\n Dynamic Type (iOS) / Font Size (Android) supported up to 200%\n Landscape orientation supported\n No information conveyed solely through device motion\nReact Native Accessibility Props\n<TouchableOpacity\n  accessible={true}\n  accessibilityLabel=\"Delete item\"\n  accessibilityHint=\"Removes this item from your cart\"\n  accessibilityRole=\"button\"\n  accessibilityState={{ disabled: false }}\n/>\n\nFlutter Accessibility\nSemantics(\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\nPhase 12: Advanced Patterns\nCognitive Accessibility (WCAG 2.2 / COGA)\nClear, simple language (aim for 8th grade reading level)\nConsistent navigation and layout\nError prevention > error recovery\nUndo for destructive actions\nNo time pressure unless essential\nProgress indicators for multi-step processes\nHelp available on every page\nInternationalization & Accessibility\ndir=\"rtl\" for right-to-left languages\nDon't concatenate translated strings (word order varies)\nNumber/date formatting: use Intl API\nCurrency symbols: position varies by locale\nTest with longer text (German is ~30% longer than English)\nPDF Accessibility\nTag all content (headings, paragraphs, lists, tables, images)\nReading order matches visual order\nAlt text on all images\nLanguage specified\nBookmarks for navigation\nTool: PAC (PDF Accessibility Checker) — free\nEmail Accessibility\nrole=\"presentation\" on layout tables\nInline styles (not external CSS)\nalt on all images (including spacer GIFs: alt=\"\")\nSufficient color contrast (check in dark mode too)\nPlain text version always available\nSemantic headings (<h1>, <h2>)\nLink text descriptive (not \"click here\")\nQuality Rubric: 100-Point Scoring (8 Dimensions)\n#\tDimension\tWeight\tScore (0-10)\tWeighted\n1\tAutomated compliance (axe/pa11y)\t15%\t\t\n2\tKeyboard operability\t20%\t\t\n3\tScreen reader compatibility\t20%\t\t\n4\tVisual design (contrast, spacing, motion)\t10%\t\t\n5\tForms and error handling\t15%\t\t\n6\tContent structure (headings, landmarks)\t10%\t\t\n7\tDynamic content (live regions, SPA)\t5%\t\t\n8\tDocumentation & process\t5%\t\t\n\tTOTAL\t100%\t\t/100\nNatural Language Commands\n\nYou can ask me to:\n\n\"Audit [URL/page] for accessibility\" — Full WCAG 2.1 AA checklist review\n\"Fix this component for accessibility\" — Paste code, get accessible version\n\"Write alt text for [image description]\" — Context-appropriate alt text\n\"Create ARIA pattern for [component]\" — Full keyboard + screen reader spec\n\"Score our accessibility\" — Run the 100-point rubric\n\"Generate accessibility statement\" — Fill in the template\n\"Plan remediation for [issues]\" — Prioritized fix plan with timelines\n\"Check contrast for [colors]\" — Calculate ratios and pass/fail\n\"Design accessible [component]\" — Full spec with keyboard + ARIA + mobile\n\"Build accessibility testing plan\" — 4-layer pyramid customized to your stack\n\"Create accessibility training for [role]\" — Role-specific curriculum\n\"Review our design system for accessibility\" — Component-by-component audit\n\nBuilt by AfrexAI — Turning agent knowledge into competitive advantage."
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/1kalin/afrexai-accessibility-engine",
    "publisherUrl": "https://clawhub.ai/1kalin/afrexai-accessibility-engine",
    "owner": "1kalin",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/afrexai-accessibility-engine",
    "downloadUrl": "https://openagent3.xyz/downloads/afrexai-accessibility-engine",
    "agentUrl": "https://openagent3.xyz/skills/afrexai-accessibility-engine/agent",
    "manifestUrl": "https://openagent3.xyz/skills/afrexai-accessibility-engine/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/afrexai-accessibility-engine/agent.md"
  }
}