Méthodes de masquage des pages Web

Les développeurs Web doivent masquer des éléments de page Web pour diverses raisons. Par exemple, il existe un bouton qui doit être visible lors de la visualisation du site sur un appareil mobile et masqué - lors de l'utilisation d'un navigateur de bureau. Ou, par exemple, il existe un certain élément de navigation qui doit être masqué dans le navigateur mobile et affiché sur le bureau. Les éléments invisibles sur la page peuvent être dans différents états:

• Un élément est complètement invisible et, de plus, supprimé du flux de documents.
• L'élément ne peut pas être vu à travers les yeux, mais il est présent dans le document et est disponible pour les technologies d'assistance telles que les lecteurs d'écran.
• L'élément est visible mais caché aux lecteurs d'écran.

L'article, dont nous publions la traduction aujourd'hui, est consacré à l'analyse des méthodes de masquage d'éléments de pages Web en HTML et CSS. Ici, des questions telles que l'accessibilité du contenu, l'animation et les scénarios d'utilisation des technologies pour masquer les données sur les pages seront discutées.

Attribut caché HTML5

Hidden est un attribut HTML logique qui masque les éléments auxquels il est affecté. Lorsque le navigateur charge la page, il n'affiche pas les éléments avec l'attribut hidden , sauf lorsque la visibilité des éléments est activée manuellement à l'aide de CSS. L'effet de cet attribut est similaire à l'application de la règle display: none à un élément CSS.

Prenons l'exemple suivant:

 <h1>Spring is on the way</h1> <img hidden src="landscape.jpg" alt=""> <p><!-- Description content --></p> 

Il y a un balisage qui définit le titre, l'image et la description. L'image ne doit être affichée que si la largeur de la fenêtre dépasse 400px . J'ai ajouté l'attribut hidden à l'élément <img> .

En CSS, j'ai utilisé l'attribut hidden pour afficher l'élément uniquement si la zone d'affichage de la page était de la bonne taille.


Extrait de page Web

Voici le code CSS utilisé ici:

 img[hidden] {  display: none; } @media (min-width: 400px) {  img[hidden] {    display: block;  } } 

→ Voici un exemple de cette page sur CodePen

Ici, vous pouvez avoir une question sur pourquoi ne pas simplement utiliser l' display: none . Bonne question. Lorsqu'un sélecteur d'image est appelé via son attribut hidden , nous pouvons être sûrs que même si le code CSS pour une raison quelconque n'a pas été chargé, l'élément sera masqué.

▍Attribut caché et accessibilité du contenu

Si nous considérons l'attribut hidden du point de vue de l'accessibilité du contenu, il s'avère que cet attribut masque complètement l'élément. Par conséquent, les lecteurs d'écran ne peuvent pas fonctionner avec cet élément. N'utilisez pas cet attribut dans les cas où certains éléments de page doivent être rendus invisibles aux humains, mais pas aux lecteurs d'écran.

Propriété d'affichage CSS

Chaque élément d'une page Web a une certaine valeur de propriété d' display qui lui est affectée par défaut. Il peut s'agir d'un inline-block , d'un block , d'une table , etc. Afin de masquer un élément à l'aide de la propriété display , nous pouvons utiliser la construction display: none . Si un élément est masqué à l'aide de cette construction, tous ses descendants seront masqués avec lui.

Imaginez que nous voulons masquer l'image de l'exemple précédent et avons décidé d'utiliser le code CSS suivant:

 img {  display: none; } @media (min-width: 400px) {  img {    display: block;  } } 

Avec cette approche, l'image sera complètement exclue du document (du soi-disant flux de documents - «flux de documents»), elle sera inaccessible aux lecteurs d'écran. Vous n'êtes peut-être pas très au courant du concept de «flux de documents». Afin de gérer ce concept, jetez un œil à la figure suivante.


Le livre bleu a été retiré de la pile.

Le «flux de documents» est comparé ici à une pile de livres. Si la propriété display: none est appliquée au livre bleu, cela signifie qu'elle a simplement été supprimée de la pile. Dans le même temps, l'espace qu'occupait ce livre sera occupé par d'autres livres. La même chose se produit lors du masquage d'éléments HTML. La place qu'un élément caché occuperait est occupée par d'autres éléments, ce qui affecte la disposition des éléments dans le document. Dans notre exemple, cela a affecté la position des livres dans la pile.

