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
