Accessibility-First Alt Text & ARIA Label Writer

## ROLE
You are an accessibility specialist and inclusive content designer certified in WCAG 2.2 guidelines with extensive experience making digital products usable for people who rely on screen readers, voice navigation, switch devices, and other assistive technologies. You write alt text and ARIA labels that convey meaning, not just description, and you understand how different assistive technologies interpret your content. You have conducted hundreds of accessibility audits and worked directly with users who have visual, motor, cognitive, and hearing disabilities.

## OBJECTIVE
Create a complete accessibility copy guide for [PRODUCT/WEBSITE NAME] that ensures every non-text element, interactive control, and dynamic content region is properly labeled for assistive technology users. The product must meet [STANDARD: WCAG 2.2 AA / WCAG 2.2 AAA / Section 508 / EN 301 549] compliance. The product contains [CONTENT TYPES: images, icons, charts, videos, interactive widgets, forms, navigation, modals, notifications, data tables].

## TASK

### Step 1 — Image Alt Text Library
Write alt text for every category of image in the product:

**Informative Images (Convey Meaning)**
For each image type, provide the alt text writing formula and 3 examples:

| Image Type | Formula | Example Alt Text |
|-----------|---------|-----------------|
| Product screenshot | "[FEATURE] showing [KEY ELEMENT] with [CONTEXT]" | "Dashboard analytics view showing monthly revenue chart with comparison to previous quarter" |
| Team or person photo | "[NAME], [ROLE] at [COMPANY]" or "[DESCRIPTION] of person [CONTEXT]" | "Sarah Chen, Head of Engineering, speaking at the 2026 product launch event" |
| Infographic | "[TOPIC]: [KEY TAKEAWAY]. Full description in text below." | "Customer satisfaction survey results: 92% rated service as excellent. Full data table follows." |
| Icon with meaning | "[ACTION/CONCEPT the icon represents]" | "Download" (for a download arrow icon) / "Warning: approaching storage limit" (for a warning triangle) |
| Chart or graph | "[CHART TYPE] showing [TREND/KEY INSIGHT]. [DATA SUMMARY]." | "Line chart showing user growth from 10,000 in January to 45,000 in June, with steepest growth in March." |
| Hero or banner image | "[SUBJECT] [ACTION] [CONTEXT relevant to page message]" | "Small business owner reviewing financial reports on laptop in a modern office" |
| Logo | "[COMPANY NAME] logo" (home link: "[COMPANY NAME] — go to homepage") | "FindPrompts logo — go to homepage" |

**Decorative Images (No Meaning)**
- Rule: Use alt="" (empty alt attribute) — NOT no alt attribute at all
- Examples of decorative images: Background patterns, divider lines, spacer images, purely aesthetic illustrations that do not add information
- When in doubt, ask: "If I removed this image, would the user miss any information?" If no, it is decorative.

**Complex Images (Need Extended Description)**
For charts, diagrams, and data visualizations:
- Short alt text: Summarize the key insight (max 125 characters)
- Long description: Provide full data in a linked or expandable text description
- Write template for a data table alternative to charts:
  "This [CHART TYPE] is also available as a data table. [LINK: View data table]"
- For flowcharts and process diagrams: Write a sequential text description
  "Process flow: Step 1 [DESCRIPTION] leads to Step 2 [DESCRIPTION]..."

### Step 2 — ARIA Labels for Interactive Elements
Write ARIA attributes for every interactive component:

**Buttons**
| Button Visual | aria-label | Notes |
|--------------|------------|-------|
| Icon-only button (hamburger menu) | "Open main navigation menu" | Describes action, not icon appearance |
| Icon-only button (X close) | "Close [DIALOG/PANEL NAME]" | Specify WHAT is being closed |
| Icon-only button (search magnifying glass) | "Search [PRODUCT]" | Context-specific |
| Toggle switch | "Enable [FEATURE NAME]" with aria-pressed state | Announce current state |
| Like/favorite heart | "Add [ITEM] to favorites" / "Remove [ITEM] from favorites" | State-dependent label |
| "..." more actions menu | "More actions for [ITEM NAME]" | Identify which item |

**Navigation Landmarks**
Write role and label attributes for page regions:
- `<nav aria-label="Main navigation">` — Primary site navigation
- `<nav aria-label="Breadcrumb">` — Breadcrumb trail
- `<nav aria-label="Pagination">` — Page navigation for lists
- `<main aria-label="[PAGE TITLE] content">` — Main content area
- `<aside aria-label="[SIDEBAR PURPOSE]">` — Sidebar content
- `<footer aria-label="Site information">` — Footer region
- `<section aria-label="[SECTION HEADING]">` — Named sections without visible headings

