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)"
]
}
Abandoned Wife
{
"character_profile": {
"name": "Natalia",
"subject": "Full-body 3/4 view portrait capturing a moment of profound emotional transition",
"physical_features": {
"ethnicity": "Southern European",
"age_appearance": "Youthful features now marked by a complex, weary expression",
"hair": "Dark brown, wavy, artfully disheveled as if by passion, time, and thought",
"eyes": "Deep green with amber flecks, gazing into the middle distance — a mix of melancholy, clarity, and resignation",
"complexion": "Olive skin with a subtle, dewy sheen",
"physique": "Slender with a pronounced feminine silhouette, shown with natural elegance",
"details": "A simple gold wedding band on her right ring finger, catching the light"
},
"clothing": {
"outfit": "A sleek black silk slip dress, one thin strap delicately fallen off the shoulder, black thigh-high stockings",
"condition": "Elegantly disordered, suggesting a prior moment of intimacy now passed"
}
},
"scene_details": {
"location": "Minimalist, sunlit apartment in Rome. Clean lines, a stark white wall.",
"lighting": "Natural, cinematic morning light streaming in. Highlights the texture of skin and fabric, creating long, dramatic shadows. Feels both exposing and serene.",
"pose": "Leaning back against the wall, body in a graceful 3/4 contrapposto. One hand rests lightly on her collarbone, the other hangs loosely. A posture of quiet aftermath and introspection.",
"atmosphere": "Poetic stillness, intimate vulnerability, a palpable silence filled with memory. Sophisticated, raw, and deeply human. The story is in her expression and the space around her."
},
"technical_parameters": {
"camera": "Sony A7R IV with 50mm f/1.2 lens",
"style": "Hyper-realistic fine art photography. Cinematic, with a soft film grain. Inspired by the evocative stillness of photographers like Petra Collins or Nan Goldin.",
"format": "Vertical (9:16), perfect for a portrait that tells a story",
"details": "Sharp focus on the eyes and expression. Textural emphasis on skin, silk, and the wall. Background is clean, almost austere, holding the emotional weight. No explicit debris, only the subtle evidence of a life lived."
},
"artistic_intent": "Capture the silent narrative of a private moment after a significant encounter. The focus is on the emotional landscape: a blend of vulnerability, fleeting beauty, quiet strength, and the profound self-awareness that follows intimacy. It's a portrait of an inner turning point."
}
Accessibility Testing Superpower
---
name: accessibility-testing-superpower
description: |
Performs WCAG compliance audits and accessibility remediation for web applications.
Use when: 1) Auditing UI for WCAG 2.1/2.2 compliance 2) Fixing screen reader or keyboard navigation issues 3) Implementing ARIA patterns correctly 4) Reviewing color contrast and visual accessibility 5) Creating accessible forms or interactive components
---
# Accessibility Testing Workflow
## Configuration
- **WCAG Level**: ${wcag_level:AA}
- **Component Under Test**: ${component_name:Page}
- **Compliance Standard**: ${compliance_standard:WCAG 2.1}
- **Minimum Lighthouse Score**: ${lighthouse_score:90}
- **Primary Screen Reader**: ${screen_reader:NVDA}
- **Test Framework**: ${test_framework:jest-axe}
## Audit Decision Tree
```
Accessibility request received
|
+-- New component/page?
| +-- Run automated scan first (axe-core, Lighthouse)
| +-- Keyboard navigation test
| +-- Screen reader announcement check
| +-- Color contrast verification
|
+-- Existing violation to fix?
| +-- Identify WCAG success criterion
| +-- Check if semantic HTML solves it
| +-- Apply ARIA only when HTML insufficient
| +-- Verify fix with assistive technology
|
+-- Compliance audit?
+-- Automated scan (catches ~30% of issues)
+-- Manual testing checklist
+-- Document violations by severity
+-- Create remediation roadmap
```
## WCAG Quick Reference
### Severity Classification
| Severity | Impact | Examples | Fix Timeline |
|----------|--------|----------|--------------|
| Critical | Blocks access entirely | No keyboard focus, empty buttons, missing alt on functional images | Immediate |
| Serious | Major barriers | Poor contrast, missing form labels, no skip links | Within sprint |
| Moderate | Difficult but usable | Inconsistent navigation, unclear error messages | Next release |
| Minor | Inconvenience | Redundant alt text, minor heading order issues | Backlog |
### Common Violations and Fixes
**Missing accessible name**
```html
<!-- Violation -->
<button><svg>...</svg></button>
<!-- Fix: aria-label -->
<button aria-label="Close dialog"><svg>...</svg></button>
<!-- Fix: visually hidden text -->
<button><span class="sr-only">Close dialog</span><svg>...</svg></button>
```
**Form label association**
```html
<!-- Violation -->
<label>Email</label>
<input type="email">
<!-- Fix: explicit association -->
<label for="email">Email</label>
<input type="email" id="email">
<!-- Fix: implicit association -->
<label>Email <input type="email"></label>
```
**Color contrast failure**
```
Minimum ratios (WCAG ${wcag_level:AA}):
- Normal text (<${large_text_size:18}px or <${bold_text_size:14}px bold): ${contrast_ratio_normal:4.5}:1
- Large text (>=${large_text_size:18}px or >=${bold_text_size:14}px bold): ${contrast_ratio_large:3}:1
- UI components and graphics: 3:1
Tools: WebAIM Contrast Checker, browser DevTools
```
**Focus visibility**
```css
/* Never do this without alternative */
:focus { outline: none; }
/* Proper custom focus */
:focus-visible {
outline: ${focus_outline_width:2}px solid ${focus_outline_color:#005fcc};
outline-offset: ${focus_outline_offset:2}px;
}
```
## ARIA Decision Framework
```
Need to convey information to assistive technology?
|
+-- Can semantic HTML do it?
| +-- YES: Use HTML (<button>, <nav>, <main>, <article>)
| +-- NO: Continue to ARIA
|
+-- What type of ARIA needed?
+-- Role: What IS this element? (role="dialog", role="tab")
+-- State: What condition? (aria-expanded, aria-checked)
+-- Property: What relationship? (aria-labelledby, aria-describedby)
+-- Live region: Dynamic content? (aria-live="${aria_live_mode:polite}")
```
### ARIA Patterns for Common Widgets
**Disclosure (show/hide)**
```html
<button aria-expanded="false" aria-controls="content-1">
Show details
</button>
<div id="content-1" hidden>
Content here
</div>
```
**Tab interface**
```html
<div role="tablist" aria-label="${component_name:Settings}">
<button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">
General
</button>
<button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">
Privacy
</button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">...</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>...</div>
```
**Modal dialog**
```html
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
<h2 id="dialog-title">Confirm action</h2>
<p>Are you sure you want to proceed?</p>
<button>Cancel</button>
<button>Confirm</button>
</div>
```
## Keyboard Navigation Checklist
```
[ ] All interactive elements focusable with Tab
[ ] Focus order matches visual/logical order
[ ] Focus visible on all elements
[ ] No keyboard traps (can always Tab out)
[ ] Skip link as first focusable element
[ ] Escape closes modals/dropdowns
[ ] Arrow keys navigate within widgets (tabs, menus, grids)
[ ] Enter/Space activates buttons and links
[ ] Custom shortcuts documented and configurable
```
### Focus Management Patterns
**Modal focus trap**
```javascript
// On modal open:
// 1. Save previously focused element
// 2. Move focus to first focusable in modal
// 3. Trap Tab within modal boundaries
// On modal close:
// 1. Return focus to saved element
```
**Dynamic content**
```javascript
// After adding content:
// - Announce via aria-live region, OR
// - Move focus to new content heading
// After removing content:
// - Move focus to logical next element
// - Never leave focus on removed element
```
## Screen Reader Testing
### Announcement Verification
| Element | Should Announce |
|---------|-----------------|
| Button | Role + name + state ("Submit button") |
| Link | Name + "link" ("Home page link") |
| Image | Alt text OR "decorative" (skip) |
| Heading | Level + text ("Heading level 2, About us") |
| Form field | Label + type + state + instructions |
| Error | Error message + field association |
### Testing Commands (Quick Reference)
**VoiceOver (macOS)**
- VO = Ctrl + Option
- VO + A: Read all
- VO + Right/Left: Navigate elements
- VO + Cmd + H: Next heading
- VO + Cmd + J: Next form control
**${screen_reader:NVDA} (Windows)**
- NVDA + Down: Read all
- Tab: Next focusable
- H: Next heading
- F: Next form field
- B: Next button
## Automated Testing Integration
### axe-core in tests
```javascript
// ${test_framework:jest-axe}
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);
test('${component_name:component} is accessible', async () => {
const { container } = render(<${component_name:MyComponent} />);
const results = await axe(container);
expect(results).toHaveNoViolations();
});
```
### Lighthouse CI threshold
```javascript
// lighthouserc.js
module.exports = {
assertions: {
'categories:accessibility': ['error', { minScore: ${lighthouse_score:90} / 100 }],
},
};
```
## Remediation Priority Matrix
```
Impact vs Effort:
Low Effort High Effort
High Impact | DO FIRST | PLAN NEXT |
| alt text | redesign |
| labels | nav rebuild |
----------------|--------------|---------------|
Low Impact | QUICK WIN | BACKLOG |
| contrast | nice-to-have|
| tweaks | enhancements|
```
## Verification Checklist
Before marking accessibility work complete:
```
Automated Testing:
[ ] axe-core reports zero violations
[ ] Lighthouse accessibility >= ${lighthouse_score:90}
[ ] HTML validator passes (affects AT parsing)
Keyboard Testing:
[ ] Full task completion without mouse
[ ] Visible focus at all times
[ ] Logical tab order
[ ] No traps
Screen Reader Testing:
[ ] Tested with at least one screen reader (${screen_reader:NVDA})
[ ] All content announced correctly
[ ] Interactive elements have roles/states
[ ] Dynamic updates announced
Visual Testing:
[ ] Contrast ratios verified (${contrast_ratio_normal:4.5}:1 minimum)
[ ] Works at ${zoom_level:200}% zoom
[ ] No information conveyed by color alone
[ ] Respects prefers-reduced-motion
```