Accessibility: docs code examples/link styling is very confusing and has insufficient contrast
Personne n'a encore pris cette issue.
- Langage dominant
- JavaScript
- Étoiles
- 11.8k
- Forks
- 7.9k
- Merge moyen
- 1 j 11 h
- PR mergées (30 j)
- 11
Description
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.
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par examiner la page de documentation de createContext en mode clair et en mode sombre, puis exécutez un vérificateur d’accessibilité sur les styles signalés. La tâche est terminée lorsque les liens, les valeurs de code et les concepts sont visuellement différenciables et que les problèmes de contraste du texte signalés respectent les exigences de WCAG.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Domaine
- accessibility, design, documentation
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100