Masquer du contenu en CSS

On rencontre souvent des techniques permettant de masquer du contenu grâce à l’injection de classes en javascript ; ces classes ayant des propriétés CSS qui font disparaitre le contenu de l’écran.

Ces techniques sont notamment utilisées pour l’implémentation de diaporamas souvent présents sur des pages d’accueil de site et qui font défiler les dernières actualités ou promotions du moment.

Que disent les référentiels accessibilité ?

Le fait de masquer du contenu de manière dynamique comme pour un diaporama doit respecter un certain nombre de critères.

Dans les WCAG2

La règle concernée est :

2.2.2 Mettre en pause, arrêter, masquer : pour toute information en mouvement, clignotante, défilante ou mise à jour automatiquement, tous les points suivants sont vrais : (Niveau A)
  • Déplacement, clignotement, défilement : pour toute information en mouvement, clignotante ou défilante qui démarre automatiquement, dure plus de cinq secondes et est présentée conjointement avec un autre contenu, il y a un mécanisme à la disposition de l’utilisateur pour la mettre en pause, l’arrêter ou la masquer, à moins que le mouvement, le clignotement ou le défilement s’avère un élément essentiel au bon déroulement de l’activité ;
  • Mise à jour automatique : pour toute information mise à jour automatiquement qui démarre automatiquement et est présentée conjointement avec un autre contenu, il y a un mécanisme à la disposition de l’utilisateur pour la mettre en pause, l’arrêter ou pour en contrôler la fréquence des mises à jour à moins que la mise à jour automatique s’avère essentielle au bon déroulement de l’activité.

Source : Règle 2.2 des Web Content Accessibility Guidelines

Dans le RGAA

Le test concerné est :

5.25 [Multimédia] Absence de code javascript provoquant des mouvements déclenchés automatiquement ne pouvant pas être arrêtés. : (Niveau A)

Source : Test 5.25 du Référentiel Général d’Accessibilité aux Administrations

Dans Accessiweb 2.0

Le critère concerné est :

Critère 13.17 [Bronze] Dans chaque page Web, chaque contenu en mouvement ou clignotant est-il contrôlable par l’utilisateur ?

Source : Critère 13.17 du référentiel Accessiweb

Quelle propriété CSS est la moins nocive pour les utilisateurs de lecteurs d’écran ?

Les utilisateurs de lecteurs d’écran n’ont que faire de ce défilement de contenus. L’important est qu’ils doivent avoir accès à toutes les informations.

On rencontre usuellement 3 propriétés qui servent à masquer du contenu à l’écran :

  • visibility: hidden;
  • display: none;
  • position:absolute; top:-999px; left:-9999px;

En faisant un test avec un lecteur d’écran comme NVDA sur ce fichier HTML où sont présents des éléments ayant les 3 propriétés CSS ci-dessus, on constate que seule la propiété position:absolute; top:-999px; left:-9999px; n’empêche pas la lecture du contenu sur lequel cette propriété est appliquée.

haut de page

Vos commentaires

  • Le 4 novembre 2011 à 08:35, par Sébastien Delorme En réponse à : Masquer du contenu en CSS

    Bonjour Yann,

    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 :)

    En matière d’accessibilité, pour faire simple, il y a effectivement deux manières pour masquer l’information :

    1. Masquer l’information et la rendre illisible des aides techniques (comme les lecteurs d’écran) ;
    2. Masquer l’information mais la rendre lisible des aides techniques.

    Cependant, il n’est pas toujours nécessaire de rendre lisible des aides techniques les éléments masqués.

    Tu parles justement d’un carrousel, il y a alors deux comportements possible avec un lecteur d’écran :

    • 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) ;
    • 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.

    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.

    Dans mes deux exemples précédents il faudra alors :

    • utiliser display: none; ou visibility: hidden;
    • utiliser autre chose.

    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 CSS.

    Par exemple :

    Concernant position:absolute; top:-999px; left:-9999px; je recommande généralement de n’utiliser que left:-9999px; (pas top:-999px;).
    Le problème est qu’en sortant un contenu tabulable (lien, bouton...) en haut de l’écran (top:-999px) 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.

    Et pour terminer, un article assez précis sur le sujet : Clip your hidden content for better accessibility.

    Sébastien.

    PS : il est tout frais ce blog ? Bravo !

  • Le 4 novembre 2011 à 12:37, par Emmanuel En réponse à : Masquer du contenu en CSS

    Et qu’en serait-il pour la propriété opacity:0 ? Comment NVDA la prend t-il en compte ?

  • Le 4 novembre 2011 à 12:48, par Uxlco En réponse à : Masquer du contenu en CSS

    Et que pensez vous de cette solution :

    position:absolute ;
    clip:rect(1px 1px 1px 1px) ;

    C’est une solution qu’utilise Drupal7.

  • Le 4 novembre 2011 à 13:29, par Yann Goupil En réponse à : Masquer du contenu en CSS

    @sebastien : Merci d’avoir laissé ce premier commentaire sur ce nouveau blog.
    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".

    @Emmanuel : la propiété CSS opacity:0 n’est pas utilisée usuellement pour ce genre de masquage. Sinon NVDA lit bien un élément ayant cette propriété.

    @Uxlco : Dans l’article : Clip your hidden content for better accessibility,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é.

    Merci à tous de vos remarques.

Répondre à cet article

modération a priori

Attention, votre message n’apparaîtra qu’après avoir été relu et approuvé.

Qui êtes-vous ?
Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom