Notre site Web implique du JavaScript qui produit des fenêtres modales superposées.
Il y a un problème d'accessibilité avec cela, une fois que le modal est déclenché, le est toujours sur l'élément de déclenchement et non sur le modal lui-même.
Ces modaux peuvent inclure toutes sortes d'éléments HTML, d'en-têtes, de paragraphes et de contrôles de formulaire. Ce que je voudrais, c'est l'accent mis à commencer sur le premier élément au sein de la modale, la plus susceptible d'être une étiquette H4.
J'ai exploré à l'aide de la fonction Une pensée consistait à ajouter une étiquette vide Focus () Toutefois, cela ne fonctionne pas avec un certain nombre d'éléments HTML.
A dans la fenêtre qui pourrait gagner la mise au point, mais je ne suis pas sûr de cette méthode.
4 Réponses :
Vous pouvez ajouter une zone de texte au début de la HTML modal, définissez la mise au point, puis masquez la zone de texte. Devrait avoir l'effet désiré aussi loin que je comprends vos besoins.
C'est une façon, même si je préférerais ne pas ajouter de boîtes de texte vides dans le code, à la fois pour l'accessibilité et la propreté du code
@ user502014 La zone de texte ne sera pas visible, l'accessibilité ne devrait pas être un problème. Si vous trouvez un code de nettoyage, n'hésitez pas à l'utiliser, gardez-vous simplement à l'esprit que vous avez «plan B» ..
très tard à la fête, mais les réponses existantes ne respectent pas l'accessibilité.
the page w3c wiki sur les modaux accessibles offre plus de persight que ce qui est Demandé dans l'OP, la partie pertinente est d'avoir Il s'agit de la manière la plus accessible de mettre l'accent sur le modal, il existe également plus de documentation sur le maintien de la situation dans le mode modal uniquement - et de le renvoyer à l'élément qui a déclenché le modal - beaucoup à expliquer ici, alors Je suggère que quiconque soit intéressé à vérifier le lien ci-dessus. tabindex = -1 sur le conteneur modal (qui devrait également avoir un attribut Aria-dialog ) afin qu'il puisse obtenir : Focus .
Pour piège se concentrer dans le modal que j'ai utilisé cette approche. Donc, l'idée de base derrière il est exactement de piéger l'accent dans les éléments HTML modaux et de ne pas lui permettre de sortir du modal. Vous pouvez le trouver ici Piège Focus à l'intérieur du modal