Ceci n’est qu’un petit exemple de la manière dont le balisage sémantique facilite l’utilisation d’un site Web. Nous devons adopter le Web sémantique de manière globale pour créer des sites accessibles à tous.
Le balisage sémantique nous aidera à rendre notre fenêtre modale plus pratique et accessible. Et l'utilisation correcte des styles et des scripts élèvera la convivialité de notre site à un nouveau niveau !
Utilisez l'état :focus dans vos styles. Cela améliorera non seulement les fenêtres modales, mais également l’ensemble de la gestion du site. Souvent, l'état :focus utilisé par défaut par le navigateur est écrasé par les styles CSS-reset, ou ne met pas suffisamment en évidence les éléments actifs, ou ne s'intègre pas dans la conception globale du site.
Cependant, recevoir le focus du clavier et survoler le pointeur de la souris sont toujours deux états différents, et il serait sage de leur donner leurs propres styles différents :
Btn:hover ( arrière-plan: #f00; ) :focus ( box-shadow: 0 0 3px rgba(0,0,0,.75); )
Chaque élément capable de recevoir le focus doit être stylé de cette façon. En dernier recours, si vous ne souhaitez pas utiliser votre propre style :focus, veillez à conserver le style de navigateur par défaut - généralement un soulignement en pointillés ou une bordure autour de l'élément actif qui a le focus.
Lors de l'ouverture d'une fenêtre modale et du déplacement du focus, vous devez conserver l'élément actif précédent. Ensuite, lors de la fermeture de la fenêtre modale, l'utilisateur pourra poursuivre son interaction avec le site au même endroit où la fenêtre modale l'a amené à l'interrompre.
Cela fonctionne comme un signet. Sans une telle fonction, l'utilisateur se déplacera vers le haut de la page et sera obligé de rechercher à nouveau le contenu dont il a besoin, ce qui est décourageant. Le script suivant peut résoudre le problème du maintien du focus :
var dernierFocus; function modalShow () ( lastFocus = document.activeElement; ) function modalClose () ( lastFocus.focus(); // place le focus sur l'élément enregistré)
Lorsqu'une fenêtre modale apparaît, le focus doit se déplacer vers elle ou vers le premier élément cliquable qu'elle contient. L’utilisateur n’aura alors plus besoin de ramasser la souris ni d’utiliser la touche « Tab » pour naviguer dans des dizaines de champs et de boutons :
Si votre fenêtre modale occupe tout l'écran, veillez à rendre temporairement indisponibles les commandes de la fenêtre principale. Sinon, n'importe quel utilisateur peut continuer à saisir quelque chose dans la fenêtre principale, tout en pensant qu'il interagit avec un modal. Un script comme celui-ci peut réaliser ce que vous voulez :
function focusRestrict (event) ( document.addEventListener("focus", function(event) ( if (modalOpen && !modal.contains(event.target)) ( event.stopPropagation(); modal.focus(); ) ), true ; )
Lors de la fermeture de l'écran principal pour l'utilisateur, nous devons toujours lui fournir l'accès aux commandes du navigateur à l'aide du même bouton « Tab ». Les utilisateurs ordinaires et voyants s'attendent également à ce comportement de notre fenêtre.
Le script ci-dessus empêche le focus de se déplacer vers le document principal, mais le ramène au premier élément de la fenêtre modale.
Si l'on place également la fenêtre modale en haut de l'arborescence DOM, ce qui en fait le premier enfant
, puis la combinaison « Shift » + « Tab » permettra à l'utilisateur de basculer le focus sur les contrôles du navigateur :
var m = document.getElementById("modal_window"), p = document.getElementById("page"); //
doit entourer la page entière afin que // aria-hidden="true" puisse être appliqué au contenu principal lorsque le modal est ouvert. fonction swap () ( p.parentNode.insertBefore(m, p); ) swap();
Si vous ne pouvez ni sélectionner à l'avance la position supérieure de la boîte modale ni la déplacer vers le haut de l'arborescence à l'aide de JavaScript, vous pouvez boucler le mouvement de focus entre le premier et le dernier élément actif dans la modale.
Pour ce faire, vous devez enregistrer leurs identifiants dans le script. Lorsque l'utilisateur appuie sur « Tab » sur le dernier élément de la fenêtre, vous déplacerez le focus sur le premier élément. Appuyer sur « Shift » + « Tab » doit être traité de manière miroir.
Il existe d'autres options pour gérer le mouvement de mise au point. Par exemple, vous pouvez réaffecter et utiliser dans un script des listes d'éléments d'entrée entre lesquels la transition de focus est autorisée. Ou définissez tabindex=-1 sur les éléments actifs masqués.
Les première et deuxième méthodes rendent les menus et les boutons du navigateur inaccessibles lorsqu'ils sont contrôlés depuis le clavier. Avec cette approche, un élément clairement visible consistant à fermer la fenêtre et à intercepter la pression sur la touche « Échap » dans le même but est essentiel. Sinon, votre site deviendra un piège pour les utilisateurs sans souris.
La troisième approche conservera la possibilité de naviguer dans les contrôles du navigateur, mais peut s'avérer très coûteuse en termes de performances du script, car elle devra passer par de nombreux éléments actifs sur le site, aussi bien à l'ouverture de la fenêtre modale qu'à sa fermeture, en afin de redonner la possibilité à tous les éléments du contenu principal d'être choisis.
Il est clair que lors du choix d'une méthode spécifique, vous devez prendre en compte tous les facteurs dont nous avons discuté.
Clôture
La fenêtre modale doit être facile à fermer. Les boîtes de dialogue standard appelées depuis JavaScript par la fonction alert() peuvent être fermées en appuyant sur la touche « Esc ». C'est une bonne pratique de s'en tenir à cette convention lors de la création de vos propres dialogues.
Si une boîte de dialogue contient de nombreux éléments actifs, alors il serait bien préférable de donner à l'utilisateur la possibilité de la fermer d'un simple clic, plutôt que de l'obliger à parcourir tous les champs pour accéder au bouton « Fermer » :
De plus, de nombreux développeurs permettent aux utilisateurs de fermer une fenêtre en cliquant sur une zone vide de la fenêtre. Vous pouvez utiliser un script simple pour cela :
mOverlay.addEventListener("click", function(e) if (e.target == modal.parentNode) modalClose(e); ) ), false);
L'exception évidente à la règle serait si vous ne souhaitez vraiment pas qu'un visiteur continue à utiliser votre site jusqu'à ce qu'il ait saisi les informations requises dans une boîte de dialogue modale, par exemple s'il s'est inscrit ou s'est connecté.
Mesures supplémentaires pour assurer l’accessibilité du site
Il existe d'autres moyens d'aider les utilisateurs handicapés à naviguer sur le World Wide Web. Spécifications WAI-ARIA couvrir tous les domaines d’interaction de l’utilisateur avec le site. Dans certains cas, il suffit d'ajouter légèrement du balisage ou des styles, dans d'autres il est nécessaire d'équiper le site de scripts.
ARIA-CACHÉ
En définissant l'attribut aria-hidden sur true , vous pouvez masquer le contenu d'un élément et tous ses enfants aux lecteurs d'écran. Veuillez noter que les éléments ARIA n'ont pas de style par défaut dans les navigateurs. Pour les masquer aux utilisateurs voyants, utilisez le code CSS suivant :
Fenêtre modale ( affichage : aucun ; )
Notez le sélecteur très spécifique. En général, nous ne voulons pas masquer absolument tous les éléments avec aria-hidden=true. Rappelez-vous l'exemple précédent avec le bouton "X" pour comprendre ce que cela signifie.
RÔLE=”DIALOGUE”
Ajoutez la propriété role="dialog" à tous les éléments contenant du contenu modal. Cela indiquera à la technologie dite de réhabilitation que le contenu nécessite une réponse de l'utilisateur. Les scripts que nous avons décrits qui bouclent le mouvement du focus d'entrée entre des éléments actifs valides complèteront parfaitement ce balisage.
Pour les alertes qui nécessitent une simple confirmation de la part de l'utilisateur, utilisez role="alertdialog" conjointement avec les mêmes scripts.
ARIA-LABEL
Les propriétés aria-label et aria-labelledby sont utilisées conjointement avec role="dialog" . Si votre fenêtre modale a un titre, indiquez son identifiant, par exemple : aria-labelledby=modal_header_id. Sinon, définissez la description de la boîte de dialogue comme valeur de la propriété aria-label.
Qu'en est-il des boîtes de dialogue HTML5 ?
Au moment de la rédaction de cet article, la version 37 de Google Chrome et les versions nocturnes de Firefox ont déjà appris à prendre en charge l'élément de dialogue sémantique.
Lorsque cet élément deviendra couramment utilisé, cela nous évitera d'avoir à mettre role=dialog dans divers éléments. Pour l’instant, nous vous recommandons d’utiliser le rôle même si vous disposez de bibliothèques polyfill pour fournir la prise en charge des lecteurs d’écran.
Ce qui est génial, c'est que l'élément de dialogue a non seulement une signification sémantique, mais aussi des propriétés qui peuvent remplacer les scripts et les styles que nous utilisons aujourd'hui.
Par exemple, pour afficher ou masquer une boîte de dialogue, nous utilisons généralement un script comme celui-ci :
var modal = document.getElementById("myModal"), openModal = document.getElementById("btnOpen"), closeModal = document.getElementById("btnClose"); // pour afficher une fenêtre modale openModal.addEventListener("click", function(e) ( modal.show(); // ou modal.showModal(); )); // pour fermer la fenêtre modale closeModal.addEventListener("click", function(e) ( modal.close(); ));
La méthode show() affiche la boîte de dialogue tout en permettant à l'utilisateur d'accéder au reste du site. La méthode showModal() démarre une boîte de dialogue et empêche l'utilisateur d'interagir avec d'autres éléments du site.
Dans l'article sur la création d'une fenêtre modale à l'aide de CSS, nous avons examiné ce qu'est une fenêtre modale et pourquoi elle est nécessaire. Nous avons également créé une fenêtre en utilisant uniquement du CSS. Dans cet article, je vais décrire comment créer une fenêtre modale javascript. Plus précisément, nous utiliserons la bibliothèque jquery pour créer.
Commençons donc par créer une fenêtre modale dans jquery. Pour compliquer le problème, posons la condition suivante. Nous devrons créer une fenêtre modale réactive. Et l'adaptabilité consistera dans le fait que lorsque la taille de l'écran diminue, la fenêtre diminuera également. Commençons par créer une fenêtre modale jquery adaptative avec un balisage HTML.
Je pense que tout est clair avec le code. Nous avons un wrapper.wrapper, où se trouve le contenu de notre site. Il y a un bouton pour appeler une fenêtre modale avec l'identifiant gowindow, la fenêtre elle-même avec l'identifiant modal_window et une couche superposée myoverlay. Écrivons maintenant les styles CSS.
Wraper (largeur : 100 % ; marge : auto ; largeur : auto ;/*identique à 100 %*/ largeur maximale : 960 px ;/*largeur maximale du wrapper*/ bordure : 1px solide #000 ; couleur d'arrière-plan : # F5F9FB ; ) .button( /*-------*/ ) #modal_window ( largeur : 34 % ;/*pour la réactivité*/ hauteur : 300 px ; rayon de bordure : 10 px ; bordure : 3 px #fff solide ; arrière-plan : # e0e0e0 ; margin-top : -30 % ; affichage : aucun ; opacité : 0 ; /* transparence totale pour l'animation */ z-index : 5000 ; /*window doit être le calque supérieur */ padding-top : 20px ; align: center; position: relative; ) #modal_window #window_close ( largeur: 21px; hauteur: 21px; position: absolue; haut: 10px; droite: 10px; curseur: pointeur; affichage: bloc; ) #myoverlay ( z-index: 3000 ; /*au-dessus de tous les calques mais en dessous de la fenêtre */ position : fixe ; /*pour chevaucher le site*/couleur d'arrière-plan : #000 ; largeur : 100 % ; hauteur : 100 % ; */ haut : 0 ; gauche : 0 ; affichage : aucun )
Décrivons le code CSS. Nous définissons block.wrapper pour qu'il soit adaptatif, il change en fonction de la taille de l'écran mais pas plus de 960 pixels. Je ne montrerai pas le code du bouton. Nous définissons la largeur de la fenêtre #modal_window en pourcentage, la largeur dépendra de la largeur du .wrapper. Pour centrer la fenêtre, définissez la marge sur 33 %. Il est calculé entre 50 % et 17 %, 17 % représentant la moitié de la largeur de la fenêtre. On cache la fenêtre avec les propriétés display : none et opacity : 0. Avec le code #window_close et #myoverlay, je pense que tout est clair. Écrivons maintenant le code jquery. Nous supposerons que jqery est déjà connecté.
$(document).ready(function() ( $("#gowindow").click(function())(//cliquez sur le bouton $("#myoverlay").fadeIn(400, //afficher le calque de superposition function() ( $("#modal_window") .css("display", "block") //rendre la fenêtre visible.animate((opacity: 1, top: "50%"), 200); //augmenter la transparence, la fenêtre se déplace en douceur ) )); /* supprimer la fenêtre */ $("#window_close, #myoverlay").click(function())( //cliquez sur le calque superposé ou croisez $ ("#modal_window") .animate((opacité : 0, haut : "45%"), 200, //la transparence est activée, la fenêtre monte fonction())( $(this).css("display", "none"); //rendre la fenêtre invisible $("# myoverlay").fadeOut(400 //supprimer le calque de chevauchement ) ) ));
Je pense que le code Js n'a besoin d'aucune explication, puisque je l'ai plutôt bien commenté. C'est tout ce que je pense, alors résumons. Nous avons créé une simple fenêtre modale réactive jquery
Les fenêtres modales sont un outil fréquemment utilisé dans l'arsenal d'un webmaster. Il est très bien adapté pour résoudre un grand nombre de tâches, telles que l'affichage de formulaires d'inscription, de blocs publicitaires, de messages, etc.
Mais, malgré leur place importante dans le support informationnel du projet, les fenêtres modales sont généralement implémentées en JavaScript, ce qui peut créer des problèmes lors de l'extension des fonctionnalités ou de la garantie d'une compatibilité ascendante.
HTML5 et CSS3 facilitent incroyablement la création de fenêtres modales.
Balisage HTML
La première étape vers la création d’une fenêtre modale est un balisage simple et efficace :
Ouvrir la fenêtre modale
À l'intérieur d'un élément div
Le contenu de la fenêtre modale est placé. Vous devez également fournir un lien pour fermer la fenêtre. Par exemple, plaçons un titre simple et plusieurs paragraphes. Le balisage complet de notre exemple ressemblerait à ceci :
Ouvrir la fenêtre modale
X
Fenêtre modale
Un exemple de fenêtre modale simple pouvant être créée en utilisant CSS3.
Il peut être utilisé dans un large éventail, de l'affichage de messages à l'enregistrement de formulaires.
Styles
Créer une classe modalDialog et commencez à façonner l'apparence :
ModalDialog ( position : fixe ; famille de polices : Arial, Helvetica, sans-serif ; haut : 0 ; droite : 0 ; bas : 0 ; gauche : 0 ; arrière-plan : rgba(0,0,0,0.8) ; z-index : 99999 ; -webkit-transition : opacité 400 ms facilité d'entrée ; -moz-transition : opacité 400 ms facilité d'affichage : aucun ;
Notre fenêtre aura une position fixe, c'est-à-dire qu'elle descendra si vous faites défiler la page avec la fenêtre ouverte. De plus, notre fond noir s'étendra pour remplir tout l'écran.
L'arrière-plan aura une légère transparence et sera également placé au-dessus de tous les autres éléments grâce à l'utilisation de la propriété indice z.
Enfin, nous définissons les transitions pour afficher notre fenêtre modale et la masquons dans un état inactif.
Peut-être que vous ne connaissez pas la propriété événements de pointeur, mais il vous permet de contrôler la façon dont les éléments réagiront aux clics de souris. Nous définissons la valeur à sa valeur pour la classe modalDialog, puisque le lien ne doit pas répondre aux clics de souris lorsque la pseudo-classe est active ":cible".
Maintenant, nous ajoutons une pseudo-classe :cible et les styles pour la fenêtre modale.
ModalDialog:target ( display: block; pointer-events: auto; ) .modalDialog > div ( width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: # fff ; arrière-plan : -moz-linear-gradient(#fff, #999) ; arrière-plan : -webkit-linear-gradient(#fff, #999) ; )
Pseudo-classe cible change le mode d'affichage de l'élément, donc notre fenêtre modale sera affichée lorsque le lien sera cliqué. Nous modifions également la valeur de la propriété événements de pointeur.
Nous définissons la largeur et la position de la fenêtre modale sur la page. Nous définissons également un dégradé pour le fond et les coins arrondis.
Fermer la fenêtre
Nous devons maintenant implémenter la fonctionnalité de fermeture de fenêtre. Former l'apparence du bouton :
Fermer (arrière-plan : #606061 ; couleur : #FFFFFF ; hauteur de ligne : 25 px ; position : absolue ; droite : -12 px ; alignement du texte : centre ; haut : -10 px ; largeur : 24 px ; décoration du texte : aucune ; police- poids : gras ; -webkit-border-radius : 12px ; -moz-border-radius : 12px ; -moz-box-shadow : 1px 3px #000 ; :survol ( arrière-plan : #00d9ff; )
Pour notre bouton, nous définissons l'arrière-plan et la position du texte. Ensuite, nous positionnons le bouton, l'arrondissons à l'aide de la propriété d'arrondi du cadre et formons une ombre légère. Lorsque vous passez votre souris sur le bouton, nous changerons la couleur d'arrière-plan.
