Accessibility: 9 links without accessible text on react.dev (WCAG 2.4.4)
Dieses Issue hat noch niemand übernommen.
Bewertung
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Anfängerfreundlichkeit
- 48/100
- Issue-Typ
- Bug
- Klarheit
- Größtenteils klar
- Aktivitätsstatus
- Ruhig
- Tech-Stack
- javascript, react
- Bereich
- accessibility, web-dev
Rechercherichtung
Beginnen Sie damit, den gemeldeten Scan mit npx accessscore https://react.dev auszuführen und die Navigation, Links und Überschriftenstruktur von react.dev zu überprüfen, die er identifiziert. Beheben Sie die neun Links ohne Text, fügen Sie eine Skip-Navigation hinzu und korrigieren Sie die gemeldete Überschriftenhierarchie; als erledigt gilt die Aufgabe, wenn die Scan-Ergebnisse behoben sind und die Website weiterhin per Tastatur und Screenreader navigierbar ist.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Beschreibung
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.
- Vorherrschende Sprache
- JavaScript
- Sterne
- 11.8k
- Forks
- 7.9k
- Ø Merge
- 16 Std. 6 Min.
- Gemergte PRs (30 T.)
- 7
Beitragsleitfaden
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus reactjs/react.dev
-
type: documentation
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 72/100
-
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 82/100
-
bug: unconfirmed
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 74/100
-
type: typos
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 90/100
-
bug: unconfirmed
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 68/100
Alle Issues in reactjs/react.dev
Ähnliche Issues
-
bug
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 76/100
avniproject/avni-client#2135 ·
-
automated broken-link
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 85/100
-
agent/security hive/hosted-available-lke648397-260827-5n31 security
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 84/100
-
enhancement
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 70/100
babalae/bettergi-scripts-list#3674 ·
-
A-Release-Notes C-Editing D-Modest S-Ready-For-Implementation
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 72/100
bevyengine/bevy-website#2595 ·