Bonjour à tous, Pour revenir aux solutions CSS qui permettent de valider le critère 10.4.3 du RGAA 3, voici mon retour d'expérience et cela reprend ce qui s'est dit plus haut.
- La propriété CSS primordiale à vérifier sur les blocs contenant du texte : c'est la hauteur. Une hauteur, qu'elle soit en pixels ou en EM, elle ne doit pas être spécifiée. Cette habitude date de l'optimisation pour Internet Explorer 6 et elle est bizarrement relayée par des intégrateurs qui n'ont pas connu ce navigateur. Maintenant *min-height* fonctionne partout et doit systématiquement être préférée à *height.* - Sur les colonnes de texte étroites, et si une propriété *overflow: hidden* est appliquée au bloc, gérer les débordements et césures avec* text-overflow*,* word-wrap* et *hyphens *en regardant bien les compatibilités navigateurs. - Si le site est en RWD (responsive web design) et que le colonnage est étroit pour les grands écrans, synchroniser le zoom texte et les media queries en spécifiant ces dernières en EM. Cette technique a été décrite ici en 2012 : http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ Elle est toujours d'actualité. Attention à ne pas jouer sur les tailles de textes dans les media queries en EM. Par exemple si un coefficient de réduction de 0.75em est appliqué sur les textes en mobile, alors on fausse le zoom quand cette media query est appliquée ! La solution : sortir les règles qui modifient les tailles de textes des media queries en largeur EM et les mettre à part dans une media query en largeur pixels. Donc n'y allez pas les yeux fermés ! En bref, pour ma part, ce qui compte le plus c'est les hauteurs de blocs verrouillées, c'est ce que je corrige le plus souvent quand j'accompagne des intégrateurs. Concernant la synchro de la mise en page RWD et du zoom texte, cela offre plus de lisibilité lorsqu'on a par exemple 6 colonnes de liens sur la version ordinateur et qu'on passe progressivement à une seule colonne en mobile, cette mise en page mobile rend le texte beaucoup plus lisible en zoom 200% et évite de multiples césures. Bonne journée Carsten Le 8 juillet 2015 19:46, Anthony Ladeuil <[email protected]> a écrit : > Salut Nicolas, > > Pour l'avoir implémenté de nombreuses fois, les dimensions de blocs en em > ne posent pas de problème et je suis un peu en désaccord sur la similitude > entre zoom de page et un zoom texte avec cette méthode. Le scroll > n'intervient pas obligatoirement, sauf avec un zoom page :). Comme dit dans > le fil, le scroll, bien que pas très joyeux effectivement, n'invalide pas > le critère. > De plus, Firefox interprète le grossissement en le couplant avec les media > queries, les break points étant exécutés. Par contre, html5 nous autorise > mieux que le % avec les propriétés calc() qui sont ultra puissantes pour le > coup couplées au x media quieries :). Je reconnais que les em demandent un > peu de pratique, mais on s'y fait. Il faut juste discuter avec les > designers et leurs expliquer les contraintes en amont. Et là... :) > Il n'en demeure pas moins que lorsque le contenu déborde un peu partout > avec des tailles fixes, la lisibilité est tout de même réduite ;-) > > Anthony > > Le 8 juil. 2015 à 17:58, Chardon Nicolas <[email protected]> a > écrit : > > Bonjour à tous, > > Utiliser des ems pour définir les largeurs de blocs est une solution qui > n’est pas parfaite : en effet, pour l’utilisateur, le zoom texte va > ressembler au zoom page, les blocs vont s’élargir et induire une barre de > scroll horizontale … Les media queries en em sont la meilleure solution, > mais elles imposent un site vraiment responsive, voire des largeurs en > pourcentage. Avez-vous des retours d’expérience sur les media queries en em > et ce problème ? > > Cordialement, > > *NICOLAS CHARDON* > *ARCHITECTE IHM* > *VSC Technologies* > > 2 place de la Défense – CNIT 1 – BP 440 – 92053 Paris La Défense Cedex > > TÉL. : +33 (0)1 58 13 73 22 (73 22) - [email protected] > > STANDARD : +33 (0)1 74 54 13 00 > > Voyages-sncf.com <http://voyages-sncf.com/>, 23 sites couvrant plus de 30 > pays. > *<image001.png>* > *<image002.jpg>* <http://mobile.voyages-sncf.com/> > Téléchargez notre application mobile <http://mobile.voyages-sncf.com/> > *<image003.jpg>* <https://twitter.com/Voyagessncf_com> > Suivez-nous sur Twitter <https://twitter.com/Voyagessncf_com> > *<image004.png>* <https://fr-fr.facebook.com/VoyagesSncf.com> > Rejoignez-nous sur Facebook <https://fr-fr.facebook.com/VoyagesSncf.com> > *<image005.png>* <https://plus.google.com/+voyagessncf/posts> > Rejoignez-nous sur Google + <https://plus.google.com/+voyagessncf/posts> > > > > > *De :* liste_gta [mailto:[email protected] > <[email protected]>] *De la part de* Anthony Ladeuil > *Envoyé :* mercredi 8 juillet 2015 17:36 > *À :* [email protected] > *Objet :* Re: [Liste GTA] Méthode d'évaluation de l'augmentation de la > taille des caractères jusqu'à 200% > > Bonjour à tous également > > Pour rebondir sur ce que précise Carsten, je pousserais volontiers le > bouchon encore plus loin : est ce qu'on ne peut pas considérer que > l'utilisation systématique de nos fameux et redoutés EM ne serait pas une > solution ? En effet, le problème du zoom texte réside dans le fait que si > les containers HTML sont spécifiés en pixels, comme bien souvent, le texte > pousse toute la structure et/ou se superpose. Au delà de la perte > d'information, la lisibilité est-elle un critère à prendre en compte pour > valider ou invalider ? > Exemple en pj > > Anthony > > > Le 7 juil. 2015 à 17:28, Carsten Meyer <[email protected]> a écrit : > > > Bonjour à tous, > Pour le nombre de Ctrl +, comme le précise Steven Mouret c'est bien 6 fois > Ctrl + pour obtenir 200% sous Firefox. > Pour remettre à 100%, utilisez Ctrl 0. > Concernant le débat sur le zoom texte seulement vs zoom graphique, tout à > fait d'accord avec vous. > Et pour poursuivre avec le responsive web design, il est souvent > intéressant d'utiliser des media queries en EM vs pixels pour mieux gérer > les longueurs de lignes et éviter quelques chevauchements ! > > > Bonne soirée > Carsten MEYER > > > Le 7 juillet 2015 17:16, <[email protected]> a écrit : > > salut à tous, > > http://www.denisboudreau.org/blog/2013/07/why-browser-zoom-testing-sucks-for-accessibility/ > https://alastairc.ac/2014/03/csun-browser-zoom-sucks-for-low-vision-users/ > voilà deux articles toujours d'actualité qui donne de bonnes raisons de ne > zoomer que le texte et non un zoom de page. > Donc, en effet, en particulier, la scrollbar horizontale est un enfer, > donc Ctrl+ 4 fois avec "texte seulement" et vérifier que l'on ne pert pas > d'info ! > a+ > ps : en plus, si vous faites du RWD (et m$ême si non) penser à word-wrap : > break-word; et hyphens : auto; > > ----- Mail original ----- > De: "Cyril FABBY" <[email protected]> > À: "liste gta" <[email protected]> > Envoyé: Mardi 7 Juillet 2015 16:23:14 > Objet: Re: [Liste GTA] Méthode d'évaluation de l'augmentation de la > taille des caractères jusqu'à 200% > > > > Bonjour, > > > Le zoom graphique (homothétique), fait rapidement apparaître la scrollbar > horizontale. > Le zoom "texte seulement" me semble être plus pertinent à l'usage (d'où la > règle afin que ca reste utilisable). > > > Cordialement, > > > > > Cyril FABBY > > > Ingénieur d'étude, Expert Accessiweb 2.0 en Evaluation de page, Ergonomie, > Web Design > > > > Key Consulting > > 41 rue Emile Duclaux > 92150 Suresnes > > Tél: 01 41 38 90 40 > Fax: 01 41 38 90 41 > P Avant d'imprimer cet email, réfléchissez à l'impact sur l'environnement, > merci > > Le 7 juillet 2015 16:13, Cédric Escarment < [email protected] > a > écrit : > > > > > > > > > Bonjour, > Il me semble que les navigateurs ont d'abord implémenté le zoom texte, > puis ensuite le zoom de la page. D’où l'existence de ce critère dans les > WCAG. > Je pense qu'il est moins pertinent aujourd'hui qu'il y a quelques années. > A Orange, les utilisateurs malvoyants utilisent le logiciel zoomtext, qui > agrandit l'écran. Sur une page web c'est donc homothétique pour reprendre > votre terme. > Cordialement, > Cédric Escarment. > > > > > > Le 7 juillet 2015 15:43, Frédéric Bernier-Malcoiffe < > [email protected] > a écrit : > > > > > > > Merci pour vos réponses. > > > > Ok, tester en mode texte permet de simuler l’utilisation d’une feuille de > style coté client qui agrandirait les caractères. > > S’agissant des outils de zoom, je pensais qu’il agissait de manière > homothétique sur tout le contenu (images comprises), comme une loupe. Quels > sont les outils les plus utilisés ? > > > > > > > > De : liste_gta [mailto: [email protected] ] De la > part de David Casson > Envoyé : mardi 7 juillet 2015 15:29 > À : [email protected] > Objet : Re: [Liste GTA] Méthode d'évaluation de l'augmentation de la > taille des caractères jusqu'à 200% > > > > > > Salut la liste, > > étant déficient visuel et ne connaissant pas tout le temps le niveau de > zoom sur lequel je suis pour auditer ce critère, je me sers de cet addons > pour firefox : zoom page. Il indique le niveau de zoom en cours. > > https://addons.mozilla.org/fr/firefox/addon/zoom-page/ > > bonne journée > > David > > > Le 07/07/2015 15:21, Steven Mouret a écrit : > > > > > > > > > Bonjour Frédéric et la liste, > > Oui c'est bien cela, un zoom texte. > > Sous Firefox il me semble que 200% correspond à 6 fois un Ctrl + > > Cela permet aux personnes ayant une déficience visuelle d'agrandir le > texte. > > > Cela veut dire qu'une feuille de style coté client ou un outil de zoom > peut venir agrandir le texte aussi, le site sera toujours fonctionnel. > > > > > > > > > > -- > Steven Mouret > > > > > Le 7 juillet 2015 14:55, Frédéric Bernier-Malcoiffe < > [email protected] > a écrit : > > > > > > Bonjour, > > > > j’ai un doute sur la méthode d’évaluation du test RGAA « 10.4.3 : Dans > chaque page Web, l'augmentation de la taille des caractères jusqu'à 200%, > au moins, ne doit pas provoquer de perte d'information. Cette règle > est-elle respectée ? ». > > Dans mes souvenirs, il s’agit d’augmenter la taille des caractères en mode > « zoom texte seulement ». > > Est-ce correct ? > > Si oui, quel est l’objectif ? A quel type d’utilisation cela correspond-il > ? > > > > Merci de votre collaboration, > > Frédéric Bernier-Malcoiffe > > > > > _______________________________________________ > 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 > > > > -- David Casson {Référent accessibilité numérique} - Université d’Orléans > - ————————————————————————————————————————————————————————— Services > ————————————————————————————————————————————————————————— Passerelle > Handicap && DSI - > ————————————————————————————————————————————————————————— Contact > ————————————————————————————————————————————————————————— courriel : > [email protected] tel pro : 02 38 41 72 07 LinkedIn : > http://fr.linkedin.com/in/davidcasson Mon site mêlant programmation et > accessibilité numérique : > http://dev-and-a11y.com————————————————————————————————————————————————————————— > Pour toute question relative à l'accessibilité numérique > ————————————————————————————————————————————————————————— > [email protected] > _______________________________________________ > 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 > > > > _______________________________________________ > 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
