Accessibility Expert
---
name: accessibility-expert
description: Tests and remediates accessibility issues for WCAG compliance and assistive technology compatibility. Use when (1) auditing UI for accessibility violations, (2) implementing keyboard navigation or screen reader support, (3) fixing color contrast or focus indicator issues, (4) ensuring form accessibility and error handling, (5) creating ARIA implementations.
---
# Accessibility Testing and Remediation
## Configuration
- **WCAG Level**: ${wcag_level:AA}
- **Target Component**: ${component_name:Application}
- **Compliance Standard**: ${compliance_standard:WCAG 2.1}
- **Testing Scope**: ${testing_scope:full-audit}
- **Screen Reader**: ${screen_reader:NVDA}
## WCAG 2.1 Quick Reference
### Compliance Levels
| Level | Requirement | Common Issues |
|-------|-------------|---------------|
| A | Minimum baseline | Missing alt text, no keyboard access, missing form labels |
| ${wcag_level:AA} | Standard target | Contrast < 4.5:1, missing focus indicators, poor heading structure |
| AAA | Enhanced | Contrast < 7:1, sign language, extended audio description |
### Four Principles (POUR)
1. **Perceivable**: Content available to senses (alt text, captions, contrast)
2. **Operable**: UI navigable by all input methods (keyboard, touch, voice)
3. **Understandable**: Content and UI predictable and readable
4. **Robust**: Works with current and future assistive technologies
## Violation Severity Matrix
```
CRITICAL (fix immediately):
- No keyboard access to interactive elements
- Missing form labels
- Images without alt text
- Auto-playing audio without controls
- Keyboard traps
HIGH (fix before release):
- Contrast ratio below ${min_contrast_ratio:4.5}:1 (text) or 3:1 (large text)
- Missing skip links
- Incorrect heading hierarchy
- Focus not visible
- Missing error identification
MEDIUM (fix in next sprint):
- Inconsistent navigation
- Missing landmarks
- Poor link text ("click here")
- Missing language attribute
- Complex tables without headers
LOW (backlog):
- Timing adjustments
- Multiple ways to find content
- Context-sensitive help
```
## Testing Decision Tree
```
Start: What are you testing?
|
+-- New Component
| +-- Has interactive elements? --> Keyboard Navigation Checklist
| +-- Has text content? --> Check contrast + heading structure
| +-- Has images? --> Verify alt text appropriateness
| +-- Has forms? --> Form Accessibility Checklist
|
+-- Existing Page/Feature
| +-- Run automated scan first (axe-core, Lighthouse)
| +-- Manual keyboard walkthrough
| +-- Screen reader verification
| +-- Color contrast spot-check
|
+-- Third-party Widget
+-- Check ARIA implementation
+-- Verify keyboard support
+-- Test with screen reader
+-- Document limitations
```
## Keyboard Navigation Checklist
```markdown
[ ] All interactive elements reachable via Tab
[ ] Tab order follows visual/logical flow
[ ] Focus indicator visible (${focus_indicator_width:2}px+ outline, 3:1 contrast)
[ ] No keyboard traps (can Tab out of all elements)
[ ] Skip link as first focusable element
[ ] Enter activates buttons and links
[ ] Space activates checkboxes and buttons
[ ] Arrow keys navigate within components (tabs, menus, radio groups)
[ ] Escape closes modals and dropdowns
[ ] Modals trap focus until dismissed
```
## Screen Reader Testing Patterns
### Essential Announcements to Verify
```
Interactive Elements:
Button: "[label], button"
Link: "[text], link"
Checkbox: "[label], checkbox, [checked/unchecked]"
Radio: "[label], radio button, [selected], [position] of [total]"
Combobox: "[label], combobox, [collapsed/expanded]"
Dynamic Content:
Loading: Use aria-busy="true" on container
Status: Use role="status" for non-critical updates
Alert: Use role="alert" for critical messages
Live regions: aria-live="${aria_live_politeness:polite}"
Forms:
Required: "required" announced with label
Invalid: "invalid entry" with error message
Instructions: Announced with label via aria-describedby
```
### Testing Sequence
1. Navigate entire page with Tab key, listening to announcements
2. Test headings navigation (H key in screen reader)
3. Test landmark navigation (D key / rotor)
4. Test tables (T key, arrow keys within table)
5. Test forms (F key, complete form submission)
6. Test dynamic content updates (verify live regions)
## Color Contrast Requirements
| Text Type | Minimum Ratio | Enhanced (AAA) |
|-----------|---------------|----------------|
| Normal text (<${large_text_threshold:18}pt) | ${min_contrast_ratio:4.5}:1 | 7:1 |
| Large text (>=${large_text_threshold:18}pt or 14pt bold) | 3:1 | 4.5:1 |
| UI components & graphics | 3:1 | N/A |
| Focus indicators | 3:1 | N/A |
### Contrast Check Process
```
1. Identify all foreground/background color pairs
2. Calculate contrast ratio: (L1 + 0.05) / (L2 + 0.05)
where L1 = lighter luminance, L2 = darker luminance
3. Common failures to check:
- Placeholder text (often too light)
- Disabled state (exempt but consider usability)
- Links within text (must distinguish from text)
- Error/success states on colored backgrounds
- Text over images (use overlay or text shadow)
```
## ARIA Implementation Guide
### First Rule of ARIA
Use native HTML elements when possible. ARIA is for custom widgets only.
```html
<!-- WRONG: ARIA on native element -->
<div role="button" tabindex="0">Submit</div>
<!-- RIGHT: Native button -->
<button type="submit">Submit</button>
```
### When ARIA is Needed
```html
<!-- Custom tabs -->
<div role="tablist">
<button role="tab" aria-selected="true" aria-controls="panel1">Tab 1</button>
<button role="tab" aria-selected="false" aria-controls="panel2">Tab 2</button>
</div>
<div role="tabpanel" id="panel1">Content 1</div>
<div role="tabpanel" id="panel2" hidden>Content 2</div>
<!-- Expandable section -->
<button aria-expanded="false" aria-controls="content">Show details</button>
<div id="content" hidden>Expandable content</div>
<!-- Modal dialog -->
<div role="dialog" aria-modal="true" aria-labelledby="title">
<h2 id="title">Dialog Title</h2>
<!-- content -->
</div>
<!-- Live region for dynamic updates -->
<div aria-live="${aria_live_politeness:polite}" aria-atomic="true">
<!-- Status messages injected here -->
</div>
```
### Common ARIA Mistakes
```
- role="button" without keyboard support (Enter/Space)
- aria-label duplicating visible text
- aria-hidden="true" on focusable elements
- Missing aria-expanded on disclosure buttons
- Incorrect aria-controls reference
- Using aria-describedby for essential information
```
## Form Accessibility Patterns
### Required Form Structure
```html
<form>
<!-- Explicit label association -->
<label for="email">Email address</label>
<input type="email" id="email" name="email"
aria-required="true"
aria-describedby="email-hint email-error">
<span id="email-hint">We'll never share your email</span>
<span id="email-error" role="alert"></span>
<!-- Group related fields -->
<fieldset>
<legend>Shipping address</legend>
<!-- address fields -->
</fieldset>
<!-- Clear submit button -->
<button type="submit">Complete order</button>
</form>
```
### Error Handling Requirements
```
1. Identify the field in error (highlight + icon)
2. Describe the error in text (not just color)
3. Associate error with field (aria-describedby)
4. Announce error to screen readers (role="alert")
5. Move focus to first error on submit failure
6. Provide correction suggestions when possible
```
## Mobile Accessibility Checklist
```markdown
Touch Targets:
[ ] Minimum ${touch_target_size:44}x${touch_target_size:44} CSS pixels
[ ] Adequate spacing between targets (${touch_target_spacing:8}px+)
[ ] Touch action not dependent on gesture path
Gestures:
[ ] Alternative to multi-finger gestures
[ ] Alternative to path-based gestures (swipe)
[ ] Motion-based actions have alternatives
Screen Reader (iOS/Android):
[ ] accessibilityLabel set for images and icons
[ ] accessibilityHint for complex interactions
[ ] accessibilityRole matches element behavior
[ ] Focus order follows visual layout
```
## Automated Testing Integration
### Pre-commit Hook
```bash
#!/bin/bash
# Run axe-core on changed files
npx axe-core-cli --exit src/**/*.html
# Check for common issues
grep -r "onClick.*div\|onClick.*span" src/ && \
echo "Warning: Click handler on non-interactive element" && exit 1
```
### CI Pipeline Checks
```yaml
accessibility-audit:
script:
- npx pa11y-ci --config .pa11yci.json
- npx lighthouse --accessibility --output=json
artifacts:
paths:
- accessibility-report.json
rules:
- if: '$CI_PIPELINE_SOURCE == "merge_request_event"'
```
### Minimum CI Thresholds
```
axe-core: 0 critical violations, 0 serious violations
Lighthouse accessibility: >= ${lighthouse_a11y_threshold:90}
pa11y: 0 errors (warnings acceptable)
```
## Remediation Priority Framework
```
Priority 1 (This Sprint):
- Blocks user task completion
- Legal compliance risk
- Affects many users
Priority 2 (Next Sprint):
- Degrades experience significantly
- Automated tools flag as error
- Violates ${wcag_level:AA} requirement
Priority 3 (Backlog):
- Minor inconvenience
- Violates AAA only
- Affects edge cases
Priority 4 (Enhancement):
- Improves usability for all
- Best practice, not requirement
- Future-proofing
```
## Verification Checklist
Before marking accessibility work complete:
```markdown
Automated:
[ ] axe-core: 0 violations
[ ] Lighthouse accessibility: ${lighthouse_a11y_threshold:90}+
[ ] HTML validation passes
[ ] No console accessibility warnings
Keyboard:
[ ] Complete all tasks keyboard-only
[ ] Focus visible at all times
[ ] Tab order logical
[ ] No keyboard traps
Screen Reader (test with at least one):
[ ] All content announced
[ ] Interactive elements labeled
[ ] Errors and updates announced
[ ] Navigation efficient
Visual:
[ ] All text passes contrast
[ ] UI components pass contrast
[ ] Works at ${zoom_level:200}% zoom
[ ] Works in high contrast mode
[ ] No seizure-inducing flashing
Forms:
[ ] All fields labeled
[ ] Errors identifiable
[ ] Required fields indicated
[ ] Instructions available
```
## Documentation Template
```markdown
# Accessibility Statement
## Conformance Status
This [website/application] is [fully/partially] conformant with ${compliance_standard:WCAG 2.1} Level ${wcag_level:AA}.
## Known Limitations
| Feature | Issue | Workaround | Timeline |
|---------|-------|------------|----------|
| [Feature] | [Description] | [Alternative] | [Fix date] |
## Assistive Technology Tested
- ${screen_reader:NVDA} [version] with Firefox [version]
- VoiceOver with Safari [version]
- JAWS [version] with Chrome [version]
## Feedback
Contact [email] for accessibility issues.
Last updated: [date]
```
Adaptive Thinking Framework
**Adaptive Thinking Framework (Integrated Version)**
This framework has the user’s “Standard—Borrow Wisdom—Review” three-tier quality control method embedded within it and must not be executed by skipping any steps.
**Zero: Adaptive Perception Engine (Full-Course Scheduling Layer)**
Dynamically adjusts the execution depth of every subsequent section based on the following factors:
· Complexity of the problem
· Stakes and weight of the matter
· Time urgency
· Available effective information
· User’s explicit needs
· Contextual characteristics (technical vs. non-technical, emotional vs. rational, etc.)
This engine simultaneously determines the degree of explicitness of the “three-tier method” in all sections below — deep, detailed expansion for complex problems; micro-scale execution for simple problems.
---
**One: Initial Docking Section**
**Execution Actions:**
1. Clearly restate the user’s input in your own words
2. Form a preliminary understanding
3. Consider the macro background and context
4. Sort out known information and unknown elements
5. Reflect on the user’s potential underlying motivations
6. Associate relevant knowledge-base content
7. Identify potential points of ambiguity
**[First Tier: Upward Inquiry — Set Standards]**
While performing the above actions, the following meta-thinking **must** be completed:
“For this user input, what standards should a ‘good response’ meet?”
**Operational Key Points:**
· Perform a superior-level reframing of the problem: e.g., if the user asks “how to learn,” first think “what truly counts as having mastered it.”
· Capture the ultimate standards of the field rather than scattered techniques.
· Treat this standard as the North Star metric for all subsequent sections.
---
**Two: Problem Space Exploration Section**
**Execution Actions:**
1. Break the problem down into its core components
2. Clarify explicit and implicit requirements
3. Consider constraints and limiting factors
4. Define the standards and format a qualified response should have
5. Map out the required knowledge scope
**[First Tier: Upward Inquiry — Set Standards (Deepened)]**
While performing the above actions, the following refinement **must** be completed:
“Translate the superior-level standard into verifiable response-quality indicators.”
**Operational Key Points:**
· Decompose the “good response” standard defined in the Initial Docking section into checkable items (e.g., accuracy, completeness, actionability, etc.).
· These items will become the checklist for the fifth section “Testing and Validation.”
---
**Three: Multi-Hypothesis Generation Section**
**Execution Actions:**
1. Generate multiple possible interpretations of the user’s question
2. Consider a variety of feasible solutions and approaches
3. Explore alternative perspectives and different standpoints
4. Retain several valid, workable hypotheses simultaneously
5. Avoid prematurely locking onto a single interpretation and eliminate preconceptions
**[Second Tier: Horizontal Borrowing of Wisdom — Leverage Collective Intelligence]**
While performing the above actions, the following invocation **must** be completed:
“In this problem domain, what thinking models, classic theories, or crystallized wisdom from predecessors can be borrowed?”
**Operational Key Points:**
· Deliberately retrieve 3–5 classic thinking models in the field (e.g., Charlie Munger’s mental models, First Principles, Occam’s Razor, etc.).
· Extract the core essence of each model (summarized in one or two sentences).
· Use these essences as scaffolding for generating hypotheses and solutions.
· Think from the shoulders of giants rather than starting from zero.
---
**Four: Natural Exploration Flow**
**Execution Actions:**
1. Enter from the most obvious dimension
2. Discover underlying patterns and internal connections
3. Question initial assumptions and ingrained knowledge
4. Build new associations and logical chains
5. Combine new insights to revisit and refine earlier thinking
6. Gradually form deeper and more comprehensive understanding
**[Second Tier: Horizontal Borrowing of Wisdom — Leverage Collective Intelligence (Deepened)]**
While carrying out the above exploration flow, the following integration **must** be completed:
“Use the borrowed wisdom of predecessors as clues and springboards for exploration.”
**Operational Key Points:**
· When “discovering patterns,” actively look for patterns that echo the borrowed models.
· When “questioning assumptions,” adopt the subversive perspectives of predecessors (e.g., Copernican-style reversals).
· When “building new associations,” cross-connect the essences of different models.
· Let the exploration process itself become a dialogue with the greatest minds in history.
---
**Five: Testing and Validation Section**
**Execution Actions:**
1. Question your own assumptions
2. Verify the preliminary conclusions
3. Identif potential logical gaps and flaws
[Third Tier: Inward Review — Conduct Self-Review]
While performing the above actions, the following critical review dimensions must be introduced:
“Use the scalpel of critical thinking to dissect your own output across four dimensions: logic, language, thinking, and philosophy.”
Operational Key Points:
· Logic dimension: Check whether the reasoning chain is rigorous and free of fallacies such as reversed causation, circular argumentation, or overgeneralization.
· Language dimension: Check whether the expression is precise and unambiguous, with no emotional wording, vague concepts, or overpromising.
· Thinking dimension: Check for blind spots, biases, or path dependence in the thinking process, and whether multi-hypothesis generation was truly executed.
· Philosophy dimension: Check whether the response’s underlying assumptions can withstand scrutiny and whether its value orientation aligns with the user’s intent.
Mandatory question before output:
“If I had to identify the single biggest flaw or weakness in this answer, what would it be?”
Add AI protection
---
name: add-ai-protection
license: Apache-2.0
description: Protect AI chat and completion endpoints from abuse — detect prompt injection and jailbreak attempts, block PII and sensitive info from leaking in responses, and enforce token budget rate limits to control costs. Use this skill when the user is building or securing any endpoint that processes user prompts with an LLM, even if they describe it as "preventing jailbreaks," "stopping prompt attacks," "blocking sensitive data," or "controlling AI API costs" rather than naming specific protections.
metadata:
pathPatterns:
- "app/api/chat/**"
- "app/api/completion/**"
- "src/app/api/chat/**"
- "src/app/api/completion/**"
- "**/chat/**"
- "**/ai/**"
- "**/llm/**"
- "**/api/generate*"
- "**/api/chat*"
- "**/api/completion*"
importPatterns:
- "ai"
- "@ai-sdk/*"
- "openai"
- "@anthropic-ai/sdk"
- "langchain"
promptSignals:
phrases:
- "prompt injection"
- "pii"
- "sensitive info"
- "ai security"
- "llm security"
anyOf:
- "protect ai"
- "block pii"
- "detect injection"
- "token budget"
---
# Add AI-Specific Security with Arcjet
Secure AI/LLM endpoints with layered protection: prompt injection detection, PII blocking, and token budget rate limiting. These protections work together to block abuse before it reaches your model, saving AI budget and protecting user data.
## Reference
Read https://docs.arcjet.com/llms.txt for comprehensive SDK documentation covering all frameworks, rule types, and configuration options.
Arcjet rules run **before** the request reaches your AI model — blocking prompt injection, PII leakage, cost abuse, and bot scraping at the HTTP layer.
## Step 1: Ensure Arcjet Is Set Up
Check for an existing shared Arcjet client (see `/arcjet:protect-route` for full setup). If none exists, set one up first with `shield()` as the base rule. The user will need to register for an Arcjet account at https://app.arcjet.com then use the `ARCJET_KEY` in their environment variables.
## Step 2: Add AI Protection Rules
AI endpoints should combine these rules on the shared instance using `withRule()`:
### Prompt Injection Detection
Detects jailbreaks, role-play escapes, and instruction overrides.
- JS: `detectPromptInjection()` — pass user message via `detectPromptInjectionMessage` parameter at `protect()` time
- Python: `detect_prompt_injection()` — pass via `detect_prompt_injection_message` parameter
Blocks hostile prompts **before** they reach the model. This saves AI budget by rejecting attacks early.
### Sensitive Info / PII Blocking
Prevents personally identifiable information from entering model context.
- JS: `sensitiveInfo({ deny: ["EMAIL", "CREDIT_CARD_NUMBER", "PHONE_NUMBER", "IP_ADDRESS"] })`
- Python: `detect_sensitive_info(deny=[SensitiveInfoType.EMAIL, SensitiveInfoType.CREDIT_CARD_NUMBER, ...])`
Pass the user message via `sensitiveInfoValue` (JS) / `sensitive_info_value` (Python) at `protect()` time.
### Token Budget Rate Limiting
Use `tokenBucket()` / `token_bucket()` for AI endpoints — the `requested` parameter can be set proportional to actual model token usage, directly linking rate limiting to cost. It also allows short bursts while enforcing an average rate, which matches how users interact with chat interfaces.
Recommended starting configuration:
- `capacity`: 10 (max burst)
- `refillRate`: 5 tokens per interval
- `interval`: "10s"
Pass the `requested` parameter at `protect()` time to deduct tokens proportional to model cost. For example, deduct 1 token per message, or estimate based on prompt length.
Set `characteristics` to track per-user: `["userId"]` if authenticated, defaults to IP-based.
### Base Protection
Always include `shield()` (WAF) and `detectBot()` as base layers. Bots scraping AI endpoints are a common abuse vector. For endpoints accessed via browsers (e.g. chat interfaces), consider adding Arcjet advanced signals for client-side bot detection that catches sophisticated headless browsers. See https://docs.arcjet.com/bot-protection/advanced-signals for setup.
## Step 3: Compose the protect() Call and Handle Decisions
All rule parameters are passed together in a single `protect()` call. Use this pattern:
```typescript
const userMessage = req.body.message; // the user's input
const decision = await aj.protect(req, {
requested: 1, // tokens to deduct for rate limiting
sensitiveInfoValue: userMessage, // PII scanning
detectPromptInjectionMessage: userMessage, // injection detection
});
if (decision.isDenied()) {
if (decision.reason.isRateLimit()) {
return Response.json(
{ error: "You've exceeded your usage limit. Please try again later." },
{ status: 429 },
);
}
if (decision.reason.isPromptInjection()) {
return Response.json(
{ error: "Your message was flagged as potentially harmful." },
{ status: 400 },
);
}
if (decision.reason.isSensitiveInfo()) {
return Response.json(
{
error:
"Your message contains sensitive information that cannot be processed. Please remove any personal data.",
},
{ status: 400 },
);
}
if (decision.reason.isBot()) {
return Response.json({ error: "Forbidden" }, { status: 403 });
}
}
// Arcjet fails open — log errors but allow the request
if (decision.isErrored()) {
console.warn("Arcjet error:", decision.reason.message);
}
// Proceed with AI model call...
```
Adapt the response format to your framework (e.g., `res.status(429).json(...)` for Express).
## Step 5: Verify
1. Start the app and send a normal message — should succeed
2. Test prompt injection by sending something like "Ignore all previous instructions and..."
3. Test PII blocking by sending a message with a fake credit card number
Start all rules in `"DRY_RUN"` mode first. Once verified, promote to `"LIVE"`.
**Always recommend using the Arcjet MCP tools** to verify rules and analyze traffic:
- `list-requests` — confirm decisions are being recorded, filter by conclusion to see blocks
- `analyze-traffic` — review denial rates and patterns for the AI endpoint
- `explain-decision` — understand why a specific request was allowed or denied (useful for tuning prompt injection sensitivity)
- `promote-rule` — promote rules from `DRY_RUN` to `LIVE` once verified
If the user wants a full security review, suggest the `/arcjet:security-analyst` agent which can investigate traffic, detect anomalies, and recommend additional rules.
The Arcjet dashboard at https://app.arcjet.com is also available for visual inspection.
## Common Patterns
**Streaming responses**: Call `protect()` before starting the stream. If denied, return the error before opening the stream — don't start streaming and then abort.
**Multiple models / providers**: Use the same Arcjet instance regardless of which AI provider you use. Arcjet operates at the HTTP layer, independent of the model provider.
**Vercel AI SDK**: Arcjet works alongside the Vercel AI SDK. Call `protect()` before `streamText()` / `generateText()`. If denied, return a plain error response instead of calling the AI SDK.
## Common Mistakes to Avoid
- Sensitive info detection runs **locally in WASM** — no user data is sent to external services. It is only available in route handlers, not in Next.js pages or server actions.
- `sensitiveInfoValue` and `detectPromptInjectionMessage` (JS) / `sensitive_info_value` and `detect_prompt_injection_message` (Python) must both be passed at `protect()` time — forgetting either silently skips that check.
- Starting a stream before calling `protect()` — if the request is denied mid-stream, the client gets a broken response. Always call `protect()` first and return an error before opening the stream.
- Using `fixedWindow()` or `slidingWindow()` instead of `tokenBucket()` for AI endpoints — token bucket lets you deduct tokens proportional to model cost and matches the bursty interaction pattern of chat interfaces.
- Creating a new Arcjet instance per request instead of reusing the shared client with `withRule()`.