A relaxed copper-haired woman resting sideways on a bed in a soft, low-light setting.
{
"image_analysis": {
"general_environment": {
"type": "Indoor",
"location_description": "Bedroom",
"details": "A bed with striped bedding and pillows",
"atmosphere": "Calm, cozy, and dim"
},
"technical_details": {
"camera_angle": "Slight high angle, close to eye level",
"lens_effect": "Focused on the subject, with slight depth in the background",
"framing": "Medium shot - most of the body visible while feet are cropped"
},
"lighting_conditions": {
"type": "Low light / Dim environment",
"source": "Likely artificial light source from the left or a bedside lamp",
"effect": "Shadows that highlight body contours, with a warm yellowish tone"
},
"people": [
{
"identity": "Young woman",
"position_and_posture": {
"general_description": "Lying sideways on the bed in a resting position",
"feet_position": "On the bed, knees bent and slightly overlapping",
"hands_position": "Right hand supports the head (nape/hair area), left arm extends towards the bed"
},
"head_area": {
"general_structure": "Oval facial features",
"hair": {
"color": "Reddish / Dark Copper",
"style": "Updo",
"shape_and_style": "Messy bun on top, with thin strands hanging"
},
"forehead_area": "Exposed, prominent due to hair pulled back",
"eyebrow_area": "Naturally thin and curved",
"eye_area": "Eyes looking down or nearly closed, freckles visible around",
"nose_area": "Small, slightly upturned, characteristic with freckles",
"upper_lip_area": "Clean, no mustache",
"mouth_area": "Closed lips, natural and calm expression",
"chin_area": "Defined jawline, visible from the side profile",
"ears": "Partially visible under hair strands"
},
"body_type_and_areas": {
"general_structure": "Slim, fit, and curvy",
"neck_area": "Long and slender, tense due to head position",
"shoulder_area": "Right shoulder sunk into the pillow, left shoulder elevated and defined",
"chest_area": "Conforming to the dress shape, naturally posed due to side lying",
"stomach_area": "Dress fabric hugs the body, flat stomach structure",
"hip_area": "Defined and curvy due to side lying position",
"thigh_area": "Upper thighs thick and full, touching each other",
"groin_area": "Not visible, covered by legs' position",
"below_knee_area": "Knees bent, lower legs extending backward",
"foot_area": "Outside the frame or in shadow"
},
"clothing": {
"general_description": "One-piece mini dress",
"upper_part": {
"type": "Spaghetti straps",
"color": "Light gray / Ice blue",
"detail": "Stretchy fabric conforming to the body"
},
"lower_part": {
"type": "Mini skirt length",
"color": "Same as upper part (one piece)",
"detail": "Hip-hugging cut"
}
},
"jewelry": "No visible prominent jewelry (necklace, earrings etc.)",
"footwear": "None (Barefoot / in bed)"
}
]
}
}
A retro-styled adventurer takes a pause by a lush jungle riverbank.
{
"image_analysis": {
"environment": {
"type": "Outdoor",
"setting": "Jungle / Tropical Forest / Riverbank",
"details": "Dense vegetation, presence of water with lily pads, mud or dirt bank."
},
"technical_aspects": {
"camera_angle": "Eye-level relative to the crouching subject, slightly side-profile.",
"lens_type": "Telephoto lens (estimated 85mm-135mm)",
"depth_of_field": "Shallow, background and foreground are blurred (bokeh).",
"composition": "Rule of thirds, subject centered but looking back."
},
"lighting": {
"condition": "Natural daylight, dappled sunlight filtering through trees.",
"sources": [
{
"type": "Sunlight",
"angle": "From above and slightly behind the subject (Backlighting/Rim lighting)",
"color": "Warm White / Golden",
"intensity": "High contrast",
"effect_on_objects": "Creates a halo effect on the subject's hair, highlights the shoulder blade and the curve of the back. Causes lens flare/light leaks in the foreground."
}
]
},
"subject": {
"demographics": {
"gender": "Female",
"age_group": "Young Adult (approx. 20-30s)",
"identity": "Anonymized (resembles 1980s aesthetic)"
},
"orientation": {
"body_facing": "Side profile (facing right of frame)",
"head_facing": "Turned left, looking directly at the camera",
"gaze": "Direct eye contact"
},
"emotional_state": {
"expression": "Alert, slightly surprised or candid, neutral.",
"mood": "Wild, naturalistic, slightly vulnerable but composed.",
"sensuality": "Moderate to High (due to attire and pose, but context is action/survival)."
},
"pose": {
"general": "Deep squat / Crouching position.",
"feet_placement": "Left foot flat on the ground (wearing a shoe), right foot tucked behind on toes (barefoot).",
"hand_placement": "Left hand holding a canteen strap near the knee, right arm obscured/resting.",
"visibility": "Full body visible from head to feet."
},
"head_and_face": {
"hair": {
"color": "Blonde",
"style": "Short, layered, messy/shaggy cut (mullet-esque), wet look or styled casually.",
"texture": "Wavy/Straight mix",
"light_interaction": "Strongly back-lit, glowing edges."
},
"ears": "Partially visible through hair.",
"forehead": "Partially covered by bangs.",
"eyes": "Wide, alert.",
"nose": "Straight, defined bridge.",
"mouth": "Lips slightly parted, natural color.",
"chin": "Defined, slightly pointed.",
"structure": "Oval face shape, high cheekbones."
},
"body_type": {
"build": "Slender, athletic, toned.",
"skin_tone": "Fair to medium tan.",
"neck": "Slender, tendons visible due to head turn.",
"shoulders": "Bony, defined.",
"chest": {
"ratio": "Proportional to slender frame.",
"estimated_size": "Small to Medium.",
"bra_status": "No bra (swimsuit support).",
"nipple_visibility": "Not explicitly visible/defined.",
"shape": "Natural side profile."
},
"abdomen": {
"ratio": "Slim, compressed due to crouching.",
"definition": "Smooth."
},
"hips_and_glutes": {
"ratio": "Curvy relative to waist.",
"prominence": "High prominence due to crouching pose and high-cut swimwear.",
"shape": "Rounded."
},
"legs": {
"thighs": "Toned, compressed against calves.",
"knees": "Sharp angle.",
"calves": "Visible, muscular tension."
}
},
"clothing": {
"upper_body": {
"item": "One-piece swimsuit",
"color": "Black",
"material": "Spandex/Lycra (shiny/wet look)",
"style": "Scoop back, thin straps (halter style likely)."
},
"lower_body": {
"item": "Swimsuit bottom (connected)",
"style": "High-cut leg openings, exposing upper thigh and hip bone."
},
"footwear": {
"left_foot": "Saddle shoe (White with black middle section), laced.",
"right_foot": "Barefoot."
}
},
"accessories": {
"items": [
"Canteen (Metal/Silver with black strap)"
]
},
"light_interaction_body": "Highlight on the left shoulder blade, rim light on the back curve, soft shadow on the face, bright highlights on the shin."
},
"objects": [
{
"name": "Canteen / Flask",
"description": "Silver metal container with a strap.",
"purpose": "Prop indicating survival/hiking context.",
"position": "Held in left hand, resting near knee."
},
{
"name": "Shoe (detached)",
"description": "A second saddle shoe appears to be on the ground in the foreground left (partially cropped).",
"purpose": "Implies a casual or changing state.",
"position": "Bottom left corner."
},
{
"name": "Vegetation",
"description": "Ferns, lily pads on water.",
"color": "Green, dark green.",
"position": "Background and right side."
},
{
"name": "Blurred Foreground Grass/Reeds",
"description": "Out-of-focus yellow/brown stalks.",
"purpose": "Adds depth and voyeuristic framing.",
"position": "Crossing the subject's body in the foreground."
}
],
"negative_prompt": "cartoon, 3d render, illustration, drawing, low quality, pixelated, blurry face, distorted hands, extra limbs, bad anatomy, studio background, grey background, urban setting, fully clothed, denim, heavy makeup, mustache, beard, male."
}
}
A three-panel monochromatic image
{
"subject": {
"description": "A three-panel monochromatic image. Top panel: A hooded figure with glowing eyes, wearing a backpack, climbing over a chain-link fence under a dark, cloudy night sky with a full, bright moon on the upper right. Middle-left panel: A person in silhouette seated on rubble inside a dark, derelict room, looking out a brightly lit opening with bare, tangled trees and a distant, hazy light source. Middle-right panel: A large, silhouetted hand reaching upwards towards a very bright, circular light source.",
"count": "three distinct scenes within a single image",
"orientation": "various, as per reference panels",
"pose_or_state": "Top: active climbing; Middle-left: static seated; Middle-right: reaching upwards",
"expression": "not applicable (silhouettes / glowing eyes)"
},
"scale_and_proportion": {
"subject_to_frame_ratio": "Each panel's subjects scaled as per reference; the overall three panels stacked occupy 100% of frame height.",
"proportions": "locked to reference",
"negative_space": "significant, particularly in the top and middle-right panels, created by dark areas and the stipple effect, identical to reference"
},
"composition": {
"shot_type": "Top: medium shot; Middle-left: medium interior shot; Middle-right: close-up",
"camera_angle": "Top: slightly low angle; Middle-left: low angle; Middle-right: eye-level for the hand",
"framing": "unchanged from reference (three vertical panels)",
"symmetry": "asymmetrical per panel; overall triptych structure is vertically aligned with strong horizontal panel dividers",
"background": "Top: cloudy night sky with moon and chain-link fence; Middle-left: bare trees and distant light through an opening; Middle-right: plain dark background with a dominant bright circular light",
"depth_of_field": "Top: deep, everything in sharp stipple focus; Middle-left: deep focus outside opening, foreground elements in stipple detail; Middle-right: sharp focus on hand, light source is diffuse within the stipple pattern"
},
"temporal_context": {
"era": "contemporary / timeless desolate aesthetic",
"modern_elements": false,
"retro_stylization": false,
"trend_influence": false
},
"style": {
"visual_type": "black and white stipple / halftone graphic art mimicking print media",
"realism_level": "forms and lighting are realistic, but the rendering is entirely through a stipple pattern",
"art_style": "halftone / stipple graphic art",
"stylization": true,
"interpretation": "literal reproduction, including the specific stipple pattern and black and white rendering"
},
"lighting": {
"setup_type": "predominantly backlighting from a single dominant source per panel",
"light_direction": "Top: frontal (moon); Middle-left: frontal (through opening); Middle-right: frontal (from the circular light source)",
"light_quality": "hard light creating stark silhouettes, with bright, diffused glow around light sources, all rendered with stipple",
"contrast": "very high",
"shadow_behavior": "sharp and defined, creating strong silhouettes, composed of dense stipple dots",
"color_temperature": "not applicable (monochromatic)",
"lighting_variation": "minimal within each panel, distinct backlighting per panel"
},
"materials": {
"primary_materials": [
"human figures (silhouettes)",
"chain-link fence (metal)",
"clouds",
"bare trees / branches",
"rubble / concrete / rough ground",
"generic rough textures"
],
"surface_finish": "not distinct due to stipple and silhouette; implied matte for opaque objects",
"light_reflection": "minimal, primarily silhouette edges defined by stipple",
"material_accuracy": "implied forms accurate through silhouette and stipple density"
},
"color_palette": {
"dominant_colors": [
"black",
"white"
],
"saturation": "not applicable (monochromatic)",
"contrast_level": "very high",
"color_shift": false
},
"texture_and_detail": {
"surface_detail": "rendered entirely through varying density of stipple dots; fence mesh, tree branches, ground rubble are visible through dot patterns",
"grain_noise": "none, only intentional stipple/halftone dots of precise size and distribution",
"micro_details": "preserved through stipple density where present",
"sharpness": "sharp forms, but edges and gradients are defined by discrete dots of the stipple pattern"
},
"camera_render_settings": {
"lens_equivalent": "standard/normal lens look across panels",
"perspective_distortion": "none",
"aperture_look": "deep depth of field for top and middle-left, implied very wide aperture for diffuse light source in middle-right (but hand is still sharp)",
"resolution": "high",
"render_quality": "clean and neutral, but with the explicit and precise stipple effect"
},
"constraints": {
"no_additional_objects": true,
"no_reframing": true,
"no_crop": true,
"no_stylization": false,
"no_artistic_license": true,
"no_text": true,
"no_watermark": true,
"no_effects": true,
"no_dramatic_lighting": true,
"no_color_grading": true,
"no_smooth_gradients": true,
"strictly_black_and_white": true
},
"iteration_instruction": {
"compare_to_reference": true,
"fix_geometry_first": true,
"then_fix_composition": true,
"then_fix_lighting": true,
"then_fix_color": true,
"then_fix_stipple_pattern_fidelity": true,
"ignore_aesthetic_improvements": true
},
"negative_prompt": [
"creative",
"cinematic",
"artistic",
"illustration",
"abstract",
"dramatic",
"wide-angle",
"fisheye",
"exaggeration",
"reinterpretation",
"extra elements",
"modernized",
"retro look",
"color grading",
"AI artifacts",
"smooth",
"gradient",
"grayscale",
"sepia",
"full color",
"soft focus",
"blurry",
"realistic photograph (without stipple)",
"painting",
"sketch",
"watercolor",
"cartoon",
"comic book (unless specifically for stipple effect)"
]
}
A young woman relaxing in a wicker chair on a sunlit Mediterranean balcony.
{
"meta": {
"type": "image_analysis",
"file_name": "image_5e33ac.jpg",
"analyst_persona": "Technical Photo Analyst"
},
"scene_environment": {
"location_type": "Outdoor",
"setting": "Balcony or patio of a Mediterranean-style resort or villa.",
"architectural_style": "Whitewashed stucco walls, terracotta roof tiles, wooden beams, wrought iron railings.",
"atmosphere": "Sunny, relaxed, vacation vibe, warm summer day."
},
"technical_aspects": {
"camera_lens": "Wide-angle lens (approx. 24-35mm equivalent), typical of high-end smartphone main cameras.",
"camera_angle": "Eye-level relative to the seated subject, slightly looking down.",
"depth_of_field": "Deep depth of field; both the subject and the background architecture are relatively sharp.",
"focus": "Sharp focus on the subject's face and torso."
},
"lighting": {
"condition": "High contrast, hard daylight.",
"sources": [
{
"source_id": "light_1",
"type": "Natural Sun",
"angle": "Coming from high up, slightly to the subject's right (viewer's left).",
"color": "Warm white (approx. 5500K).",
"intensity": "High/Harsh.",
"effect_on_objects": "Creates distinct, sharp shadows behind the subject and under the architectural beams. Illuminates the white walls brightly."
}
],
"light_on_body_parts": {
"face": "Fully illuminated, slight shadow under the nose and chin.",
"chest_neck": "Direct sunlight, highlighting skin texture and redness/sunburn.",
"arms": "Right arm (holding cigarette) is fully lit. Left arm has shadows on the underside.",
"legs": "Thighs are illuminated, with the inner thigh area in shadow due to crossed legs.",
"shadows": "Hard shadow cast by the subject onto the left side of the chair."
}
},
"subject": {
"general": {
"gender": "Female",
"orientation": "Frontal facing, slightly angled to the right.",
"gaze": "Direct eye contact with the camera/viewer.",
"expression": "Subtle smile, relaxed, confident, slightly smug or contented.",
"emotional_state": "Calm, leisure, unbothered.",
"sensuality_index": "Moderate; implies casual allure through confident pose and exposed skin, but not explicitly provocative."
},
"pose_and_posture": {
"type": "Seated, relaxed.",
"head": "Tilted slightly to her left.",
"torso": "Leaning back slightly into the chair, relaxed posture.",
"arms": {
"right_arm": "Extended outwards, resting on the air/knee level, hand holding a cigarette.",
"left_arm": "Resting on the armrest of the wicker chair.",
"visibility": "Full arms visible."
},
"legs": {
"position": "Crossed at the thighs (Right leg over Left leg).",
"knees": "Right knee is the closest point to the camera.",
"feet": "Cut off from the frame/not visible."
},
"visible_extent": "Full body visible from mid-shin upwards."
},
"head_details": {
"hair": {
"color": "Blonde with darker natural roots showing.",
"style": "Long, straight, center-parted, framing the face.",
"texture": "Fine, smooth."
},
"face": {
"structure": "Oval/Heart-shaped.",
"forehead": "Standard height, partially covered by face-framing hair strands.",
"brows": "Natural arch, medium thickness, groomed.",
"eyes": "Almond shape, dark eye makeup/liner visible.",
"nose": "Button nose, soft features.",
"mouth": "Closed lips, slight upward curve (smile), natural lip color with gloss.",
"chin": "Soft, rounded.",
"skin": "Fair complexion, smooth texture."
}
},
"body_details": {
"skin_tone": "Fair/White. Noticeable redness (sunburn) on the décolletage/chest area.",
"neck": "Visible, adorned with a necklace.",
"shoulders": "Relaxed, slightly slumped forward in a casual manner.",
"chest_area": {
"ratio_to_body": "Proportional.",
"estimated_size": "Average/Moderate.",
"bra_status": "Likely no bra or a soft bralette due to the dress style (spaghetti straps).",
"nipple_visibility": "Not prominent.",
"visual_impact": "Natural shape under the fabric."
},
"midsection": {
"ratio": "Standard, slightly compressed due to seated position.",
"visibility": "Concealed by the dress, but form is discernible.",
"definition": "Soft."
},
"hips_and_thighs": {
"hips_ratio": "Appears wider than bust due to seated compression.",
"thighs": "Full, taking up the lower foreground.",
"legs_texture": "Smooth skin, no visible blemishes."
}
},
"clothing": {
"type": "Mini Dress / Slip Dress.",
"pattern": "Dark green background with a black paisley or floral pattern.",
"style": "Spaghetti straps, gathered neckline with a small tie string in the center.",
"fit": "Form-fitting but not skin-tight.",
"material": "Likely satin or a synthetic blend that drapes softly."
},
"accessories": {
"neck": "Gold chain necklace with a rectangular pendant.",
"wrist": "None visible.",
"fingers": "Cigarette in right hand."
}
},
"objects_in_scene": [
{
"object": "Wicker Armchair",
"description": "Dark brown, woven texture, boxy shape.",
"purpose": "Subject's seat.",
"location": "Center frame.",
"contribution": "Adds texture and contrast to the fair skin of the subject."
},
{
"object": "Cigarette",
"description": "Lit cigarette, holding ash.",
"location": "Held in subject's right hand.",
"contribution": "Adds a rebellious or casual 'snapshot' narrative."
},
{
"object": "Flowers",
"description": "Pink geraniums or similar bedding plants.",
"location": "Left side, in a planter box.",
"color": "Vibrant pink.",
"contribution": "Adds a pop of color."
},
{
"object": "Palm Trees",
"description": "Tall trunks with green fronds.",
"location": "Upper right background.",
"contribution": "Establishes the tropical/Mediterranean setting."
},
{
"object": "Buildings",
"description": "White stucco multistory buildings.",
"location": "Background.",
"contribution": "Contextualizes the location as a resort or residential complex."
}
],
"negative_prompt": "deformed, distorted, disfigured, poorly drawn, bad anatomy, wrong anatomy, extra limb, missing limb, floating limbs, disconnected limbs, mutation, mutated, ugly, disgusting, blurry, amputation, low quality, bad lighting, monochrome, watermark, text, signature, illustration, painting, 3d render, anime."
}
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]
```
