[Résolu] Champ de saisie avec bouton loupe pour version DARK

(reprise du message précédent)

boteha_2 a écrit :

Le span class="visually-hidden" agit sur la mise en page, il crée un espace à droite du svg..

J'imagine que je dois le styler par CSS mais comment ?

Si display none je suppose que le mal-voyant n'entendra rien.
Si visibility hidden le span continuera à agir sur la mise en page.

Très bonne remarque, j'ai oublié de te donner le code associé :
https://github.com/alsacreations/bretzel/blob/main/public/bretzel-reset.css#L222

parsimonhi a écrit :

Ceci étant, ici, Raphael a tout à fait raison de dire que ce n'est pas le <svg> qu'on doit rendre accessible, mais le <button>. Et pour faire cela, si tu ne veux pas du <span>, tu peux à la place mettre un attribut "title" au bouton.

Il faudrait que je vérifie mais il me semble que ce serait plutôt `aria-label` non ?

Encore merci de vos suivis.

Je réfléchis à vos solutions et j'y reviens très bientôt.

À première vue avec title une infobulle va apparaître au survol.

Il faut voir l'effet, pas forcément désirable.

aria-label est plus discret, en supposant que cela fasse le boulot.

Ou le span qui présente le petit inconvénient d'imposer quelques lignes de code en plus...

Bonjour,

Raphael a écrit :
Il faudrait que je vérifie mais il me semble que ce serait plutôt `aria-label` non ?

Tu peux aussi utiliser "aria-label". Les deux peuvent fonctionner. Mais il me semble que quand un élément html a un moyen d'être accessible via un attribut purement html (donc ici "title"), il est préférable d'utiliser ce moyen à un attribut aria- (aria-label, aria-labelledby, ...). Comme "title" affiche un tooltips au passage de la souris ce que ne fera pas le "aria-label", reste à savoir si on veut de ce tooltips ou pas. Quand je ne veux absolument pas du tooltips (ce qui est plutôt rare), je mets un "aria-label", sinon, je mets un "title".

