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

Bắt đầu bằng cách chạy npx accessscore https://react.dev và kiểm tra các trang được báo cáo cho ba danh mục: điều hướng bỏ qua, hệ thống phân cấp tiêu đề và văn bản liên kết có tính mô tả. Được xem là hoàn tất khi các vấn đề về khả năng truy cập áp dụng đã được xử lý và quá trình quét tự động đã được chạy lại, đồng thời xem xét các kiểm tra thủ công vì báo cáo lưu ý rằng tự động hóa chỉ phát hiện được một phần vấn đề.