Grâce au travail de @pmusaraj et du mien, Discourse inclut désormais l’option de sélectionner une palette de couleurs à contraste plus élevé depuis l’assistant de configuration.
Ces palettes privilégient le contraste du texte et sont conçues pour respecter les Directives d’accessibilité du contenu Web pour le contraste des couleurs (niveau AA). En coulisses, il ne s’agit pas de palettes de couleurs normales ; elles incluent également automatiquement du CSS supplémentaire.
Une version claire et une version sombre sont disponibles (ce sont les deux dernières options de la liste). Les sites existants peuvent accéder à ces couleurs en visitant community.yoursite.com/wizard/steps/color ou en les sélectionnant comme palettes de base lors de la création d’une nouvelle palette depuis admin > personnaliser > couleurs.
Une fois créées, ces palettes seront répertoriées sous admin > personnaliser > couleurs — si vous ne les utilisez pas comme couleurs par défaut de votre site, vous pouvez également permettre aux utilisateurs de les sélectionner.
Lorsqu’elles sont définies comme sélectionnables par l’utilisateur, les personnes peuvent choisir leur palette de couleurs dans la section interface de leurs préférences (community.yoursite.com/my/preferences/interface).
Si vous rencontrez des problèmes de contraste avec ces palettes, veuillez nous en informer afin que nous puissions continuer à respecter les normes établies par les WCAG !
Ce serait vraiment bien que le schéma de couleurs par défaut de Discourse respecte les normes établies par le WCAG. Pouvez-vous commenter pourquoi ce n’est pas le cas ?
Puisque Discourse n’a pas été conçu à l’origine avec des couleurs à contraste élevé, nous devrions probablement apporter des modifications plus significatives au-delà des seules couleurs pour tenir compte des différences. En faire une première étape permet de mettre ces couleurs plus accessibles en circulation dès aujourd’hui.
Un exemple rapide est la manière dont nous montrons la différence entre les sujets lus et non lus. Par défaut, nous le faisons en réduisant le contraste une fois que vous avez lu un sujet :
Lorsqu’on respecte les normes WCAG, nous devons augmenter le contraste des titres des sujets lus, et par conséquent, il n’y a pas beaucoup de contraste entre les sujets lus et non lus… donc je pense qu’à plus long terme, nous devrions envisager une autre approche que le contraste pour distinguer les deux.
C’est phénoménal, merci beaucoup. Au nom de certains de mes utilisateurs malvoyants qui s’étaient plaints de cela, c’est grandement apprécié. Je l’ai immédiatement activé.
Après avoir lu le premier message, j’avais l’impression que les nouvelles couleurs devaient être sélectionnées dans l’Assistant pour être ajoutées à une liste. En lançant l’Assistant et en arrivant à la page Couleurs, je cherchais un moyen de sélectionner toutes les couleurs, car je voulais ajouter les nouvelles couleurs à la liste. Apparemment, ma compréhension était incorrecte. D’après ce que je vois, selon la façon dont les couleurs sont sélectionnées sur la page Couleurs, un seul schéma de couleurs peut être choisi. Je suis donc maintenant confus.
Que fait le choix d’un schéma sur la page Couleurs ? Cela définit-il le paramètre par défaut pour tout le monde ?
Pourquoi un seul schéma de couleurs est-il autorisé dans l’Assistant ? Probablement la même réponse que pour la question 1.
Puisque j’écris cela en suivant le premier message, je laisse les paramètres de la page Couleurs tels qu’ils étaient.
Passons à admin > personnaliser > couleurs. Après quelques essais, j’ai découvert que :
Sélectionner Nouveau
Pour Palette de base, ouvrir le menu déroulant qui inclut maintenant WCAG Light et WCAG Dark.
permet de sélectionner les éléments.
J’ai donc sélectionné WCAG Light, puis un dialogue m’a été présenté pour nommer la palette de couleurs et choisir les couleurs. Comme dans l’exemple, j’ai saisi le nom WCAG Light, sélectionné Le schéma de couleurs peut être choisi par les utilisateurs, puis cliqué sur Enregistrer.
En passant à community.yoursite.com/my/preferences/interface, je n’ai pas trouvé la section Schéma de couleurs.
De plus, notre site possède le Sélecteur de thème Hamburger. Je pensais qu’ils apparaîtraient automatiquement là-bas, mais il semble que je doive créer un nouveau Thème de base (Thème) pour les utiliser.
Ce n’est pas une plainte, juste un retour d’expérience de quelqu’un qui lit le message pour la première fois et le teste.
J’ai jeté un coup d’œil à votre site, mais je ne vois pas l’option « Le schéma de couleurs peut être sélectionné par les utilisateurs » activée pour aucun des deux schémas. Peut-être n’avez-vous pas coché la case pour enregistrer la sélection ?
Après avoir ajouté quelques couleurs supplémentaires utilisables par les utilisateurs, l’option d’interface a changé pour me donner un choix entre le mode Normal et le mode Sombre.
Pourriez-vous préciser ce que cela signifie ? Je suis sur le point de configurer mon premier forum et je souhaite personnaliser le schéma de couleurs, tout en prenant en charge le basculement automatique vers le mode sombre selon les préférences système de l’utilisateur.
Souhaiterai-je personnaliser les couleurs en utilisant ces nouveaux schémas comme base ?
Quelles sont les étapes actuelles pour créer un schéma de couleurs personnalisé, compte tenu des récents changements dans la construction des schémas de couleurs pour prendre en charge le mode sombre (tel que discuté dans les récents fils de discussion) et de ces nouveaux schémas accessibles ?
Ainsi, lorsque ces palettes WCAG sont sélectionnées, un code CSS supplémentaire (trouvé ici) est chargé pour modifier les couleurs de divers éléments (généralement pour utiliser une variable de couleur à plus fort contraste que celle utilisée par défaut). Je pense que le CSS est chargé en fonction du nom de la palette de couleurs…
Ainsi, si vous souhaitez modifier ces palettes tout en conservant certaines des améliorations de contraste apportées par le CSS personnalisé, je pense que vous devrez simplement ne pas changer le nom (est-ce exact @pmusaraj ?).
Sinon, vous pouvez également copier le CSS depuis le lien ci-dessus et l’utiliser dans votre propre thème (bien que vous ne bénéficierez pas des mises à jour que nous apportons).
Non, le CSS spécifique à la WCAG est inclus si le schéma actuel est une dérivation de l’un des deux schémas de base WCAG. Vous pouvez donc nommer le nouveau schéma comme vous le souhaitez, mais s’il est créé à partir d’un schéma de base WCAG, il bénéficiera du CSS supplémentaire.
Ravi de voir cette nouvelle fonctionnalité ! Je me demande : Discourse respecte-t-il actuellement l’ensemble des directives WCAG, ou reste-t-il encore du travail à faire ?
Il reste encore un peu de travail à faire, mais pas beaucoup. Nous sommes à environ 99 % du chemin et travaillons actuellement activement avec un consultant en accessibilité pour combler les dernières lacunes.
En suivant ce fil de discussion, je suis ravi d’apprendre que WCAG 2.0 est pris en charge. J’ai peut-être manqué quelque chose, mais je ne vois aucune mention des sous-titres. Discourse prend-il en charge les sous-titres pour les vidéos ? Existe-t-il un mécanisme dans Discourse pour publier des vidéos avec des sous-titres ?
Vous pouvez ajouter manuellement des sous-titres en utilisant la balise vidéo HTML5, et il existe également un composant de thème qui fournit une petite interface utilisateur à cet effet.
