Bonjour, Juste pour méditation et information, un oeil rapidement jeté sur quelques méthodes d'application :
* Les critères actuelles du référentiel Renow luxembourgeois (qui joue le double rôle WCAG + Charte Internet de l'Etat) : ** FRM.002 Lorsque les labels sont de longueurs identiques, les champs et leur label respectif sont alignés à gauche ** FRM.003 Lorsque les labels sont de longueurs différentes (écart > à 6 caractères), les champs sont alignés à gauche et les labels placés devant les champs à droite. ** FRM.004 Lorsque les labels sont positionnés au-dessus des champs ils sont alignés à gauche ** FRM.015 Les libellés associés aux champs INPUT RADIO et CHECKBOX sont placés à droite. * Le critère RGAA : ** [FOR]-03 Positionnement correct des étiquettes par rapport aux champs dans les formulaires [...] Si le segment de texte est positionné de façon à pouvoir être associé visuellement à l'élément du champ d'application, le test est validé. * Le critère Opquast (en supplément, ce n'est pas une méthode d'application WCAG, mais la problématique est commune et élargie dans ce cas) : ** 182 Chaque étiquette de formulaire est visuellement rattachée au champ qu'elle décrit [...] Sur le fond, pour WCAG comme plus généralement, le souci est: d'éviter les "blancs" indus en cas d'alignement horizontal du label et du champ, ainsi que les positions imprévisibles de manière criante (ce que résume assez bien Renow AMHA pour qui souhaite entrer à ce point dans le détail). Cordialement, Laurent Denis -- Temesis http://temesis.com Le 29 janvier 2013 11:37, Romain Gervois <[email protected]> a écrit : > Je m'autocorrige. Une étiquette placée sur la ligne précédent le champ est > tout à fait conforme et cadre bien avec G162 (l'exemple est d'ailleurs > présent dans la page de cette technique) : c'est bien avant le champ. > > > Le 29 janvier 2013 11:32, Romain Gervois <[email protected]> a écrit > : > >> Personnellement, je le considère comme conforme (même si ça ne cadre pas >> avec la G162). >> D'ailleurs, sauf erreur de ma part, AccessiWeb n'impose pas les placements >> imposés par la technique WCAG. >> >> Romain >> >> >> Le 29 janvier 2013 11:28, Victor Brito <[email protected]> a écrit >> : >> >>> Quid d'un élément label (dans un cas autre que celui des cases à cocher >>> et boutons radio) disposé en display: block, juste au-dessus du champ >>> associé ? Je pense notamment au cas de l'adaptation aux petits écrans et >>> smartphones. >>> >>> Victor >>> >>> Victor Brito Intégrateur XHTML / CSS – Expert Accessiweb en évaluation >>> >>> 39 rue Charles Laffitte 92200 Neuilly-sur-Seine Tél. : 06 03 15 89 57 >>> >>> SIRET : 789 766 334 00013 >>> >>> Consulter le site Web professionnel de Victor Brito >>> >>> Sur les réseaux sociaux >>> >>> Suivre Victor Brito sur Identi.ca >>> Suivre Victor Brito sur Twitter >>> Suivre Victor Brito sur FriendFeed >>> Suivre Victor Brito sur Diaspora >>> >>> Sans oublier >>> >>> La fiche de membre du Groupe de Travail Accessiweb >>> Halte à la balkanisation du Web ! >>> Un seul Web >>> Profession intégrateur (X)HTML / CSS >>> >>> Le 29/01/13 11:23, Romain Gervois a écrit : >>> >>> Pour compléter ma réponse, la technique WCAG G162 indique que : >>> - pour une checkbox ou un bouton radio, l'étiquette doit se trouver >>> immédiatement après (visuellement) ; >>> - pour les autres éléments, l'étiquette doit se trouver immédiatement >>> avant (visuellement). >>> >>> Romain >>> >>> >>> Le 29 janvier 2013 11:17, CHUZEVILLE Hervé <[email protected]> a >>> écrit : >>>> >>>> Bonjour Victor, >>>> >>>> >>>> >>>> Je mérite sûrement un petit recyclage, mais dans ma formation EAE >>>> initiale, le critère "accolé" s'appliquait aussi à l'affichage, ceci dans >>>> le >>>> but de ne pas gêner les utilisateurs de loupe d'écran notamment… >>>> >>>> >>>> >>>> Hervé CHUZEVILLE, pilote des projets Web et Intranet, expert ISO 40500 >>>> >>>> Agence de l’eau Rhône Méditerranée Corse – Direction des Systèmes >>>> d'Information >>>> >>>> >>>> >>>> De : liste_gta [mailto:[email protected]] De la part >>>> de Victor Brito >>>> Envoyé : mardi 29 janvier 2013 11:11 >>>> À : [email protected] >>>> Objet : Re: [Liste GTA] formulaires : étiquette et champ "accolés" >>>> (critère AW 11.4) >>>> >>>> >>>> >>>> Bonjour, Hervé, bonjour, la liste, >>>> >>>> Par « accolés », j'entends accolés dans le code source, c'est-à-dire >>>> qu'aucun nœud du DOM étranger ne vienne s'intercaler entre l'élément label >>>> et l'élément input / select / textarea associé. Il ne s'agit pas d'accolage >>>> visuel. Autrement dit, si l'on applique à l'élément label la déclaration >>>> CSS >>>> display: block, ce ne sera pas pour un motif d'invalidation du critère >>>> 11.4. >>>> >>>> Victor >>>> >>>> Victor BritoIntégrateur XHTML / CSS – Expert Accessiweb en évaluation >>>> >>>> 39 rue Charles Laffitte 92200 Neuilly-sur-Seine Tél. : 06 03 15 89 57 >>>> >>>> SIRET : 789 766 334 00013 >>>> >>>> Consulter le site Web professionnel de Victor Brito >>>> >>>> Sur les réseaux sociaux >>>> >>>> · Suivre Victor Brito sur Identi.ca >>>> >>>> · Suivre Victor Brito sur Twitter >>>> >>>> · Suivre Victor Brito sur FriendFeed >>>> >>>> · Suivre Victor Brito sur Diaspora >>>> >>>> Sans oublier >>>> >>>> · La fiche de membre du Groupe de Travail Accessiweb >>>> >>>> · Halte à la balkanisation du Web ! >>>> >>>> · Un seul Web >>>> >>>> · Profession intégrateur (X)HTML / CSS >>>> >>>> Le 29/01/13 11:04, CHUZEVILLE Hervé a écrit : >>>> >>>> Bonjour, >>>> >>>> >>>> >>>> Le critère AccessiWeb 11.4 demande que "Dans chaque formulaire, chaque >>>> étiquette de champ et son champ associé [soient] accolés". >>>> >>>> >>>> >>>> Il n'y a pas de précision sur la définition de "accolé" dans le >>>> glossaire actuel. >>>> >>>> >>>> >>>> En revanche, en formation EAE en 2007 et dans le (feu-) Guide AccessiWeb >>>> version 1.3, il était précisé que "L'intitulé des champs de formulaire >>>> (champ de saisie, menu déroulant/liste, boutons radios), doit être adjacent >>>> à ceux-ci. Il est recommandé de mettre au maximum 2 espaces entre >>>> l'intitulé >>>> et le champ." (cf : >>>> http://www.braillenet.org/accessibilite/AccessiWeb_CMS_10/guide_accessiweb/guide-accessiweb-fiche-11-3.html). >>>> >>>> >>>> >>>> J'ai donc demandé à mon développeur d'aligner les textes des étiquettes >>>> à droite contre les champs. >>>> >>>> >>>> >>>> Mais celui-ci me fait remarquer que ce n'est pas forcément esthétique et >>>> peu habituel sur les sites. >>>> >>>> >>>> >>>> De plus sur le site AccessiWeb.org, ce n'est pas mis en œuvre de la >>>> sorte. Exemple : le formulaire de demande d'inscription en bas de la page >>>> http://www.accessiweb.org/index.php/Formations.html. >>>> >>>> >>>> >>>> Je souhaitais donc avoir votre avis sur la mise en œuvre de ce critère >>>> 11.4. >>>> >>>> >>>> >>>> Merci d'avance. >>>> >>>> >>>> >>>> Hervé CHUZEVILLE, pilote des projets Web et Intranet >>>> Agence de l’eau Rhône Méditerranée Corse – Direction des Systèmes >>>> d'Information >>>> >>>> >>>> >>>> >>>> >>>> >>>> _______________________________________________ >>>> >>>> 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 >>> >>> >>> >>> _______________________________________________ >>> 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
