Accessibility improvements: heading hierarchy, skip navigation, link text

Summary

Ran an automated WCAG 2.1 scan against react.dev and found a few accessibility issues that could be improved:

Score: 82/100 (Grade B)

Issues Found

1. Missing Skip Navigation (WCAG 2.4.1, Level A)

No skip navigation link found. Keyboard-only users must tab through the entire navigation on every page load before reaching content. This is especially impactful on documentation sites where users navigate between many pages.

Fix: Add a visually-hidden skip link as the first focusable element:

<a href="#main" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-white focus:text-black focus:p-3 focus:rounded">
  Skip to main content
</a>

2. Heading Hierarchy Issues (WCAG 1.3.1, Level A)

Found heading level jumps (e.g., h1 → h3 with no h2). Screen reader users navigate by headings like a table of contents — skipping levels creates confusing navigation.

3. Vague Link Text (WCAG 2.4.4, Level A)

10 links have non-descriptive text that doesn't convey purpose when read out of context. Screen reader users often navigate by listing all links on a page.

Methodology

Scanned using 16 automated WCAG 2.1 Level A and AA checks. Automated scans catch roughly 30-50% of issues — the rest require manual testing.

For a quick automated baseline: npx accessscore https://react.dev

Start by running npx accessscore https://react.dev and inspect the reported pages for the three categories: skip navigation, heading hierarchy, and descriptive link text. Done means the applicable accessibility issues are addressed and the automated scan is rerun, with manual checks considered because the report notes that automation finds only part of the problem.