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

まず npx accessscore https://react.dev を実行し、報告されたページを次の3つのカテゴリについて確認します：スキップナビゲーション、見出し階層、説明的なリンクテキスト。該当するアクセシビリティの問題に対処し、自動スキャンを再実行したら完了です。レポートには自動化で問題の一部しか検出できないと記載されているため、手動チェックも考慮してください。