pinion-innovation-content/modes/accessibility-auditor/rules/5_examples.xml

<examples>
# Accessibility Auditor Examples

## Example 1: Audit Report

```markdown
# Accessibility Audit Report: Introduction to Photosynthesis

**Date:** 2026-04-24
**Auditor:** Accessibility Auditor (Roo Code)
**Standard:** WCAG 2.1 Level AA
**Content Type:** Interactive lesson with video and quiz

## Summary
- Total Issues Found: 8
- Critical: 2
- Major: 4
- Minor: 2

## Critical Issues

### Issue 1: Missing Alt Text on Diagram
**Location:** Module 2, Photosynthesis diagram image
**WCAG Criteria:** 1.1.1 Non-text Content (Level A)
**Description:** The photosynthesis diagram image has no alt text. Screen reader users cannot understand the content.
**Remediation:** Add alt="Diagram showing the process of photosynthesis: sunlight, water, and carbon dioxide enter the plant; glucose and oxygen are produced and released."

### Issue 2: Video Without Captions
**Location:** Module 1, Introduction video
**WCAG Criteria:** 1.2.2 Captions (Level A)
**Description:** The 4-minute introduction video has no captions.
**Remediation:** Create and synchronize captions for all spoken content and relevant sound effects.

## Major Issues

### Issue 3: Insufficient Color Contrast
**Location:** Quiz feedback text
**WCAG Criteria:** 1.4.3 Contrast (Minimum) (Level AA)
**Description:** Light gray text (#999999) on white background has contrast ratio of 2.85:1 (required: 4.5:1)
**Remediation:** Change text color to #595959 or darker to achieve 4.5:1 contrast ratio.

### Issue 4: Missing Form Labels
**Location:** Quiz answer input fields
**WCAG Criteria:** 1.3.1 Info and Relationships (Level A)
**Description:** Text input fields for short answer questions have no associated labels.
**Remediation:** Add <label for="answer1">Your answer:</label> for each input field.

## Minor Issues

### Issue 7: Heading Level Skipped
**Location:** Module 3 summary section
**WCAG Criteria:** 1.3.1 Info and Relationships (Level A)
**Description:** Heading structure jumps from h2 to h4, skipping h3.
**Remediation:** Change h4 to h3 to maintain proper heading hierarchy.
```

---

## Example 2: Remediation Guidance

```markdown
# Remediation: Keyboard Navigation for Interactive Quiz

## Problem
The interactive quiz requires mouse clicks to select answer options. Keyboard-only users cannot complete the quiz.

## WCAG Criteria
2.1.1 Keyboard (Level A)

## Solution

### HTML Structure
```html
<div class="quiz-question" role="radiogroup" aria-labelledby="q1-label">
  <h3 id="q1-label">Question 1: What is photosynthesis?</h3>
  
  <label class="answer-option">
    <input type="radio" name="q1" value="a" tabindex="0">
    <span>A process by which plants make food using sunlight</span>
  </label>
  
  <label class="answer-option">
    <input type="radio" name="q1" value="b" tabindex="0">
    <span>A process by which animals breathe oxygen</span>
  </label>
</div>
```

### CSS for Focus
```css
.answer-option input:focus {
  outline: 3px solid #0056b3;
  outline-offset: 2px;
}
```

### JavaScript for Keyboard Interaction
```javascript
document.querySelectorAll('.answer-option input').forEach(input => {
  input.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      input.checked = true;
      input.closest('.quiz-question').dispatchEvent(new Event('change'));
    }
  });
});
```

## Testing
- [ ] Tab through all answer options
- [ ] Select answer with Space or Enter
- [ ] Verify focus indicator is visible
- [ ] Verify screen reader announces options
```
</examples>