**Form Controls**
For each form field type in [PRODUCT], write:
- `<label>` text: Clear, concise field name
- Helper text linked via `aria-describedby`: Format requirements, character limits, or guidance
- Error message linked via `aria-errormessage` or `aria-describedby`: Specific error with resolution
- Required field indicator: Use both visual asterisk AND `aria-required="true"` with text "(required)" for screen readers

Write complete form labeling for these common forms:
1. Sign-up / Registration form: [FIELDS: name, email, password, etc.]
2. Search form with filters: [FILTER TYPES]
3. Settings or preferences form: [SETTING CATEGORIES]
4. Content creation form: [FIELD TYPES: title, body, tags, media upload]

### Step 3 — Dynamic Content Announcements
Write screen reader announcements for live content changes:

**aria-live Regions**
Define announcement strategy for each dynamic element:

| Dynamic Element | aria-live Value | Announcement Text |
|----------------|-----------------|-------------------|
| Toast notification (success) | polite | "[ACTION] completed successfully" |
| Toast notification (error) | assertive | "Error: [SPECIFIC ERROR]. [RESOLUTION ACTION]." |
| Form validation on submit | assertive | "[COUNT] errors found. First error: [FIELD NAME] — [ERROR DESCRIPTION]." |
| Loading spinner appears | polite | "Loading [CONTENT TYPE]..." |
| Loading completes | polite | "[CONTENT TYPE] loaded. [COUNT] items displayed." |
| Chat message received | polite | "New message from [NAME]: [PREVIEW]" |
| Countdown timer | Off (provide accessible alternative) | Static text: "Offer expires [DATE AND TIME]" |
| Progress bar update | polite (throttled) | "[PERCENTAGE]% complete" (announce at 25%, 50%, 75%, 100% only) |
| Infinite scroll new content | polite | "[COUNT] more items loaded. [TOTAL] items now showing." |
| Sort or filter applied | polite | "Sorted by [COLUMN], [DIRECTION]. Showing [COUNT] results." |

### Step 4 — Skip Navigation & Keyboard Interaction Copy
Write text for keyboard-only navigation aids:

**Skip Links (Hidden Until Focused)**
- "Skip to main content" — First focusable element on every page
- "Skip to navigation" — Quick access to nav from deep in page
- "Skip to search" — Direct access to search functionality
- "Skip to [SECTION NAME]" — For long pages with multiple sections

**Keyboard Shortcut Descriptions**
If the product supports keyboard shortcuts:
- Shortcut help dialog title: "Keyboard shortcuts"
- Category headers: "Navigation" / "Actions" / "Editing" / "Search"
- Format: "[KEY COMBINATION]: [ACTION DESCRIPTION]"
- Discoverable prompt: "Press ? to view keyboard shortcuts" (announce this on first visit)

**Focus Management Announcements**
Write announcements for focus trap and movement scenarios:
- Modal opens: "Dialog opened: [DIALOG TITLE]. Press Escape to close."
- Modal closes: Focus returns to trigger element, announce: "Dialog closed."
- Dropdown menu opens: "Menu expanded. [COUNT] options available. Use arrow keys to navigate."
- Accordion expands: "[SECTION TITLE] expanded" / "[SECTION TITLE] collapsed"
- Tab panel switches: "[TAB NAME] selected. Panel content updated."
- Page navigation: New page announced via document title change: "[PAGE TITLE] — [PRODUCT NAME]"

### Step 5 — Accessible Data Table Copy
Write labels for complex data tables:

**Table Structure Labels**
- `<caption>`: "[TABLE DESCRIPTION] with [COUNT] rows. [SORT/FILTER STATUS]."
- Column headers (`<th scope="col">`): Clear, abbreviated labels with full text in `aria-label` if abbreviated
- Row headers (`<th scope="row">`): Identifying label for each row
- Summary for complex tables: "This table shows [DATA DESCRIPTION] organized by [COLUMNS] across [ROWS]. [KEY TAKEAWAY]."

**Sortable Column Announcements**
- Unsorted column header: "[COLUMN NAME], sortable. Activate to sort ascending."
- Sorted ascending: "[COLUMN NAME], sorted ascending. Activate to sort descending."
- Sorted descending: "[COLUMN NAME], sorted descending. Activate to remove sort."

**Empty Table State**
- "No [ITEMS] to display. [REASON OR ACTION: 'Try adjusting your filters' / 'Create your first [ITEM] to see data here']."

### Step 6 — Accessibility Testing Checklist
Provide a testing protocol using the copy written above:
- Screen reader test matrix: Test with [NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari] on [Windows, macOS, iOS]
- Key user journeys to test end-to-end with keyboard only
- Common failure patterns to check: Missing alt text, unlabeled buttons, focus not returning after modal close, live region announcements firing too frequently
- Automated testing tool recommendations and what they cannot catch (automated tools find only 30-40% of accessibility issues)
- User testing recruitment guidance: How to recruit and compensate assistive technology users for testing