Accessibility: 9 links without accessible text on react.dev (WCAG 2.4.4)

Đang mở
#8,366 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
48/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
javascript, react
Lĩnh vực
accessibility, web-dev

Hướng nghiên cứu

Bắt đầu bằng cách chạy bản quét được báo cáo npx accessscore https://react.dev và xem xét cấu trúc điều hướng, liên kết và heading của react.dev mà bản quét xác định. Xử lý chín liên kết không có văn bản, thêm skip navigation và sửa hệ thống phân cấp heading được báo cáo; được xem là hoàn tất khi các phát hiện của bản quét đã được giải quyết và trang web vẫn có thể điều hướng bằng bàn phím và trình đọc màn hình.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Summary

An automated WCAG accessibility scan of react.dev found 3 issues affecting ADA compliance:

Score: 20/100 (Grade F) — CRITICAL risk tier

Issues Found

# Severity Issue WCAG
1 CRITICAL 9 links without accessible text 2.4.4 Link Purpose (Level A)
2 SERIOUS Missing skip navigation link 2.4.1 Bypass Blocks (Level A)
3 MODERATE Heading hierarchy skips (h2 → h4) 1.3.1 Info and Relationships (Level A)

Suggested Fixes

1. Links without accessible text (CRITICAL)

9 links have no visible text, aria-label, or image alt text. Screen readers announce these as "link" with no purpose.

<!-- Before -->
<a href="/learn"><svg>...</svg></a>

<!-- After -->
<a href="/learn" aria-label="Learn React"><svg>...</svg></a>
2. Missing skip navigation (SERIOUS)

No skip-to-content link found. Keyboard-only users must tab through the entire sidebar and nav on every page load.

<body>
  <a href="#main" class="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:p-4">
    Skip to main content
  </a>
  ...
  <main id="main">...</main>
</body>
3. Heading hierarchy (MODERATE)

Heading levels skip from h2 to h4, which confuses screen reader users navigating by heading.

Why This Matters

  • React is used by millions of developers who look to react.dev as an example
  • WCAG 2.4.4 (Link Purpose) is among the most cited ADA violations
  • Leading by example on accessibility helps the entire React ecosystem

Reproduction

npx accessscore https://react.dev

Scanned with AccessScore — open source WCAG/ADA checker.

Ngôn ngữ chính
JavaScript
Star
11.8k
Fork
7.9k
Merge trung bình
16 giờ 6 phút
Pull request đã merge (30 ngày)
7

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của reactjs/react.dev

Tất cả issue của reactjs/react.dev

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.