Partilhar via

Erro de acessibilidade do teclado da função de contêiner ARIA (sem descendente ativo)

Texto

Element é um contêiner focalizável sem descendente ativo definido e sem manipuladores de eventos OnKeyDown/OnKeyPress/OnKeyUp (nem no contêiner nem em um dos elementos filho).

Tipo

Erro

Descrição

Este erro aplica-se a elementos que têm uma função de contêiner, não têm um atributo aria-activedescendant e não estão desabilitados. Esses elementos implementam a navegação por teclado entre elementos filho usando o conceito conhecido como índice móvel. Neste conceito, o tabindex atributos de elementos filho são mantidos dinamicamente, garantindo que em todos os momentos apenas um elemento filho esteja em ordem de tabulação.

Esse erro indica que um elemento container que não tem o atributo aria-activedescendant e que não está desabilitado não está acessível aos usuários do teclado. O problema existe porque o contêiner não tem os manipuladores de eventos de teclado necessários (keydown, keyupou pressionamento de tecla), e nem nenhum dos elementos filho do contêiner.

Para corrigir esse erro, defina um keydown , keyupou pressione tecla manipulador de eventos para o contêiner ou um de seus elementos filho.

Exemplo

<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>

Erro de acessibilidade do teclado da função de contêiner ARIA