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

Aperta
#8,366 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
48/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
javascript, react
Ambito
accessibility, web-dev

Direzione di ricerca

Inizia eseguendo la scansione segnalata con npx accessscore https://react.dev e verificando la navigazione, i link e la struttura delle intestazioni di react.dev che identifica. Intervieni sui nove link privi di testo, aggiungi una navigazione per saltare il contenuto e correggi la gerarchia delle intestazioni segnalata; il lavoro è completato quando i problemi rilevati dalla scansione sono risolti e il sito rimane navigabile da tastiera e con uno screen reader.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
JavaScript
Stelle
11.8k
Fork
7.9k
Merge medio
16h 6m
PR unite (30g)
7

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di reactjs/react.dev

Tutte le issue di reactjs/react.dev

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.