Yop,
plutôt que de faire un ticket tout de suite, je pose ça là comme une base de discussion, voir TODO, pour SPIP et plugins (saisies et d'autres ?)
http://romy.tetue.net/signaler-les-champs-obligatoires
Merci Romy pour le rappel.
De mon côté, je n'avais jamais vu l'ajout de aria-hidden pour éviter la double vocalisation, mais je te fais confiance sur ce point là.
--
nicod_
Hop,
Le 20/10/2018 à 21:09, nicod_ a écrit :
Yop,
plutôt que de faire un ticket tout de suite, je pose ça là comme une base de discussion, voir TODO, pour SPIP et plugins (saisies et d'autres ?)
http://romy.tetue.net/signaler-les-champs-obligatoires
Merci Romy pour le rappel.
De mon côté, je n'avais jamais vu l'ajout de aria-hidden pour éviter la double vocalisation, mais je te fais confiance sur ce point là.
Bonne idée, le patch suivant conviendrait pour le plugin Saisies ?
++
b_b
--- saisies/_base.html (révision 112094)
+++ saisies/_base.html (copie de travail)
@@ -48,7 +48,7 @@
<!--!inserer_saisie_editer-->
<[(#ENV{saisies_base_conteneur,#DIV|sinon{li}})] class="editer editer_[(#ENV{nom}|saisie_nom2classe)][ (#GET{obligatoire})][ (#GET{erreurs}|oui)erreur][ (#GET{conteneur_class})][ (#ENV{conteneur_class,#ENV{li_class}})][ saisie_(#ENV{type_saisie})]"[ data-id="(#ENV{id_saisie})"][ data-afficher_si="(#ENV{afficher_si})"]>
#ENV*{inserer_debut}
- [<label[(#ENV{type_saisie}|match{oui_non|radio|checkbox|fichiers}|non) for="champ_[(#ENV{id,#ENV{nom}}|saisie_nom2classe)]"][ class="(#ENV{label_class})"]>(#ENV*{label})[<span class='obligatoire'>(#GET{obligatoire}|oui)[(#ENV*{info_obligatoire}|is_null|?{<:info_obligatoire_02:>,#ENV*{info_obligatoire}})]</span>]</label>]
+ [<label[(#ENV{type_saisie}|match{oui_non|radio|checkbox|fichiers}|non) for="champ_[(#ENV{id,#ENV{nom}}|saisie_nom2classe)]"][ class="(#ENV{label_class})"]>(#ENV*{label})[<span class='obligatoire'[(#HTML5|oui) aria-hidden="true"]>(#GET{obligatoire}|oui)[(#ENV*{info_obligatoire}|is_null|?{<:info_obligatoire_02:>,#ENV*{info_obligatoire}})]</span>]</label>]
[<span class='erreur_message'>(#GET{erreurs})</span>]
[<p class="explication" id="[explication_(#ENV{nom}|saisie_nom2name)]">(#ENV*{explication})</p>]
[<em class='attention'>(#ENV*{attention})</em>]
Le 21/10/2018 à 12:01, Bruno Bergot a écrit :
Bonne idée, le patch suivant conviendrait pour le plugin Saisies ?
Ça me parait pas mal.
--
nicod_
Le 21/10/2018 à 18:16, nicod_ a écrit :
Le 21/10/2018 à 12:01, Bruno Bergot a écrit :
Bonne idée, le patch suivant conviendrait pour le plugin Saisies ?
Ça me parait pas mal.
Par contre si on met un aria-hidden sur le span pour éviter la double vocalisation, il faut impérativement que les champs aient un attribut required.
Actuellement les input radio et checkbox n'en ont pas, il faudrait corriger ça (et vérifier aussi si c'est bien supporté partout).
On est censé ajouter un required sur tous les input groupés par l'attribut name :
https://www.w3.org/TR/html5/forms.html#the-required-attribute
Je vois aussi d'autres saisies qui n'ont pas de required : auteurs, cas, mot, oui_non...
--
nicod_
Le 21/10/2018 à 20:04, nicod_ a écrit :
Actuellement les input radio et checkbox n'en ont pas, il faudrait corriger ça (et vérifier aussi si c'est bien supporté partout).
On est censé ajouter un required sur tous les input groupés par l'attribut name :
HTML Standard
Pour les radio, ça fonctionne très bien avec un required sur chaque input.
Dans Firefox, quand on soumet, tous les radios du groupe ont un halo rouge avec une infibulle "veuillez sélectionner une de ces options".
Quand on en choisit une, le halo disparait sur le groupe.
Testé avec plussieurs groupes de radios dans un même form.
Pour les checkbox, c'est kaputt
On ajoute des crochets pour PHP dans le nom, et le navigateur considère alors que chaque case est required.
Possibilité : gérer ça en JS, qui ajouterait les required au chargement sur les checkboxes ('.saisie_checkbox input'), sauf celle du choix alternatif, et qui les retirerait dès qu'une case au moins est cochée.
Mais ça peut poser problème avec les lecteurs d'écran justement, qui pourraient ne pas l'interpréter (ou pas en live).
--
nicod_
Le 21/10/2018 à 20:37, nicod_ a écrit :
Possibilité : gérer ça en JS, qui ajouterait les required au chargement sur les checkboxes ('.saisie_checkbox input'), sauf celle du choix alternatif, et qui les retirerait dès qu'une case au moins est cochée.
Mais ça peut poser problème avec les lecteurs d'écran justement, qui pourraient ne pas l'interpréter (ou pas en live).
Un attribut aria-live="polite" sur la balise englobant le groupe de checkboxes pourrait indiquer au lecteur d'écran de mettre à jour l'information quand elle change depuis JS.
A tester dans NVDA, JAWS et Voice Over.
--
nicod_
Je transfère la réponse de tetue qui a été modérée sur la liste.
-------- Message transféré --------
Sujet : Re: [SPIP Zone] Champs obligatoires des formulaires / Accessibilité
Date : Mon, 22 Oct 2018 11:02:40 +0200
De : tetue@rezo.net <mail@tetue.net>
Pour : nicod_ <nicod@lerebooteux.fr>
Copie à : Bruno Bergot <bruno@eliaz.fr>, Spip zone <spip-zone@rezo.net>
Vous êtes super ! Je vous love :*
Une façon de découper cela (en tâches priorisées) :
1) ajouter l’attribut required sur tous les champs obligatoires.
2) ajouter la mention, via une chaîne de langue. Là, faut choisir si SPIP insère par défaut « (obligatoire) » (recommandé, pask simple et robuste) ou un astérisque (<abbr title="(obligatoire)" aria-hidden="true" class="required">*</abbr>).
3) si choix de l’astérisque, ajouter, via chaîne de langue, une légende sur tous les forms générés par SPIP. En laissant tomber le aria-hidden="true" sur la légende, car ce n’est pas obligatoire (à laisser donc au zèle des webmestres averti·es).
Ainsi, pour personnaliser, plus besoin de forker tel ou tel formulaire : il suffit de personnaliser les chaînes de langues correspondantes et zou, ça s’applique partout, bonheur.
--
tetue
http://spip.tetue.net
Le 21/10/2018 à 20:37, nicod_ a écrit :
Pour les checkbox, c'est kaputt
On ajoute des crochets pour PHP dans le nom, et le navigateur considère alors que chaque case est required.
J'ai dit une connerie.
Instinctivement j'ai cru que le required pour les checkbox fonctionnait comme pour les radio (faire au moins un choix), mais non, elles ne sont pas "groupées" par le name, ce qui est logique en fait.
Ce n'est donc pas à cause des crochets : dans le cas des checkboxes le required s'applique individuellement à chaque input, elles ne sont pas "groupées" comme les radio.
Possibilité : gérer ça en JS, qui ajouterait les required au chargement sur les checkboxes ('.saisie_checkbox input'), sauf celle du choix alternatif, et qui les retirerait dès qu'une case au moins est cochée.
Voilà, un patch JS + tests.
--
nicod_
Le 22/10/2018 à 11:35, nicod_ a écrit :
Le 21/10/2018 à 20:37, nicod_ a écrit :
Pour les checkbox, c'est kaputt
On ajoute des crochets pour PHP dans le nom, et le navigateur considère alors que chaque case est required.J'ai dit une connerie.
Instinctivement j'ai cru que le required pour les checkbox fonctionnait comme pour les radio (faire au moins un choix), mais non, elles ne sont pas "groupées" par le name, ce qui est logique en fait.
Ce n'est donc pas à cause des crochets : dans le cas des checkboxes le required s'applique individuellement à chaque input, elles ne sont pas "groupées" comme les radio.
Possibilité : gérer ça en JS, qui ajouterait les required au chargement sur les checkboxes ('.saisie_checkbox input'), sauf celle du choix alternatif, et qui les retirerait dès qu'une case au moins est cochée.
Voilà, un patch JS + tests.
oui, c'est ce que je disais hier soir sur IRC. Et dans formdiable/ saisies / vérifier, il considère que l'entrée est bien rentrée si jamais au moins 1 des checkbox du groupe est coché.
Le 20/10/2018 à 21:09, nicod_ a écrit :
Yop,
plutôt que de faire un ticket tout de suite, je pose ça là comme une base de discussion, voir TODO, pour SPIP et plugins (saisies et d'autres ?)
http://romy.tetue.net/signaler-les-champs-obligatoires
Merci Romy pour le rappel.
De mon côté, je n'avais jamais vu l'ajout de aria-hidden pour éviter la double vocalisation, mais je te fais confiance sur ce point là.
heu c'est ptet con ce que je dis, mais en passant en css par un pseudo element en :before ou : after content:'*' un lecteur vocal marquera normalement juste une pose (je fais ça souvent plutot que un i/span pour une icone sur un label).
si on utilise une media query sur speech et un display:none a priori ça devrais le faire et sans js ou surcharge du markup.
l'attribut required doit lui être spécifié en html5 ça c'est sur c'est ça qui signale le role explicite aria.
enfin c'est une idée…
--
Bonne journée
Arnaud B. (Mist. GraphX)
Hop,
Le 22/10/2018 à 11:02, tetue@rezo.net a écrit :
Vous êtes super ! Je vous love :*
Une façon de découper cela (en tâches priorisées) :
1) ajouter l’attribut required sur tous les champs obligatoires.
2) ajouter la mention, via une chaîne de langue. Là, faut choisir si SPIP insère par défaut « (obligatoire) » (recommandé, pask simple et robuste) ou un astérisque (<abbr title="(obligatoire)" aria-hidden="true" class="required">*</abbr>).
Merci pour le retour, voilà, tout est noté dans ce ticket 
++
b_b
Oui j’ai/avais bien lu et je te remercie de prendre le temps de répondre. C’est pas le top mais c’est pris en charge par les synthèses vocales ce qui pose problème dans d’autres cas, En fait c’est surtout que introduire trop de js (comme la discussion prenait tournure en ce sens …) dans des saisies qui peuvent se retrouver imbriquées X fois, pour corriger des roles aria, … ben ça fait peur ! ^^ j’ai fait le test sur un menu responsive pour avoir la navigation par tab, j’imagine pour un formulaire avec fieldset imbriqués et des cases a cocher ^^ Les niveaux d’accessibilité suivant le niveau exigé AA ou AAA varie de « rempli une des conditions » à « le label comprend l’information » ( …) de mémoire … Si on suis et la partie la ou je suis pas fanUne astérixe (astérixsm ?) * rouge pour un non voyant ça veut dire quelque chose ? 
c’est visuel pourtant la semaine dernière j’ai encore eut un client (bien voyant) qui m’a demandé pourquoi y’avait une étoile à coté d’un champ … bon elle était pas rouge … mais j’ai aussi un assureur qui voit en noir et gris donc de mon avis (…^^) pour un mal/non voyant le truc ne tiens pas debout : on doit PAS utiliser un signe mais un mot ou phrase : « ce champ est requis » (d’ou 'intérêt du point d’après sur le ciblage par media-querie). Un lecteur vocal est capable de lire le content d’un :before/:after, ainsi que d’interpreter des css sinon il ne lirait pas une phrase en continu quand on reduit un bloc pour le masquer comme expliqué ici, ou marquerait une pose sur une icone le gros reproche de cette technique c’est effectivement si y’a pas de css… mais si y’a pas de css, y’a pas de js normalement en mode texte genre lynx … bref la on est dans du 0.01 % d’utilisateur et comme disait coluche : « celui qui est petit, …, qui a pas de css, ni de js, … ben ce sera très dur ! » ^^ @media speech { .required{ content:'Ce champ est requis !! tada ' } } j’ai pas testé mais en théorie ça marche lol l’autre idée c’est de mettre un title dans le svg qui servirait pour l’astérixsm la on peut commencer a parler d’accessibilité mais un étoile minuscule dans un label non … c’est pas accessible pour un vieux de 70ans qui voit oui c’est bien ce que j’ai dit required en html5 c’est explicite pas besoin de role aria en supplément. Mon netbook dans ma cuisine pour aller sur marmiton et ecouter fip, il est sous XP avec firefox 52 et en html5 j’avais pas pensé que la norme html subsistait encore … au rythme de l’obsolescence programmée … Bonne journée et we !! Arnaud