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.

Valutazione

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

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.

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
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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.