web-dev-qa-db-fra.com

tabindex -1 ne fonctionne pas pour les éléments enfants

J'ai une balise div avec du contenu chargé à l'intérieur. Le contenu à l'intérieur peut avoir des boutons, des éléments d'ancrage, etc. qui sont focalisables. Je n'ai pas de contrôle sur le contenu mais je peux modifier les attributs de la balise 'div'.

Mon problème est que le focus va toujours au contenu (ancre, boutons, etc.) même si je spécifie le tabIndex -1 à la balise div.

<!-- HTML content here -->
<div tabindex="-1" id="externalContent">
  <div>
    ...
    <button>click me</button> <!-- Focus shouldn't come here -->
  </div>
</div>
<!-- HTML content here -->

Existe-t-il un moyen d'ignorer tout le contenu pendant la tabulation? Cela ne fonctionne certainement pas avec le code ci-dessus.

htmlaccessibilitytabindex
14
Adarsh Konchady

Réglage tabindex="-1" vous permet de définir le focus d'un élément avec un script, mais pas le place dans l'ordre de tabulation de la page. Il ne tire pas non plus les enfants de quelque chose out de l'ordre de tabulation du clavier.

tabindex="-1" est pratique lorsque vous devez déplacer le focus vers quelque chose que vous avez mis à jour via un script ou en dehors de l'action de l'utilisateur.

Si vous essayez de supprimer un élément de tabindex, que ce soit pour les lecteurs d'écran ou les utilisateurs de clavier, vous devrez probablement choisir entre l'un des éléments suivants:

  1. Masquez-le complètement (via display: none),
  2. Utilisez un script sur l'élément de sorte que lorsqu'il reçoit le focus, le script déplace le focus ailleurs.

Sans contexte (une URL de travail, une raison pour laquelle vous voulez le faire), cela ressemble beaucoup au ci-contre d'accessibilité. Je vous encourage à ne pas jouer avec la concentration à moins d'avoir une très bonne raison.

8
aardrian

Je ne sais pas pourquoi personne n'a mentionné visibility: hidden encore. Réglage display: none peut dans certains cas perturber la logique lorsqu'il s'agit de dimensions d'éléments non visuels. visibility conservera les dimensions comme opacity: 0 ferait l'affaire, mais désactiverait également tous les enfants tabables.

Exemple:

<div style="visibility: hidden;">
    <a href="#">I'm only tabbable if my parent is visible!</a>
</div>
4
Nordling Art

Il est possible de laisser un élément [~ # ~] à la fois [~ # ~] visible et non focalisable , avec ses enfants.

Cela se fait via la propriété HTML inert: https://html.spec.whatwg.org/multipage/interaction.html#inert .

Ce n'est pas encore largement pris en charge, mais il existe un polyfill: https://github.com/WICG/inert .

npm install --save wicg-inert

require('wicg-inert')

<section inert={true}>
  I am visible, but not focusable! 
</section>
1
lakesare

Le plus proche possible est d'utiliser un élément iframe, en injectant votre code HTML à l'intérieur à l'aide de javascript.

<a href="somewhere.html">first link</a>
<iframe id="iframeid" tabindex="-1"></iframe>
<a href="somewhere_else.html">second link</a>

<script>
    document.getElementById('iframeid').contentWindow.document.body.innerHTML="<button>click me</button>";
</script>

Mais cela entraînera des problèmes d'accessibilité, comme l'annonce de liens ou de boutons auxquels votre clavier ne peut pas accéder.

0
Adam