EDIT: certains disent aussi qu'il ne faut pas utiliser "title" (toujours ? dans certains cas ?) parce qu'il n'apparait pas en navigation clavier. Donc bon, il sera lu par les lecteurs d'écran, mais ceux qui naviguent au clavier sans lecteur d'écran n'auront pas l'information donnée par le tooltips. Si visuellement l'icône est "parlante", ça sera acceptable selon moi. Mais si le tooltips apporte une information indispensable, utiliser "title" devient problématique (on notera au passage qu'un "aria-label" ou un "<span>" visuellement caché ne seront pas mieux dans ce cas précis).

Ça, c'est pour la théorie. Mais après il y a l'aspect pratique : qu'est-ce qui est le moins bugué selon les circonstances ? Et là, c'est beaucoup plus "compliqué" (annonce en double, annonce oubliée, annonce lue avec la mauvaise voix en cas d'extrait de texte devant être lu en langue étrangère, etc.) !

Amicalement,
Modifié par parsimonhi (25 Feb 2024 - 21:09)

Raphael a écrit :
Très bonne remarque, j'ai oublié de te donner le code associé :
https://github.com/alsacreations/bretzel/blob/main/public/bretzel-reset.css#L222

@Raphael. Du coup j'ai une question moi aussi :

Auparavant j'utilisais une règle du même genre :

.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  white-space: nowrap;
  border: 0;
  clip-path: rect(0, 0, 0, 0);
}

Au final je me contente désormais de ceci :

.sr-only {
  position: absolute;
  transform: scale(0);
}

Je loupe quelque chose ? Dans quel contexte faut-il les autres règles ? Je n'ai pas encore trouvé pour l'instant...

Olivier C a écrit :

Je loupe quelque chose ? Dans quel contexte faut-il les autres règles ? Je n'ai pas encore trouvé pour l'instant...

Salut Olivier,

Très franchement je ne me suis pas penché sur la question depuis plusieurs années et il est possible que la syntaxe ait pu être allégée depuis.

En attendant, les "gros" frameworks utilisent toujours une syntaxe très fournie :
- Bootstrap (visually-hidden) : https://github.com/twbs/bootstrap/blob/v5.0.2/scss/mixins/_visually-hidden.scss
- Tailwind (sr-only) : https://tailwindcss.com/docs/screen-readers

La dernière explication très concrète que j'ai trouvée date de fin 2022 : https://www.tpgi.com/the-anatomy-of-visually-hidden/

EDIT : Kitty Giraudel avait fait une liste des propriétés et il se trouve qu'à l'époque (2021), scale(0) ne suffisait pas : https://kittygiraudel.com/2021/02/17/hiding-content-responsibly/
Modifié par Raphael (26 Feb 2024 - 09:40)

Bonjour,

Sur ce sujet de l’accessibilité, aria-label n'est-il pas prévu pour pallier l'absence d'un label ?

Dans mon code :

<p><input type="text" id="fab" /><button type="submit"><svg>xxx</svg></button></p>
<p><label for="fab">yyy</label></p>

Finalement, le label ne rend-il pas le champ de saisie et son bouton de soumission parfaitement accessibles ?

J'utilise aria-label dans un cas plus tordu où il n'y a pas de label sur l'input.

J'ai ajouté ce morceau de html au codepen sans le styler.

Qu'en pensez-vous ?

Hello,

Le label est associé à l'input. Or dans ton cas, l'élément interactif qui doit avoir un nom accessible est le button.

Ici, l'input+label sont inutiles voire parasites pour la compréhension.
Modifié par Raphael (27 Feb 2024 - 10:02)

Bonjour Raphaël,

Merci de ton suivi.

Raphael a écrit :

Le label est associé à l'input. Or dans ton cas, l'élément interactif qui doit avoir un nom accessible est le button.
Ici, l'input+label sont inutiles voire parasites pour la compréhension.

Je veux bien te croire.
Si je mets un label sur le bouton cela ne semble pas une bonne idée car sauf erreur cliquer sur le label entraînerait la soumission de la requête, ce qui peut surprendre.

<p><input type="text" id="fab" /><button type="submit" aria-label="Bouton de soumission pour recherche en texte libre"><svg>xxx</svg></button></p>
<p>Recherche par texte libre</p>

Est-ce mieux ?

Bonjour,

Je reviens vers vous avec à la fin du codepen une image SVG de panier.

L'image de la loupe, c'est réglé, merci.

L'image du panier, je recherche les mêmes couleurs de trait que la loupe (donc une couleur :Link et une couleur :hover, cela en LIGHT et en DARK).

J'aimerais bien intégrer le code svg au code html mais en l’occurrence le code svg est un peu compliqué pour moi.
Par ailleurs, si le code svg est intégré au code html, comment changer la taille de l'image ?

Du coup j'essaye un filtre sur une balise img mais cela ne donne aucun résultat.

Pouvez-vous m'aider pour intégrer dans le code html avec deux tailles différentes ?

Merci d'avance.

Bonjour,

Pour l'image du panier j'ai adopté la méthode des filtres dans le codepen.

Cela marche en DARK, pas en LIGHT, aucun idée du problème.

Dans la vraie vie cela marche aussi en LIGHT, donc pas de souci.

Je m'étonne que des filtres aussi complexes puissent s'exécuter sans latence et semble-t-il sans consommer de ressources.

filter: invert(61%) sepia(26%) saturate(312%) hue-rotate(159deg) brightness(89%) contrast(89%)

C'est pourquoi j'aurais préféré la solution avec le svg dans le code html.

Bonjour,

Le svg du panier "assaini" :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45" fill="none" stroke="black" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round">
	<path d="M1.2,2.2H7.6L10,14H43.3L39.3,32H13.5L10,14M18,32V36M34,32V36M18,36A3.5,3.5 0 0 1 18,43A3.5,3.5 0 0 1 18,36ZM34,36A3.5,3.5 0 0 1 34,43A3.5,3.5 0 0 1 34,36Z"/>
</svg>

Amicalement,

Bonjour,

Note : dans ma réponse précédente j'ai oublié de préciser que j'avais rendu le svg "carré" (c'est plus facile à styler).

boteha_2 a écrit :
J'aimerais bien intégrer le code svg au code html mais en l’occurrence le code svg est un peu compliqué pour moi.
Par ailleurs, si le code svg est intégré au code html, comment changer la taille de l'image ?

Quand le svg est intégré au code html, on peut le styler via le css de la page. Par exemple, pour ses dimensions, on peut tout simplement ajouter dans le css (en supposant que tu as mis le <svg> à la place de tes balises <img> dans ton code html) :

div#Grand_Panier svg {width: 42px; height: auto;}
div#Petit_Panier svg {width: 32px; height: auto;}

Pour la couleur, c'est la propriété css "stroke" qu'il suffira de modifier (à condition d'utiliser le svg que j'ai fourni qui n'a que des traits, parce que pour celui que tu avais, c'est un peu plus compliqué vu qu'il y a à la fois des traits dont la couleur se change via la propriété css "stroke", et des surfaces dont la couleur se change via la propriété css "fill"). Par exemple, pour changer la couleur du svg que j'ai fourni :

div#Grand_Panier svg {stroke:red;}
div#Petit_Panier svg {stroke:green;}

Amicalement,

Bonjour parsimonhi,

Merci de ton suivi

J'ai intégré ton code au codepen, à la fin.

La forme du panier est parfaite mais sauf erreur je n'arrive pas à styler par le CSS, ni pour la taille ni pour la couleur.

Peut-être un bug de codepen.
Je vais essayer sur mon serveur dès que j'ai le temps.

EDIT : Taiile et Couleur par CSS fonctionnent en mode DARK mais pas en mode LIGHT.
Trop bizarre ce codepen.
Modifié par boteha_2 (18 Mar 2024 - 21:28)

Bonjour,

boteha_2 a écrit :
La forme du panier est parfaite

Le svg était perfectible. En voici une meilleure version car plus courte (3 points de moins) pour faire exactement la même chose :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45" fill="none" stroke="black" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round">
	<path d="M1.2,2.2H7.6L13.5 32H39.3L43.3 14H10M18,32V36A3.5,3.5 0 0 1 18,43A3.5,3.5 0 0 1 18,36ZM34,32V36A3.5,3.5 0 0 1 34,43A3.5,3.5 0 0 1 34,36Z"/>
</svg>

boteha_2 a écrit :
Taille et Couleur par CSS fonctionnent en mode DARK mais pas en mode LIGHT.

Il y a me semble-t-il un bug dans ton css. Il manque une } juste avant @media (prefers-color-scheme: dark), ce qui pourrait expliquer pas mal de tes problèmes, si ce n'est la totalité.

Conseil pour l'avenir : écrire dans l'un de tes posts les phrases "Peut-être un bug de codePen" ou "Trop bizarre ce codepen" devraient déclencher chez toi une alerte rouge indiquant que tu es en train de te fourvoyer !

Amicalement,

Bonjour parsimonhi,

Merci pour l’optimisation du SVG.

parsimonhi a écrit :
Il y a me semble-t-il un bug dans ton css. Il manque une } juste avant @media (prefers-color-scheme: dark), ce qui pourrait expliquer pas mal de tes problèmes, si ce n'est la totalité.

Tu as raison, c'est corrigé, voir le codepen.

parsimonhi a écrit :
Conseil pour l'avenir : écrire dans l'un de tes posts les phrases "Peut-être un bug de codePen" ou "Trop bizarre ce codepen" devraient déclencher chez toi une alerte rouge indiquant que tu es en train de te fourvoyer !

D'accord mais j'ai déjà connu des bugs de codepen.

Encore merci pour le suivi, je ne vais pas tarder à cocher Résolu.

Je coche Résolu.

Merci pour votre aide.