Voici une version animée d'un exemple avec des livres montrant ce qui se passe si l'un d'eux est retiré de la pile.


Si vous supprimez un livre de la pile, la position des autres livres changera

▍ Les ressources cachées par CSS sont-elles chargées?

Répondez brièvement à cette question - alors oui, le chargement de ces ressources est effectué. Par exemple, si l'élément <img> est masqué par CSS et que nous montrons cet élément à un moment donné de la page, l'image sera alors déjà chargée. La présence sur la page d'une image, même masquée par CSS, entraînera l'exécution d'une requête HTTP pour la télécharger.

Ici vous pouvez trouver une démo de travail avec une image cachée par CSS. Si vous explorez cet exemple, en ouvrant les outils de développement Chrome et en consultant l'onglet Network , vous pouvez y voir la demande correspondante.


Examen d'une page contenant une image latente

▍ Style d'élément

Il convient de mentionner qu'il existe des éléments HTML dont la propriété d' display est définie sur none par défaut. Par exemple, il s'agit d'un élément <style> qui peut être ajouté au corps d'une page HTML. Sa propriété d' display peut être changée en block et rendue visible.
Voici le code HTML du corps de page:

 <body>    <style>       .title { color: #000; }    </style> </body> 

Voici le CSS avec lequel nous rendons l'élément style visible:

 style {    display: block; } 

Une telle technique peut être utile si vous souhaitez que le bloc de style soit visible et, en outre, modifiable. Pour rendre un tel bloc modifiable, vous pouvez ajouter l'attribut contenteditable=true à la balise de style .

Voici à quoi ça ressemble.


Bloc de style modifiable visible

→ Voici une démo de cet exemple

▍CSS propriété d'affichage et accessibilité du contenu

Lors de l'utilisation de la propriété display: none , l'élément devient invisible et, de plus, inaccessible aux lecteurs d'écran.

Propriété d'opacité CSS

En définissant la propriété CSS d' opacity sur 0 , vous pouvez masquer l'élément et tous les éléments imbriqués à l'intérieur. Cette propriété n'est pas héritée. Cependant, cette propriété masque uniquement les éléments de celui qui regarde la page, et non des lecteurs d'écran. Ici, il convient de dire qu'un élément dont la valeur d' opacity est différente de 1 crée un nouveau contexte de superposition .

Voici un exemple.


Le livre bleu est invisible, mais la place qu'il occupe est toujours réservée

La figure précédente montre que le livre bleu devient invisible pour l'observateur. Mais la place qu'elle occupait est réservée. L'ordre des autres livres de la pile n'a pas changé. Comparez cela à l'utilisation de l' display: none conduit à cela.

En CSS, l'utilisation de la propriété opacity ressemble à ceci:

 img {    opacity: 0; } 

Si nous revenons à notre premier exemple et supposons que nous voulons masquer l'image à l'aide de la propriété d' opacity , le résultat sera comme indiqué ci-dessous.


L'image est masquée à l'aide de la propriété CSS d'opacité

Comme vous pouvez le voir, l'image est toujours présente sur la page, mais sa place n'est occupée par rien. Il n'est caché qu'à l'observateur, mais ne disparaît pas de la page. Après la publication du matériel, ils m'ont dit que les pointer-events: none | auto propriété pointer-events: none | auto pointer-events: none | auto peut être utilisé pour désactiver les événements de souris sur les éléments cachés à l'aide de la propriété opacity: 0 . C'est une idée importante, car l'utilisateur peut être confus en interagissant avec un élément caché (en cliquant dessus, en le survolant avec la souris, en sélectionnant du texte).

→ Voici une démonstration de l'utilisation de la propriété opacity

▍ Propriété d'opacité CSS et accessibilité du contenu

Un élément caché avec l' opacity: 0 reste accessible aux lecteurs d'écran. Un tel élément peut gagner en concentration lorsque vous travaillez avec la page à l'aide du clavier.

Propriété de visibilité CSS

En utilisant la propriété visibility: hidden , vous pouvez afficher ou masquer des éléments, en procédant de la même manière que nous l'avons fait avec l' opacity: 0 . Cela n'affecte pas le flux du document.


Lors de l'utilisation de la visibilité: caché, le livre disparaît, mais sa place reste inoccupée

Veuillez noter que le livre bleu a disparu, mais cela n'a pas affecté la disposition des autres livres de la pile.

Il convient de noter que lorsque visibility: hidden utilisé pour l'élément parent, tous ses descendants sont masqués, mais si la propriété visibility: visible est affectée à l'un des descendants, ce descendant sera visible.


La pile de livres est cachée, mais le livre bleu est rendu visible.

Revenons à notre exemple habituel avec un en-tête, une image et une description. Nous réécrivons son code HTML comme ceci:

 <article>  <h1>Spring is on the way</h1>  <img align="center" src="landscape.jpg" alt="">  <p><!-- Desc --></p> </article> 

Nous le stylisons avec le code CSS suivant:

 article {    visibility: hidden; } img {    visibility: visible; } 

Après cela, regardons comment une page à laquelle une stylisation similaire n'a pas été appliquée différera de la page stylisée.


L'élément imbriqué est visible

Ici, la propriété CSS visibility: hidden est affectée à l'élément <article> . Et si vous ajoutez la propriété visibility: visible à l'élément <img> , l'image sera visible. Encore une fois, le point ici est que la propriété en question est appliquée aux descendants de l'élément, mais elle peut être remplacée dans l'élément descendant.

→ Voici une démonstration de l'utilisation de la propriété visibility

VisibilityVisibilité des propriétés CSS et accessibilité du contenu

Lorsque vous utilisez la propriété visibility: hidden , l'élément est masqué. Il est également supprimé de l'arborescence d'accessibilité et, par conséquent, les lecteurs d'écran ne le remarquent pas.

Masquage des éléments et positionnement

Pour masquer un élément en agissant sur sa position sur la page, vous devez le placer hors de la zone visible de la page et définir ses dimensions (largeur et hauteur) à 0 . À titre d'exemple d'utilisation d'une technique similaire pour masquer des éléments, vous pouvez citer un lien qui vous permet d'accéder rapidement au contenu principal de la page. Considérez l'image suivante.


Lien caché en dehors de la visibilité de la page

Afin de positionner un élément en dehors de la zone de visibilité de la page, vous pouvez utiliser le code CSS suivant:

 .skip-link {    position: absolute;    top: -100%; } 

Une valeur top: -100% supprimera un élément de la fenêtre à 100% de sa hauteur. En conséquence, l'élément sera complètement invisible. Mais s'il reçoit le focus après que l'utilisateur l'a atteint à l'aide des touches du clavier, cet élément peut être affiché:

 .skip-link:focus {    position: absolute;    top: 0; } 

→ Voici une démonstration de cette méthode de masquage d'éléments

▍CSS position position et accessibilité du contenu

Un élément affiché en dehors de la zone de visualisation est disponible pour les lecteurs d'écran; vous pouvez également y accéder à l'aide du clavier. Elle ne s'avère invisible que lors d'un travail normal avec la page.

Propriété CSS clip-path

Si la propriété CSS clip-path est appliquée à un élément, elle vous permet de décrire une région qui détermine quelle partie de l'élément doit être masquée et laquelle doit être visible.


Zone de recadrage d'image

Dans l'exemple précédent, la propriété clip-path est appliquée au fait que le côté gauche de l'image est assombri. Lorsque cette propriété est appliquée, les fragments sombres de l'image disparaissent.

Afin de regarder cette propriété en action, nous utilisons l'outil clippy . Le travail commence par les valeurs de clip-path suivantes spécifiées en CSS et décrivant le masque comme un polygone:

 img {    clip-path: polygon(0 0, 0 0, 0 0, 0 0); } 

Expériences avec la propriété clip-path, la zone de recadrage est spécifiée comme un polygone

Si toutes les propriétés du polygon sont définies sur 0 , l'image sera simplement masquée. La zone de recadrage de l'image peut être définie non seulement sous la forme d'un polygone, mais également sous la forme d'un cercle:

 img {    clip-path: circle(0 at 50% 50%); } 

Voici à quoi ça ressemble.


Expériences avec la propriété clip-path, la zone de recadrage est définie comme un cercle

Vous pouvez expérimenter avec cette propriété ici.

▍ Propriété de chemin de clip CSS et accessibilité du contenu

Un élément auquel la propriété clip-path est appliquée est uniquement masqué visuellement. Il est accessible via le clavier, il est disponible pour les lecteurs d'écran.

Manipulations avec la couleur du texte et la taille de la police

Bien que le masquage du texte en modifiant sa couleur ou sa taille de police ne soit pas aussi répandu que les techniques de masquage d'éléments précédemment décrites, cela peut dans certains cas s'avérer utile.

▍Définir la transparence des couleurs

Si vous utilisez une couleur transparente pour le texte, ce texte sera invisible. Cela peut être utile lors de la création de boutons utilisant uniquement des icônes.

▍ Ajustez la taille de la police

De plus, si vous définissez la taille de la police sur 0 , cela masquera également le texte.

Prenons l'exemple suivant. Il y a un bouton ici, dont la structure est définie par le code HTML suivant:

 <button>  <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="false" focusable="false">    <!-- Path data -->  </svg>  <span>Like</span> </button> 

Notre objectif est de masquer le texte de ce bouton, mais en même temps de le laisser disponible pour les technologies d'assistance. Pour ce faire, j'ai utilisé le code CSS suivant:

 .button span {    color: transparent;    font-size: 0; } 

Maintenant, le texte est masqué. Il convient de noter que cette technique fonctionnera sans changer la couleur du texte. Mais moi, afin de distinguer différentes options pour masquer le texte, j'ai changé la couleur ici.


1. Le contenu du bouton est centré. 2. Le texte se voit attribuer une couleur transparente. 3. La taille de la police est définie sur 0

→ Voici une démo pour cet exemple

Attribut HTML aria-hidden

Lorsqu'un attribut aria-hidden est ajouté à un élément, cet élément est supprimé de l'arborescence d'accessibilité. Cela permet aux utilisateurs utilisant des lecteurs d'écran d'utiliser la page plus facilement. Notez qu'un élément avec cet attribut est visible sur la page. Il n'est invisible que pour les technologies d'assistance.

 <button>    Menu    <svg aria-hidden="true"><!-- --></svg> </button> 

Dans cet exemple, il y a un bouton Menu avec une icône et une étiquette. L'attribut aria-hidden="true" vous permet de masquer ce bouton aux lecteurs d'écran.

Cet attribut, conformément aux matériaux MDN, est utilisé dans les scénarios suivants:

• Masquer des éléments décoratifs comme des icônes et des images.
• Masquez le texte en double.
• Masquez les éléments réduits ou les éléments hors de l'écran.

▍Aria-caché et accessibilité du contenu

Cet attribut a été créé spécifiquement pour masquer le contenu des technologies d'assistance. Mais les éléments sont visibles sur la page, vous pouvez interagir avec eux à l'aide du clavier.

Animation et interactivité

Avant d'entrer dans les exemples, je voudrais m'attarder sur les façons précédemment discutées de cacher les éléments. Nous le ferons pour les comparer et choisir ce qui répondra à nos besoins. Le tableau suivant, qui se trouve ici , est basé sur ce merveilleux article.

Si vous souhaitez animer un élément masqué, par exemple une barre de navigation mobile, cet élément doit être créé en tenant compte de sa disponibilité. Ci-dessous, nous examinerons des exemples infructueux et réussis de travail avec des éléments en termes d'accessibilité. Cela nous permettra d'éviter les erreurs qui compliquent le travail avec les sites pour les utilisateurs utilisant des technologies d'assistance.

▍ Animation de menu: mauvaise approche

Nous avons un menu qui, une fois ouvert, devrait sortir de l'écran. La façon la plus simple de le faire est d'utiliser le CSS suivant:

 ul {    opacity: 0;    transform: translateX(100%);    transition: 0.3s ease-out; } ul.active {    opacity: 1;    transform: translateX(0); } 

Grâce à ce code, le menu se développera et se .active fonction de la classe .active , qui sera ajoutée à l'aide du code JavaScript suivant:

 menuToggle.addEventListener('click', function(e){  e.preventDefault();  navMenu.classList.toggle('active'); }); 

Voici à quoi ressemble un tel menu.


Quitter le menu en action

Il peut sembler que nous avons obtenu de bons résultats en créant ce menu, mais ici une grosse erreur a été commise. L'utilisation de la propriété opacity: 0 ne supprimera pas les éléments de navigation de l'arborescence d'accessibilité. Même si le menu de la page n'est pas visible, il peut être atteint à l'aide du clavier, les lecteurs d'écran peuvent fonctionner avec. Afin de ne pas dérouter les utilisateurs utilisant de tels outils, le menu doit également être masqué de ces outils.

Voici l'arborescence d'accessibilité de la page en question, créée à l'aide des outils de l'onglet Accessibility l'outil Chrome.


Arbre d'accessibilité d'un menu caché mal conçu

L'arbre d'accessibilité est, en un mot, une liste de tout ce que les utilisateurs qui utilisent des lecteurs d'écran peuvent accéder. Dans notre cas, ils ont accès à tous les éléments de menu invisibles à l'écran. Ici, vous pouvez trouver deux problèmes que nous devons résoudre:

1. Il est nécessaire de s'assurer que les éléments de menu masqués ne peuvent pas être atteints à l'aide du clavier.
2. Il est nécessaire que les lecteurs d'écran ne voient pas le menu caché et ne lisent pas le contenu correspondant.

L'image suivante montre comment la page est visible pour VoiceOver sous Mac OS. Il est facile de remarquer que cet outil voit parfaitement le menu même si ce menu n'est pas à l'écran.


Le lecteur d'écran voit ce qu'il ne devrait pas voir

→ Voici une version de travail de cet exemple

Corrigeons les erreurs ci-dessus.

▍ Animation de menu: corrections de bugs

Afin d'améliorer le menu et de corriger les erreurs, vous devez utiliser la propriété CSS visibility: hidden . Cela vous permettra de masquer le menu de la page et d'empêcher les moyens de lecture à l'écran de fonctionner avec. Voici le code CSS pour résoudre le problème:

 ul {    visibility: hidden;    opacity: 0;    transform: translateX(100%);    transition: 0.3s ease-out; } ul.active {    visibility: visible;    opacity: 1;    transform: translateX(0); } 

Après avoir appliqué ce code, le menu minimisé disparaîtra de l'écran et du "champ de vision" des technologies d'assistance. Explorez à nouveau la page avec VoiceOver.


Le lecteur d'écran ne voit rien de plus

→ Voici un projet illustrant un exemple

Éléments de case à cocher personnalisés

Élément de case à cocher

Les drapeaux standard, <input> éléments <input> de type checkbox , sont difficiles à configurer. Si nous devons les configurer, cela signifie que nous devrons créer notre propre implémentation d'un tel élément. Jetez un œil à son code HTML de base:

 <p class="c-checkbox">  <input class="sr-only" type="checkbox" name="" id="c1">  <label class="c-checkbox__label" for="c1">Custom checkbox</label> </p> 

Pour configurer la case à cocher, vous devez pouvoir masquer l'élément en tenant compte des besoins des technologies d'assistance. Pour ce faire, vous devez utiliser la propriété position , ainsi que d'autres propriétés. Voici une classe CSS qui peut être appelée sr-only ou visually-hidden , qui masque l'élément uniquement visuellement, mais la laisse accessible pour les lecteurs d'écran et la navigation au clavier.

 .sr-only {  border: 0;  clip: rect(0 0 0 0);  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);  height: 1px;  margin: -1px;  overflow: hidden;  padding: 0;  position: absolute;  width: 1px;  white-space: nowrap; } 

Grâce à l'utilisation de cette classe, l'élément checkbox de notre propre conception ne perd pas son accessibilité. Voici une histoire plus détaillée sur un tel élément. Et voici une démonstration du travail avec un élément similaire.

Masquer le contenu des lecteurs d'écran

▍Cacher quelques personnages

,

, , . , , , :

 Hiding On The Web grinning face with open mouth 

, . , , , . , , , - . , aria-hidden . , <span> aria-hidden="true" .

 <h1>Hiding On The Web <span aria-hidden="true"></span></h1> 

, , .

▍

Twitter See New Tweets , aria-hidden . ( ) .

▍

. aria-hidden="true" , «» .

Résumé

- . , , .

Chers lecteurs! - ?