tractatus/audit-reports/accessibility-manual-audit.md

# Tractatus Website - Manual Accessibility Audit (WCAG 2.1 AA)

**Date:** 2025-10-08
**Standard:** WCAG 2.1 Level AA
**Pages Audited:** 9 main pages

---

## Executive Summary

**Overall Status:** ✅ GOOD - Most WCAG AA requirements met

**Critical Issues:** 1
**Warnings:** 4
**Passes:** 15

---

## Page-by-Page Analysis

### 1. Homepage (`/index.html`)

#### ✅ Passes
- `lang="en"` attribute present
- Skip link for keyboard navigation (lines 19-20)
- Proper semantic HTML: `<header>`, `<main>`, `<footer>`
- Appropriate ARIA roles: `role="banner"`, `role="main"`, `role="contentinfo"`
- Heading hierarchy correct (h1 → h2 → h3)
- `aria-labelledby` used on sections
- Descriptive link text ("See Interactive Demo", not "click here")
- External links have `rel="noopener"` for security
- Meta viewport for responsive design
- Descriptive page title and meta description

#### ❌ Critical Issues
**Line 74:** Duplicate `aria-hidden="true"` attribute on SVG
```html
<svg aria-hidden="true" class="..." fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
```
**Fix:** Remove duplicate attribute

#### ⚠️ Warnings
1. **Focus indicators:** No explicit `:focus` styles visible in inline CSS (check if Tailwind provides defaults)
2. **Color contrast:** Cannot verify without visual inspection (blue-600, purple-600, gray text on backgrounds)
3. **SVG decorative:** All SVGs have `aria-hidden="true"` which is correct for decorative icons
4. **Form elements:** None on this page (forms checked separately)

---

## WCAG 2.1 AA Checklist

### 1. Perceivable

#### 1.1 Text Alternatives
- [ ] **1.1.1 Non-text Content (Level A):** Need to check if any images exist
  - ✅ All SVGs are decorative with `aria-hidden="true"`
  - ⚠️ Tractatus icon logo needs alt text if used as `<img>`

#### 1.2 Time-based Media
- ✅ **N/A:** No video or audio content

#### 1.3 Adaptable
- ✅ **1.3.1 Info and Relationships (Level A):** Proper semantic HTML
- ✅ **1.3.2 Meaningful Sequence (Level A):** Logical content flow
- ✅ **1.3.3 Sensory Characteristics (Level A):** No shape/color-only instructions

