Masquer du contenu en CSS - commentaires Masquer du contenu en CSS 2011-11-04T12:29:39Z http://standardetaccessible.com/Masquer-du-contenu-en-CSS#comment4 2011-11-04T12:29:39Z <p>@sebastien : Merci d'avoir laissé ce premier commentaire sur ce nouveau blog.<br class="autobr" /> En effet, l'article mériterait soit de se baser sur un cas d'utilisation vraiment précis, soit de pousser un peu plus loin et apporter des compléments comme tu as pu faire. Ca me servira dans ma future "ligne éditoriale".</p> <p>@Emmanuel : la propiété CSS <code class="spip_code" dir="ltr">opacity:0</code> n'est pas utilisée usuellement pour ce genre de masquage. Sinon NVDA lit bien un élément ayant cette propriété.</p> <p>@Uxlco : Dans l'article : <a href="http://yaccessibilityblog.com/library/css-clip-hidden-content.html" lang="en" hreflang="en" rel='nofollow'>Clip your hidden content for better accessibility</a>,mentionné par Sébastien (que je ne connaissais pas), la technique dont tu parles est effectivement citée mais complétée d'autres propirétés pour une meilleure accessibilité.</p> <p>Merci à tous de vos remarques.</p> Masquer du contenu en CSS 2011-11-04T11:48:59Z http://standardetaccessible.com/Masquer-du-contenu-en-CSS#comment3 2011-11-04T11:48:59Z <p>Et que pensez vous de cette solution :</p> <p>position:absolute ;<br class="autobr" /> clip:rect(1px 1px 1px 1px) ;</p> <p>C'est une solution qu'utilise Drupal7.</p> Masquer du contenu en CSS 2011-11-04T11:37:11Z http://standardetaccessible.com/Masquer-du-contenu-en-CSS#comment2 2011-11-04T11:37:11Z <p>Et qu'en serait-il pour la propriété opacity:0 ? Comment NVDA la prend t-il en compte ?</p> Masquer du contenu en CSS 2011-11-04T07:35:47Z http://standardetaccessible.com/Masquer-du-contenu-en-CSS#comment1 2011-11-04T07:35:47Z <p>Bonjour Yann,</p> <p>Je ne suis pas tout à fait d'accord avec une bonne partie de l'article, ou disons plutôt que j'aurai préféré plus de précisions :)</p> <p>En matière d'accessibilité, pour faire simple, il y a effectivement deux manières pour masquer l'information :</p> <ol><li>Masquer l'information et la rendre illisible des aides techniques (comme les lecteurs d'écran) ;</li><li>Masquer l'information mais la rendre lisible des aides techniques.</li></ol> <p>Cependant, il n'est pas toujours nécessaire de rendre lisible des aides techniques les éléments masqués.</p> <p>Tu parles justement d'un carrousel, il y a alors deux comportements possible avec un lecteur d'écran :</p> <ul type="A"><li>Le lecteur d'écran ne lit que le diaporama visible, et l'utilisateur doit se servir des boutons suivant/précédent pour lire les autres diaporamas (à chaque fois celui qui sera visible) ;</li><li>Le lecteur d'écran peut être capable de tout lire, même les diaporamas masqués, et dans ce cas les boutons suivant/précédent seront inutiles.</li></ul> <p>En fonction des situations (quantité et contenu des diaporamas) il pourra être plus pertinent de garder le même comportement pour tous (ne lire les éléments masqués que lorsqu'ils sont affichés) ou bien de l'adapter comme tu le précises.</p> <p>Dans mes deux exemples précédents il faudra alors :</p> <ul type="A"><li>utiliser <code class="spip_code" dir="ltr">display: none;</code> ou <code class="spip_code" dir="ltr">visibility: hidden;</code></li><li>utiliser autre chose.</li></ul> <p>Les contenus cachés se retrouvent dans plusieurs endroits, bien au-delà les diaporamas. Il aurait été intéressant de préciser les contenus des référentiels qui abordent le sujet des contenus cachés en <abbr>CSS</abbr>.</p> <p>Par exemple :</p> <ul><li><abbr>WCAG</abbr> 2.0 -> technique <abbr>CSS</abbr> <a href="http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/C7.html" lang="en" hreflang="en" rel='nofollow'><em>C7 : Using CSS to hide a portion of the link text</em></a>.</li><li>AccessiWeb 2.1 -> <a href="http://www.braillenet.org/accessibilite/referentiel-aw21/liste-deploye.php#crit-10-13" rel='nofollow'><em>Critère 10.13 [Bronze] Pour chaque page Web, les textes cachés sont-t-ils correctement restitués par les technologies d'assistance ?</em></a></li></ul> <p>Concernant <code class="spip_code" dir="ltr">position:absolute; top:-999px; left:-9999px;</code> je recommande généralement de n'utiliser que <code class="spip_code" dir="ltr">left:-9999px;</code> (pas <code class="spip_code" dir="ltr">top:-999px;</code>). <br class="autobr" /> Le problème est qu'en sortant un contenu tabulable (lien, bouton...) en haut de l'écran (<code class="spip_code" dir="ltr">top:-999px</code>) mais aussi en bas ou à droite, on risque fortement de provoquer des mouvements de la page pour les utilisateurs qui naviguent au clavier et voient l'écran.</p> <p>Et pour terminer, un article assez précis sur le sujet : <a href="http://yaccessibilityblog.com/library/css-clip-hidden-content.html" lang="en" hreflang="en" rel='nofollow'><em>Clip your hidden content for better accessibility</em></a>.</p> <p>Sébastien.</p> <p>PS : il est tout frais ce blog ? Bravo !</p>