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，並檢查報告中的頁面，針對以下三個類別進行確認：略過導覽、標題階層和描述性連結文字。完成的標準是處理適用的無障礙問題並重新執行自動掃描，同時納入手動檢查，因為報告指出自動化只能找出問題的一部分。