Il existe plusieurs méthodes pour masquer des éléments à l’aide de CSS (Cascading Style Sheets). Voici comment procéder. Je vous propose une liste des façons les plus courantes de masquer du contenu.

Pourquoi masquer des éléments avec css ?

  • Pour cacher les éléments à tous vos utilisateurs
  • Pour cacher des éléments aux utilisateurs de technologies d’assistance uniquement
  • Pour masquer des éléments visuellement redondants déjà décrits dans le DOM
  • Pour masquer des étiquettes d’entrée rendues redondantes …

Si vous souhaitez masquer des éléments, il est important d’employer la méthode la plus appropriée en fonction de vos objectifs. 

Comment cacher des éléments avec du CSS ?

La propriété  display:none

D’un point de vue de l’accessibilité, utiliser la propriété display avec la valeur  none sur un élément entraîne son retrait de l’arbre d’accessibilité. Cet élément ainsi que ses descendants ne seront plus annoncés par les lecteurs d’écrans. Consulter la source

.ma-class { 
            display: none;
}

La propriété visibility: hidden

Utiliser la propriété visibility avec la valeur hidden retire l’objet de l’arbre d’accessibilité. Les éléments ciblés, ainsi que leurs éléments descendants ne seront plus annoncés par les lecteurs d’écran. Consulter la source

.visibility-hidden {
                      visibility: hidden;

}

En résumé : Ces 2 styles masquent complètement les éléments. Cela signifie que ni un utilisateur voyant, ni un utilisateur de lecteur d’écran ne peut y accéder. Il est conseillé d’utiliser ces styles uniquement si vous souhaitez que le contenu soit masqué pour tous les utilisateurs. Les éléments ne sont plus annoncés par les lecteurs d’écrans.

aria-hidden=’true’

aria-hidden=’true’ supprime l’élément de l’arborescence d’accessibilité. Cela peut améliorer l’expérience des utilisateurs de technologies d’assistance en masquant du :

  • contenu purement décoratif, comme des icônes ou des images
  • contenu dupliqué, tel que du texte répété
  • contenu hors écran ou réduit, comme les menus

aria-hidden=’true’  masque le contenu de la technologie d’assistance mais ne cache rien visuellement. Consulter la source

Positionner du contenu hors écran

Avec cette méthode de masquage, les utilisateurs voyants ne peuvent pas voir le contenu à l’écran. Parce qu’il est caché hors de la fenêtre visible du navigateur. Les lecteurs d’écran pourront cependant y avoir accès.

.offscreen {
                         position:absolute;
                         left:-10000px;
                         top:auto;
                         width:1px;
                         height:1px;
                         overflow:hidden
}

.offscreen2 {
                         width:0px;
                         height:0px;
}

Conclusion

Il existe de très bonnes raisons pour masquer des éléments. Vous pouvez le réaliser facilement avec le balisage CSS. En utilisant les méthodes décrites ci-dessus, vous pouvez apporter des modifications sans avoir à recoder l’intégralité de votre site.