Accessibility: 9 links without accessible text on react.dev (WCAG 2.4.4)
Personne n'a encore pris cette issue.
- Langage dominant
- JavaScript
- Étoiles
- 11.8k
- Forks
- 7.9k
- Merge moyen
- 1 j 11 h
- PR mergées (30 j)
- 11
Description
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.
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par exécuter l’analyse signalée avec npx accessscore https://react.dev et examiner la navigation, les liens et la structure des titres de react.dev qu’elle identifie. Traitez les neuf liens sans texte, ajoutez une navigation permettant d’ignorer le contenu et corrigez la hiérarchie des titres signalée ; le travail est terminé lorsque les problèmes relevés par l’analyse sont résolus et que le site reste navigable au clavier et avec un lecteur d’écran.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- javascript, react
- Domaine
- accessibility, web-dev
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- Calme
- Clarté
- Plutôt claire
- Accessibilité débutants
- 48/100