reactjs / reactjs/react.dev

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

未关闭
#8,366 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

主要语言
JavaScript
星标
11.8k
派生
7.9k
平均合并
1 天 11 小时
30 天内合并 PR
11

描述

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.

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

首先运行报告中的 npx accessscore https://react.dev 扫描,并检查它识别出的 react.dev 导航、链接和标题结构。处理九个无文本链接,添加跳过导航,并修正报告中的标题层级;扫描发现的问题均已解决,且网站仍可通过键盘和屏幕阅读器导航,即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
javascript, react
领域
accessibility, web-dev
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
冷清
描述清晰度
基本清楚
新手友好度
48/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。