reactjs / reactjs/react.dev

Accessibility: docs code examples/link styling is very confusing and has insufficient contrast

Aperta
#6,111 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Lingua principale
JavaScript
Stelle
11.8k
Fork
7.9k
Merge medio
1g 11h
PR unite (30g)
11

Descrizione

In the documentation, the styling is really confusing.

Here's an example, taken from the docs for createContext in dark mode, although the issue is present in light mode as well:

image

Here you can see:

  • a text link ("pass information deep down") which is blue and not underlined and has no background color
  • variables in source code, which are a similar shade of blue on a darker blue background, with a bottom box border, and aren't clickable
  • string values in source code, same as above but purple on purple
  • a concept in text ("context object"), variable width text, same colorations as source variables, not clickable
  • another concept ("default values") same as above but purple
  • a text link which is a function name (useContext()), blue monospaced text on a gray background

This assortment of similar-but-different color combinations is making it hard for me to read. Everything with a box bottom border looks like a link and I keep trying to click them out of habit that they're a crossreference. The use of blue and purple for "context object" and "default values" also add to the problem because they look like unvisited/visited links. At the very least, could you please consider changing either your source code highlights or your link color to be something drastically other than blue?

Running an accessibility checker on the pages also shows that many of the styles fail WCAG accessibility standards for text contrast.

image

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.

Direzione di ricerca

Inizia esaminando la pagina della documentazione di createContext sia in modalità chiara che scura, quindi esegui un controllo di accessibilità sugli styles segnalati. Il lavoro è completato quando link, valori di codice e concetti sono visivamente distinguibili e i problemi di contrasto del testo segnalati soddisfano i requisiti WCAG.

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

Valutazione

Ambito
accessibility, design, documentation
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.