Note : les attributs name de la 3e ligne sont incorrects (mauvais copier coller mais c'était pour l'exemple).
Romain Le 2 novembre 2015 13:33, Romain Gervois <[email protected]> a écrit : > 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 <[email protected]> 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 >> [image: --] >> Olivier Nourry >> [image: http://]about.me/oliviernourry >> <http://about.me/oliviernourry> >> >> >> Le 2 novembre 2015 11:08, ROSA Giuseppe (93) < >> [email protected]> 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 >>> [email protected] >>> http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org >>> >>> >> >> _______________________________________________ >> liste_gta mailing list >> [email protected] >> http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org >> >> >
_______________________________________________ liste_gta mailing list [email protected] http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
