---
estimated_steps: 4
estimated_files: 9
skills_used: []
---

# T01: Fix heading hierarchy, add skip-to-content link, and fix muted text contrast

Three accessibility fixes that all touch App.tsx/App.css and page heading elements:

1. **Heading hierarchy (R022):** Demote `<h1>Chrysopedia</h1>` in App.tsx nav to `<span>`. Update `.app-header h1` CSS rule to `.app-header__brand span`. Promote `<h2>` to `<h1>` on pages that lack one: TopicsBrowse, CreatorsBrowse, SubTopicPage, AdminReports, AdminPipeline. Add `<h1>` to SearchResults (currently has no heading). Fix heading level skips in Home.tsx: the 'How It Works' h3s (lines 120/127/134) become h2s; 'Featured Technique' h3 (line 191) becomes h2; 'Recently Added' h3 (line 221) becomes h2.

2. **Skip-to-content link (R023):** Add `id="main-content"` to the `<main>` tag in App.tsx. Add `<a href="#main-content" className="skip-link">Skip to content</a>` as the first child of `.app`. Add `.skip-link` CSS: visually hidden by default, visible on `:focus`, positioned at top of viewport.

3. **Contrast fix (R024):** Change `--color-text-muted` from `#6b6b7a` to `#828291` in App.css `:root` block. This achieves 5.05:1 on page bg and 4.56:1 on surface bg — both above AA 4.5:1 threshold.

## Inputs

- ``frontend/src/App.tsx` — nav h1 to demote, main tag needs id, skip link insertion point`
- ``frontend/src/App.css` — `.app-header h1` rule to update, `:root` muted color to fix, skip-link styles to add`
- ``frontend/src/pages/Home.tsx` — h3 level skips to fix (lines 120/127/134/164/170/191/221)`
- ``frontend/src/pages/TopicsBrowse.tsx` — h2 to promote to h1 (line 96)`
- ``frontend/src/pages/CreatorsBrowse.tsx` — h2 to promote to h1 (line 89)`
- ``frontend/src/pages/SubTopicPage.tsx` — h2 to promote to h1 (line 112)`
- ``frontend/src/pages/SearchResults.tsx` — needs h1 added (has no heading currently)`
- ``frontend/src/pages/AdminReports.tsx` — h2 to promote to h1 (line 116)`
- ``frontend/src/pages/AdminPipeline.tsx` — h2 to promote to h1 (line 577)`

## Expected Output

- ``frontend/src/App.tsx` — nav brand uses `<span>` instead of `<h1>`, skip link added, main has id`
- ``frontend/src/App.css` — `.app-header h1` changed to `.app-header__brand span`, skip-link styles added, `--color-text-muted` updated to `#828291``
- ``frontend/src/pages/Home.tsx` — heading levels fixed (h3→h2 for How It Works, Featured, Recently Added, nav cards)`
- ``frontend/src/pages/TopicsBrowse.tsx` — h2→h1 promoted`
- ``frontend/src/pages/CreatorsBrowse.tsx` — h2→h1 promoted`
- ``frontend/src/pages/SubTopicPage.tsx` — h2→h1 promoted`
- ``frontend/src/pages/SearchResults.tsx` — h1 heading added`
- ``frontend/src/pages/AdminReports.tsx` — h2→h1 promoted`
- ``frontend/src/pages/AdminPipeline.tsx` — h2→h1 promoted`

## Verification

cd frontend && npx tsc --noEmit && npm run build
