[CONGRESSUS] Suggestion d'améliorations pour l'interface de vote

Bonjour

J’espère poster au bon endroit.

J’ai eu récemment une petite galère après avoir voté sur Congressus pour une formation, où j’ai eu du mal à avoir si j’avais voté, et pour quelle option j’avais voté. En effet, à l’heure actuelle, quand on vote, on juste le cadre autour des boutons qui change de couleur. J’ai mis un moment à m’en apercevoir. :confused:

De plus, en creusant le sujet, j’ai fait quelques tests d’accessibilité, et j’ai constaté que cette idée du fond de couleur n’est pas systématiquement accessible.

Quelques idées :

  • retirer le cadre de couleur
  • mettre un symbole pour l’option choisie, typiquement une coche, qui confirme bien que c’est l’option choisie.
  • accentuer l’option sélectionnée, en jouant sur la valeur de luminosité de la couleur des boutons entre eux (même si la notion de couleur dépend de ce qu’on voit)
  • idéalement, mettre au même niveau toutes les options non-choisies (typiquement en gris, valeurs par défaut des boutons dans bootstrap).

Exemples :

Le fond des boutons colorés conserve l’utilisation du premier paramètre HSL comme variable, mais les autres valeurs sont changées pour accroître l’accessibilité: hsl($1, 100%, 80%)

Pour continuer sur l’accessibilité des éléments, il y a aussi les boutons « remettre à zéro » et « s’abstenir » qui ne passent pas les tests d’accessibilité, car ayant un texte blanc sur un fond de couleur. Ils gagneraient à voir leur texte être changé pour du noir.

Mon exemple prend aussi en compte quelques éléments annexes : séparation de la description, des instructions et modalités de vote, et des votes en eux-mêmes par l’utilisation d’un simple trait ; utilisation de titres pour les labels de vote, etc.

J’aurai bien suggéré les changements directement dans GitHub pour faire gagner du temps, mais je ne sais pas (encore) m’en servir. :slight_smile:


Dès fois que, les modifs CSS nécessaires (il faudrait ajouter une class off aux boutons judgement désactivés) :

.judgement {
    filter: brightness(75%) !important;
}
.judgement.active {
    filter: brightness(100%) !important;
}
.judgement.active::after {
    content: " ✔️";
}
.judgement.off {
    background: #BFBFBF !important;
    filter: brightness(100%) !important;
    border-color: #999;
}
4 Likes

Ça viendra #MOUAHAHAHAHAHAHAHAH


Merci pour le CSS déjà fait, ça évite de chercher tout plein.

Personnellement je n’aime pas la neutralisation, mais comme il y a une page de paramétrage pour les compte, ça peut être une option de préférence d’affichage du JM

Il me faudrait de bons mentors. C’est du loisir pour moi, donc ça va assez rapidement sous la pile des trucs à faire. :smiley:

Ce n’est pas une question d’aimer ou non, mais de bonne pratique. Paramétrage il peut y avoir… tant que ça met le gris par défaut. :wink:

Sauf qu’on perd la notion de gradient dans les réponses, et je trouve ça dommageable pour le jugement majoritaire.

Tu auras toujours une gradation par la position du bouton et les labels :

Sauf que par défaut, « À rejeter » est sélectionné, donc on est toujours dans le deuxième cas.

Mmmh, avoir « À rejeter » sélectionné par défaut, n’est-ce pas une influence ? Après tout, on n’a pas « non » sélectionné par défaut pour un vote oui/non.

C’est pas moi qu’il faut convaincre sur ce sujet :wink: . Mais c’est le fonctionnement du jugement majoritaire qui « préfère » cette méthodologie : si tu ne sais pas, si tu n’as pas d’avis, tu DOIS rejeter.

Noté, merci pour cette précision. Je vais y réfléchir. :slight_smile:

On est sur un jugement majoritaire. Si tu votes tu dois t’exprimer sur tous les choix. Sinon tu ne votes pas.

Et le choix de base c’est à rejeter, c’est un parti pris. Je te donne mes arguments si tu me donnes les tiens :relaxed:

1 Like

Mon but n’est pas de réinventer le jugement majoritaire.

Si on oublie l’idée des boutons off, le reste est applicable, avec l’option « à rejeter » déjà cochée.

Suite à vos retours, le gris semble être à abandonner vu que le jugement majoritaire demande à ce qu’un choix par défaut soit prévu. On arrive à l’affichage suivant :

Les valeurs choisies permettent une accessibilité WCAG AA pour tous les textes, ce qui couvre la majorité des contrastes. Le choix pour le vote est clairement indiqué par la coche, le gras, l’ombrage interne et la différence de luminosité (bretelles, ceinture, baudrier et élastiques). :slight_smile:

Cependant, cette proposition ne couvre pas l’accessibilité aux couleurs, pour laquelle un travail plus systématique serait a effectuer via des feuilles de style dédiées activables dans les préférences. (Au passage, le saviez-vous ? Le violet de notre charte graphique n’est pas accessible pour un texte « standard » sur un fond noir.)


[Ce qui suit est composé de bouts de code ; si ce n’est pas votre truc, vous pouvez passer au message suivant.]

CSS de la proposition :

.judgement {
    filter: brightness(75%) !important;
}
.judgement.active {
    filter: brightness(100%) !important;
}
.judgement.active::after {
    content: " ✔️";
    font-weight: bold;
}
.judgement:hover {
    filter: brightness(95%) !important;
}

Modifs sur le fichier myVote.php :

  • Lignes 272, 287 et 302 changer les valeurs hsl pour : hsl(<?php echo 120 * (0 + ($judgeIndex / ($nbItems - 1))); ?>, 100%, 80%);

Je n’ai pas trouvé le script qui surligne toute la ligne de vote à la couleur du choix effectué, mais, si on part sur les propositions que je formule, il faudrait le changer pour qu’il n’utilise plus que les classes CSS judgement et active détaillées plus haut.

Autres changements pour l’accessibilité
CSS global :

.btn-vote .btn-reset,
.btn-vote .btn-info {
     color: #111;
}

Modifs sur le fichier myVote.php :

  • Ligne 326, changer pour <button class="btn btn-primary btn-vote" style="width: 100%; margin-bottom: 4px;" type="button"><strong><?php echo lang("common_vote"); ?></strong></button>

Alors ça tombe bien, on n’a plus de violet dans notre charte graphique. :smirk:

On n’a pas du voir les mêmes fichiers concernant la dite charte, et surtout le futur portail pirate alors. Ils ont été présentés en formation « Flibustier » la semaine dernière. Il y a du violet sur fond noir, avec des textes trop petits pour qu’ils soient accessibles.

Je n’ai pas trouvé les sujets concernant le site sur Discourse, mais si tu les as, je prends pour aller poster mes remarques là-bas. :wink:

Dans le mode sombre. Il « existe » un thème clair :

Ah mais la charte graphique du Portail n’est pas la charte graphique du Parti Pirate.

Sinon on a un salon d’équipage Portail Pirate sur Discord et il doit y avoir aussi un espace dédié sur le forum.

Édit : ici https://discourse.partipirate.org/c/equipages/equipage-portail-pirate/149

1 Like

L’existence du thème clair ne retire pas le problème qu’à le thème sombre. :slight_smile:

Merci Florie!