Re: [Liste GTA] Champ de formulaires & cellules de tableaux

[ROSA Giuseppe (93)]

Bonjour Romain, Merci également pour ta réponse. C'est celle que j'ai préconisé pour le moment (y compris le role presentation sur table). Elle fonctionne également très bien avec Firefox/NVDA. Ce qui me génait un peu ici, c'était la redondance du label "matière 1" sur chaque bouton. L'une ces label est par exemple "Trouvez-vous que la documentation accessible à partir de l’espace « Comment faire pour... » est : " avec comme intitulé de colonne : Très satisfaisant, Satisfaisant, Moyennement satisfaisant, Non satisfaisant, Service non utilisés. Par conséquent je cherchais une solution moins répétitive pour les utilisateurs de vocalisateur que : Trouvez-vous la documentation accessible à partir de l’espace « Comment faire pour... » : Très satisfaisant Trouvez-vous la documentation accessible à partir de l’espace « Comment faire pour... » : Satisfaisant Trouvez-vous la documentation accessible à partir de l’espace « Comment faire pour... » : Moyennement satisfaisant Trouvez-vous la documentation accessible à partir de l’espace « Comment faire pour... » : Non satisfaisant Trouvez-vous la documentation accessible à partir de l’espace « Comment faire pour... » : Service non utilisés Avec plus d'une dizaine de questions de ce type ! Je pense très vite pénible pour un utilisateur non voyant. C'est pourquoi je cherchais une solution évitant la répétition de la première partie du label, comme le ferait la legend d'un fieldset, dans ces cas-là la legend est vocalisé qu'une fois sur l'ensemble des champs. A priori, en recoupant ta réponse et celle d'Olivier, ce n'est pas si simple et je te remercie grandement de ton concours et ta suggestion, qui me permet notamment de savoir que cela fonctionne également sur VoiceOver. Cordialement, DGFiP Giuseppe ROSA Inspecteur Analyste Atelier SODA - bureau SI-1A Site SODA : http://si1a.intranet.dgfip/soda tel : 01.573.36.997 pièce : 2388   Adoptez l'éco-attitude. N'imprimez ce mail que si c'est vraiment nécessaire -------- Message original -------- Sujet : Re: [Liste GTA] Champ de formulaires & cellules de tableaux De : Romain Gervois <cont...@romaingervois.fr> Pour : GTA <liste_gta@list.accessiweb.org> Date : 02/11/2015 13:33 Bonjour, Tu peux rester sur la solution tableau pour la mise en page. Par contre, plusieurs attentions à avoir sur le tableau : - ajouter un rôle presentation sur l'élément table ; - ne pas avoir d'élément caption ; - ne pas avoir de résumé ; - ne pas avoir d'en-têtes et les liaisons qui vont avec. Pour les étiquettes, tu peux identifier chaque pseudo en-tête de ligne / colonne et utiliser ces identifiants dans des aria-labelledby pour faire les liaisons adéquates. Enfin, pour les "redondances" de restitution, tu peux appliquer un aria-hidden="true" sur l'élément tr contenant les pseudo en-têtes de colonnes et sur chaque élément td correspondant à un en-tête de ligne. Ce qui donne en code :         <table role="presentation">             <tr aria-hidden="true">                 <td></td>                 <td id="niveau1">Bon</td>                 <td id="niveau2">Moyen</td>                 <td id="niveau3">Mauvais</td>             </tr>             <tr>                 <td aria-hidden="true" id="matiere1">Matière 1</td>                 <td><input type="radio" aria-labelledby="matiere1 niveau1" name="evaluation1" /></td>                 <td><input type="radio" aria-labelledby="matiere1 niveau2" name="evaluation1" /></td>                 <td><input type="radio" aria-labelledby="matiere1 niveau3" name="evaluation1" /></td>             </tr>             <tr>                 <td aria-hidden="true" id="matiere2">Matière 2</td>                 <td><input type="radio" aria-labelledby="matiere2 niveau1" name="evaluation2" /></td>                 <td><input type="radio" aria-labelledby="matiere2 niveau2" name="evaluation2" /></td>                 <td><input type="radio" aria-labelledby="matiere2 niveau3" name="evaluation2" /></td>             </tr>             <tr>                 <td aria-hidden="true" id="matiere3">Matière 3</td>                 <td><input type="radio" aria-labelledby="matiere3 niveau1" name="evaluation2" /></td>                 <td><input type="radio" aria-labelledby="matiere3 niveau2" name="evaluation2" /></td>                 <td><input type="radio" aria-labelledby="matiere3 niveau3" name="evaluation2" /></td>             </tr>         </table> Testé avec succès sous VoiceOver OS X + Safari. Cela nécessite de faire des tests avec d'autres combinaisons. Romain Le 2 novembre 2015 12:55, Olivier Nourry <olv.nou...@gmail.com> a écrit : Bonjour Giuseppe, L'inconvénient de ta solution 2 (fieldset dans une table) est qu'on ne peut pas "croiser" de la sorte fieldset et table, ça casse le code HTML. Ou alors il faut faire une table à l'intérieur de chaque fieldset, et une table à 1 colonne comme wrapper. Bof bof. Perso j'aurais fait une suite de fieldset, un par matière, avec des label à chaque bouton. Pour obtenir la représentation visuelle que tu décris, j'aurais ensuite mis ça en lignes, caché les label (mais est-ce nécessaire?), et aligné avec des propriétés display de la famille table-* ou équivalent. Les textes dans la 1ère ligne, rappelant la fonction des boutons, ne sont alors utiles que pour la représentation visuelle, pas besoin de les relier aux boutons. De cette manière, en lecture non visuelle, c'est accessible (avec un peu d'infos en trop, celles de la première ligne); et en visuel, on a les informations et l'alignement nécessaires pour comprendre la fonction de chaque bouton radio. J'espère t'avoir été utile  J'espère t'avoir été utili Olivier Nourry about.me/oliviernourry     Le 2 novembre 2015 11:08, ROSA Giuseppe (93) <giuseppe.r...@dgfip.finances.gouv.fr> a écrit : Bonjour la liste, Je voulais connaître votre avis sur la meilleur manière d'implémenter un formulaire présenter dans un tableau (plusieurs "clients" semblent impacter chez nous par ce type de présentation). Je pense qu'il s'agit d'un cas déjà rencontré, puisque des outils de génération de questionnaire en ligne doivent générer des cas similiaires. Dans le dernier cas qu'il m'a été soumis, il s'agit d'une sorte de formulaire de notation (pour faire simple) : Sur la première ligne les intitulés des notes Sur les lignes suivantes : première cellule : l'intitulé de la matière cellules suivantes : bouton radio (symbolisé ci-dessous par ©)  Bon Moyen Mauvais Matière 1 © © © Matière 2 © © © Matière 3 © © © Le problème est doit-on (ou est-il préférable) traiter ce tableau en tant que tableau de données, et dans ce cas les cellules de la première ligne et de la première colonne seraient les cellules d'en-tête. Par contre, les contenus de ces en-têtes peuvent-ils être considérés comme les étiquettes des cases boutons radio (cas prévus pour rendre explicite des liens mais je n'ai pas l'impression que cela soit le cas pour des boutons radio, cases à cocher voire champ de saisie de formulaire). Si je rajoute des labels (aria-label ou autre), j'ai un redondance d'information (intitulé de la cellule d'en-tête + étiquette du bouton). Une autre solution serait de traiter cela comme un tableau de présentation, avec un label (aria-label ou aria-labelledby par exemple) sur chaque bouton, avec un aria-hidden sur la 1ère ligne. Par contre, je ne sais pas si on peut regrouper chaque ligne pour simuler le cas d'un fieldset/legend afin d'éviter de répéter à chaque bouton le nom de la matière et ainsi fonctionner comme avec une succession de groupement tel que celui-ci : <fieldset>     <legend>Matière 1</legend>     <input aria-label="Bon" type="radio" value="Bon" name="M1">     ... </fieldset> Si vous avez des suggestions du meilleur traitement d'un cas tel que celui-ci je suis preneur. Avec tous mes remerciements pour cette lecture. Cordialement, DGFiP Giuseppe ROSA Inspecteur Analyste Atelier SODA - bureau SI-1A Site SODA : http://si1a.intranet.dgfip/soda tel : 01.573.36.997 pièce : 2388   Adoptez l'éco-attitude. N'imprimez ce mail que si c'est vraiment nécessaire _______________________________________________ liste_gta mailing list liste_gta@list.accessiweb.org http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org _______________________________________________ liste_gta mailing list liste_gta@list.accessiweb.org http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org _______________________________________________ liste_gta mailing list liste_gta@list.accessiweb.org http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org

_______________________________________________
liste_gta mailing list
liste_gta@list.accessiweb.org
http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org