Code source du cas :
https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100
5. L’impact de l’accessibilité sur la visibilité : caché
L'élément est masqué, ses descendants sont supprimés de l'arborescence d'accessibilité et les lecteurs d'écran n'affichent pas l'élément.
(1) Positionnement
Pour masquer un élément avec l'attribut position, nous devons le déplacer hors de l'écran et définir sa taille sur 0 (largeur et hauteur). Un exemple est celui des liens de navigation sautés. Considérons le schéma suivant :
Pour placer le lien hors écran, nous devons ajouter ce qui suit
「css」
.skip-link {
position : absolue ;
haut : -100 % ;
}Une valeur de -100 % poussera l'élément à 100 % de sa hauteur de fenêtre. En conséquence, il sera complètement masqué. Une fois concentré sur le clavier, il apparaîtra comme ceci
.skip-link:focus {
position : absolue ;
haut : 0 ;
}Code source du cas :
https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100
6. L'impact de l'accessibilité sur la position : absolu fixe |
L'élément est accessible aux lecteurs d'écran et au clavier focalisable. C'est juste caché dans la fenêtre.
Chemin de détourage Lorsque le chemin de détourage est utilisé sur un élément, il crée une zone de découpage qui définit les parties qui doivent être affichées et masquées.
Dans l'exemple ci-dessus, la zone noire transparente a un chemin de détourage. Lorsque le tracé du clip est appliqué à un élément, tout ce qui se trouve sous la zone noire transparente n'apparaîtra pas.
Pour démontrer ce qui précède plus visuellement, j'utiliserai l'outil clippy. Dans le GIF ci-dessous, j'ai le chemin de clip suivant :
Définissez la valeur du polygone dans chaque direction sur 0 0 et la zone de recadrage sera redimensionnée à 0. En conséquence, l'image ne sera pas affichée. De même, cela peut également être fait en remplaçant le polygone par un cercle :
img {
chemin de clip : cercle (0 à 50 % 50 % );
} 
7. L'impact de l'accessibilité sur le chemin du clip
L'élément est uniquement visuellement masqué, les lecteurs d'écran et le focus clavier peuvent toujours l'utiliser.
Code source du cas :
https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100
3. Contrôlez la couleur et la taille de la police
Bien que ces deux techniques ne soient pas aussi courantes que celles évoquées précédemment, elles peuvent être utiles dans certains cas d’utilisation.
1. Couleur transparente
En rendant la couleur du texte transparente, celle-ci sera visuellement masquée. Ceci est utile pour les boutons qui n'ont que des icônes.
2. Taille de la police
De plus, il est utile de définir la taille de la police sur 0, car cela masque visuellement le texte. Prenons l'exemple suivant, où il existe un bouton avec la structure suivante :
<bouton> <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="false" focusable="false"> <!-- Données du chemin --> </svg> <span>J'aime</span> </bouton>
Notre objectif est de masquer le texte de manière accessible. Pour cela j'ai ajouté le CSS suivant
.bouton durée {
couleur : transparent ;
taille de police : 0 ;
}De cette façon, le texte est masqué. Cela fonctionne même sans changer la couleur, mais je l'ai ajouté à des fins d'explication.
Code source du cas :
https://codepen.io/shadeed/pen/4eacdf50c3339fced7f787156c569372?editors=1100
3. Air caché
Lorsque vous ajoutez l'attribut aria-hidden à un élément, cela supprime l'élément de l'arborescence d'accessibilité, ce qui peut améliorer l'expérience des utilisateurs de lecteurs d'écran. A noter qu'il ne masque pas visuellement l'élément, il est uniquement destiné aux utilisateurs de lecteurs d'écran
<bouton> Menu <svg aria-hidden="true"><!-- --></svg> </bouton>
Dans l'exemple ci-dessus, nous avons un bouton de menu avec une étiquette et une icône. Pour masquer les icônes des lecteurs d'écran, aria-hidden a été ajouté.
Selon Mozilla Developer Network (MDN), vous trouverez ci-dessous les cas d'utilisation des propriétés
Masquez le contenu décoratif tel que les icônes et les images. Masquer le texte copié. Masquez le contenu hors écran ou réduit.
4. Impact de l'accessibilité sur aria-hidden="true"
est conçu pour les lecteurs d'écran car il masque le contenu uniquement aux lecteurs d'écran. Cependant, le contenu reste visible pour les utilisateurs voyants et le clavier est focalisable.
(1) Animation et interaction
Lorsque nous voulons animer un élément caché, par exemple pour afficher une navigation mobile cachée, cela doit être fait de manière accessible. Pour une expérience accessible, nous explorerons quelques bons exemples dont vous pourrez tirer des leçons et quelques mauvais exemples pour éviter de commettre des erreurs susceptibles de créer une mauvaise expérience pour les utilisateurs de lecteurs d'écran.
Animation de menu – Mauvais exemple
Nous avons un menu qui doit avoir une animation coulissante une fois développé. Le moyen le plus simple est d'ajouter les éléments suivants à votre menu :
ul {
opacité : 0 ;
transformer : traduireX(100 %);
transition : 0,3 s de relâchement ;
}
ul.actif {
opacité : 1 ;
transformer : traduireX(0);
}Avec ce qui précède, le menu se développera et se réduira en fonction de la classe .active, qui sera ajoutée via JavaScript comme suit :
menuToggle.addEventListener('clic', function(e){
e.preventDefault();
navMenu.classList.toggle('actif');
});
Le résultat peut paraître bon, mais il présente un gros bug. L'utilisation de opacity: 0 ne masquera pas la navigation dans l'arborescence d'accessibilité. Même si la navigation est visuellement masquée, elle reste focalisable via le clavier et accessible aux lecteurs d'écran. Il doit être masqué pour éviter de dérouter les utilisateurs.
Voici une capture d'écran de l'arborescence d'accessibilité de Chrome Dev Tools :
En termes simples, une arborescence d'accessibilité est une liste de tous les contenus accessibles aux utilisateurs de lecteurs d'écran. Dans notre cas, la liste de navigation est là, alors qu'elle est visuellement masquée. Nous devons résoudre deux problèmes :
Évitez d'utiliser le focus clavier lorsque le menu est masqué. Évitez d'indiquer la navigation via un lecteur d'écran lorsque la navigation est masquée.
La capture d'écran ci-dessous montre comment le rotor VoiceOver sur Mac OS voit la page. La liste de navigation est là alors qu'elle est masquée
Code source du cas :
https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0100
Animation de menu – Bon exemple
Pour corriger cette erreur, nous devons utiliser la visibilité : cachée pour le menu de navigation. Cela garantira que le menu est masqué aux lecteurs visuels et d’écran.
「css」
ul {
visibilité : cachée ;
opacité : 0 ;
transformer : traduireX(100 %);
transition : 0,3 s de relâchement ;
}
ul.actif {
visibilité : visible ;
opacité : 1 ;
transformer : traduireX(0);
}Une fois ajouté, le menu sera masqué aux lecteurs d'écran. Testons à nouveau et voyons ce que VoiceOver affichera :
Code source du cas :
https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110
5. Case à cocher personnalisée
La conception de la case à cocher par défaut est difficile à personnaliser. Nous devons donc créer une conception personnalisée pour la case à cocher. Regardons le HTML de base :
<p class="c-checkbox"> <input class="sr-only" type="checkbox" name="" id="c1"> <label class="c-checkbox__label" for="c1">case à cocher personnalisée</label> </p>
Pour personnaliser la case à cocher, nous devons masquer l'entrée de manière accessible. À cette fin, la position et d’autres propriétés doivent être utilisées. Il existe une classe CSS courante appelée sr-only ou visual-hidden qui masque uniquement visuellement un élément et le rend accessible aux utilisateurs de clavier et de lecteur d'écran.
.sr uniquement {
bordure : 0 ;
clip : rect(0 0 0 0);
-webkit-clip-path : polygone (0px 0px, 0px 0px, 0px 0px) ;
chemin du clip : polygone (0px 0px, 0px 0px, 0px 0px);
hauteur : 1px ;
marge : -1px ;
débordement : caché ;
remplissage : 0 ;
position : absolue ;
largeur : 1px ;
espace blanc : nowrap ;
}Code source du cas : https://codepen.io/shadeed/pen/b722aa72dbe3574617f6506d14e5ac03?editors=1100
Masquer le bouton
Sur Twitter, il existe un bouton appelé « Voir les nouveaux tweets » qui est masqué pour les lecteurs d'écran dont le contenu est masqué et n'apparaît que lorsque de nouveaux tweets sont disponibles.
Résumer
Ceci conclut cet article sur le didacticiel détaillé sur les méthodes, les avantages et les inconvénients du masquage d'éléments sur le Web. Pour plus d'informations sur le masquage d'éléments sur le Web, veuillez rechercher les articles précédents sur downcodes.com ou continuer à parcourir les articles connexes ci-dessous. j'espère, veuillez soutenir davantage downcodes.com à l'avenir !