Rôle de conteneur ARIA (sans descendant actif) erreur d’accessibilité du clavier

Texte

L’élément est un conteneur pouvant être actif sans descendant actif défini et sans / / gestionnaires d’événements OnKeyDown OnKeyPress onkeyup (ni sur le conteneur, ni sur l’un des éléments enfants).

Type

Erreur

Description

Cette erreur s’applique aux éléments qui ont un rôle de conteneur, ne disposent pas d’un attribut Aria-activedescendant et ne sont pas désactivés. Ces éléments implémentent la navigation au clavier entre les éléments enfants à l’aide du concept appelé index itinérant. Dans ce concept, les attributs TabIndex des éléments enfants sont conservés de manière dynamique, ce qui garantit qu’à tout moment, un seul élément enfant est dans l’ordre de tabulation.

Cette erreur indique qu’un élément conteneur qui n’a pas l’attribut Aria-activedescendant , et qui n’est pas désactivé, n’est pas accessible aux utilisateurs du clavier. Le problème est dû au fait que le conteneur n’a pas les gestionnaires d’événements de clavier nécessaires (keypg, KeyUp ou KeyPress) et qu’aucun des éléments enfants du conteneur n’est utilisé.

Pour corriger cette erreur, définissez un gestionnaire d’événements keyverse, KeyUp ou KeyPress pour le conteneur ou l’un de ses éléments enfants.

Exemples

<div role="listbox" id="listbox1" >
  <div role="option" id="listbox1-1" tabindex="0" class="selected">Item 1</div>
  <div role="option" id="listbox1-2">Item 2</div>
  <div role="option" id="listbox1-3">Item 3</div>
  ...
<div>

<script>

  ...

  listbox1.addEventListener('keyup', function(e) {
    var itm = e.srcElement;
    var prev = itm.previousElementSibling;
    var next = itm.nextElementSibling;

    if (e.keyCode == 38 && prev) {
      // On arrow up move focus to the previous item.
      itm.setAttribute('tabindex', '-1');
      prev.setAttribute('tabindex','0');
      prev.focus();
    }

    else if (e.keyCode == 40 && next) {
      // On arrow down move focus to the next item.
      itm.setAttribute('tabindex', '-1');
      next.setAttribute('tabindex','0');
      next.focus();
    }
  });

</script>

Erreur d’accessibilité du clavier du rôle de conteneur ARIA