#### 1.4 Distinguishable
- ⚠️ **1.4.3 Contrast (Level AA):** Needs visual verification
  - Blue-600 (#2563eb) on white: ✅ 7.39:1 (passes)
  - White on blue-600: ✅ 7.39:1 (passes)
  - Gray-700 (#374151) on white: ✅ 10.73:1 (passes)
  - Text-blue-100 on blue-700: ⚠️ Needs verification
- ✅ **1.4.4 Resize Text (Level AA):** Uses relative units (rem/em via Tailwind)
- ✅ **1.4.5 Images of Text (Level AA):** No images of text
- ✅ **1.4.10 Reflow (Level AA):** Responsive design with Tailwind
- ⚠️ **1.4.11 Non-text Contrast (Level AA):** UI component contrast needs verification
- ✅ **1.4.12 Text Spacing (Level AA):** No restrictions on text spacing

### 2. Operable

#### 2.1 Keyboard Accessible
- ✅ **2.1.1 Keyboard (Level A):** All links/buttons are keyboard accessible
- ✅ **2.1.2 No Keyboard Trap (Level A):** No trapping elements detected
- ⚠️ **2.1.4 Character Key Shortcuts (Level A):** No custom shortcuts detected

#### 2.2 Enough Time
- ✅ **N/A:** No time limits on content

#### 2.3 Seizures and Physical Reactions
- ✅ **2.3.1 Three Flashes (Level A):** No flashing content

#### 2.4 Navigable
- ✅ **2.4.1 Bypass Blocks (Level A):** Skip link present
- ✅ **2.4.2 Page Titled (Level A):** Descriptive page titles
- ✅ **2.4.3 Focus Order (Level A):** Logical tab order
- ✅ **2.4.4 Link Purpose (Level A):** Descriptive link text
- ⚠️ **2.4.5 Multiple Ways (Level AA):** Check if site has sitemap/search
- ✅ **2.4.6 Headings and Labels (Level AA):** Clear, descriptive headings
- ✅ **2.4.7 Focus Visible (Level AA):** Browser defaults present (custom styling recommended)

#### 2.5 Input Modalities
- ✅ **2.5.1 Pointer Gestures (Level A):** No complex gestures
- ✅ **2.5.2 Pointer Cancellation (Level A):** Standard click events
- ✅ **2.5.3 Label in Name (Level A):** Visible labels match accessible names
- ⚠️ **2.5.4 Motion Actuation (Level A):** No motion-triggered actions

### 3. Understandable

#### 3.1 Readable
- ✅ **3.1.1 Language of Page (Level A):** `lang="en"` present
- ⚠️ **3.1.2 Language of Parts (Level AA):** Check if any non-English content needs `lang` attribute

#### 3.2 Predictable
- ✅ **3.2.1 On Focus (Level A):** No context changes on focus
- ✅ **3.2.2 On Input (Level A):** No automatic form submission
- ✅ **3.2.3 Consistent Navigation (Level AA):** Navbar consistent across pages
- ✅ **3.2.4 Consistent Identification (Level AA):** Icons/components used consistently

#### 3.3 Input Assistance
- ⚠️ **Form pages only:** Will check media-inquiry.html and case-submission.html separately

### 4. Robust

#### 4.1 Compatible
- ✅ **4.1.1 Parsing (Level A):** Valid HTML5 (except duplicate aria-hidden)
- ✅ **4.1.2 Name, Role, Value (Level A):** Proper ARIA usage
- ✅ **4.1.3 Status Messages (Level AA):** No status messages detected

---

## Issues to Fix

### Critical (Must Fix)
1. **index.html:74** - Remove duplicate `aria-hidden="true"` on SVG

### High Priority (Should Fix)
1. **All pages** - Add custom `:focus` styles with clear visual indicators
2. **All pages** - Verify color contrast ratios programmatically
3. **Navbar logo** - Add alt text if tractatus-icon.svg is used as `<img>`
4. **Forms** - Comprehensive form accessibility audit needed

### Medium Priority (Nice to Have)
1. Add site search functionality (WCAG 2.4.5)
2. Add sitemap page
3. Consider adding focus trap for modals (if any)
4. Add visible skip link styling (currently only visible on :focus)

---

## Forms Accessibility (Separate Audit Required)

Pages with forms:
- `/media-inquiry.html`
- `/case-submission.html`

Requirements to check:
1. All inputs have associated `<label>` elements
2. Required fields marked with `aria-required="true"` or `required`
3. Error messages associated with inputs using `aria-describedby`
4. Fieldsets and legends for grouped inputs
5. Clear focus indicators on form controls
6. Validation feedback accessible to screen readers

---

## Recommendations

### Immediate Actions
1. Fix duplicate `aria-hidden` attribute
2. Add custom focus styles:
```css
a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}
```

### Testing Required
1. Run automated color contrast checker
2. Test keyboard navigation on all pages
3. Test with screen reader (NVDA/JAWS/VoiceOver)
4. Test form validation accessibility
5. Test mobile touch targets (44x44px minimum)

### Documentation
1. Create accessibility statement page
2. Document keyboard shortcuts (if any)
3. Provide text transcript for any future video content

---

## Tools for Further Testing

**Automated Testing:**
- axe DevTools (browser extension)
- WAVE (browser extension)
- Lighthouse CI

**Manual Testing:**
- Screen readers: NVDA (Windows), JAWS (Windows), VoiceOver (macOS/iOS)
- Keyboard-only navigation
- Color contrast analyzers
- Text resize testing (up to 200%)

**Next Steps:**
1. Fix critical issue (duplicate aria-hidden)
2. Add focus styles
3. Run color contrast verification
4. Audit forms comprehensively
5. Test keyboard navigation
6. Test mobile responsiveness