Comment mettre l'accent sur une fenêtre modale javascript?

Question

Notre site Web implique du javascript qui produit des fenêtres modales superposées.

Il y a un problème d'accessibilité avec ceci, une fois que le modal est déclenché, le focus 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, en-têtes, paragraphes et contrôles de formulaire. Ce que je voudrais, c'est que l'accent soit mis sur le premier élément du modal, donc le plus susceptible d'être un tag h4.

J'ai exploré en utilisant la fonction focus() mais cela ne fonctionne pas avec un certain nombre d'éléments html.

Une idée était d'ajouter une balise a vide dans la fenêtre qui pourrait gagner le focus, mais je ne suis pas sûr de cette méthode.

Answer 1

Vous pouvez ajouter une zone de texte au début du code HTML modal, définir le focus puis masquer la zone de texte. Devrait avoir l'effet désiré autant que je comprends vos besoins.

Answer 2

Vous pourriez essayer de flouter() the element that has the focus.

Answer 3

très tard à la fête, mais les réponses existantes ne respectent pas l'accessibilité.

Le W3C wiki page on accessible modals offre un aperçu plus que ce qui est demandé dans l'OP, la partie concernée est d'avoir tabindex=-1 sur le récipient modal (qui devrait également avoir un attribut aria-dialog) il peut obtenir :focus. C'est la manière la plus accessible de mettre l'accent sur le modal, il y a aussi plus de documentation sur le garder seulement dans le modal - et le renvoyer à l'élément qui a déclenché le modal - beaucoup à expliquer ici, donc je suggère à toute personne intéressée de vérifier le lien ci-dessus.