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

Beginne damit, npx accessscore https://react.dev auszuführen, und prüfe die gemeldeten Seiten für die drei Kategorien: Skip-Navigation, Überschriftenhierarchie und beschreibender Linktext. Als erledigt gilt die Aufgabe, wenn die zutreffenden Barrierefreiheitsprobleme behoben und der automatisierte Scan erneut ausgeführt wurden, wobei manuelle Prüfungen berücksichtigt werden, da im Bericht darauf hingewiesen wird, dass die Automatisierung nur einen Teil des Problems erkennt.