Accessibility: docs code examples/link styling is very confusing and has insufficient contrast
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:
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.
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- 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