ARIA-Containerrolle: Tastaturzugriffsfehler

Text

Das -Element ist ein Container mit aktiver Nachfolger- und benutzerdefinierter Mausfunktion, aber ohne die entsprechende Tastaturfunktionalität: JavaScript-Ereignishandler für OnKeyDown oder OnKeyPress.

type

Fehler

Beschreibung

Dieser Fehler gilt für Elemente mit dem Attribut aria-activedescendant. Diese Elemente verfügen über einen oder mehrere Mausereignishandler (mousemove, mousedown oder mouseup), aber es fehlen die entsprechenden Tastaturereignishandler (Keydown, Keyup oder Keypress). Die Tastaturereignishandler sind erforderlich, um sicherzustellen, dass der Benutzer die Funktionalität des Elements mithilfe der Tastatur aufrufen kann, und um sicherzustellen, dass das Element das aria-activedescendant-Attribut verwaltet.

Implementieren Sie einen der Tastaturereignishandler, um diesen Fehler zu beheben.

Beispiel

<div role="listbox" id="listbox1" tabindex="0" aria-activedescendant="listbox1-1"> 
  <div role="option" id="listbox1-1" 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 = document.getElementById(this.getAttribute('aria-activedescendant'));
    var prev = itm.previousElementSibling;
    var next = itm.nextElementSibling;
    
    if ( e.keyCode  38 && prev ) {
      // Arrow up to move active descendant to the previous item
      itm.removeAttribute('class’);
      prev.setAttribute("class", "selected");
      this.setAttribute ('aria-activedescendant', prev.id)
    } 

    else if ( e.keyCode == 40 && next) {
      // Arrow down to move focus to the next item
      itm.removeAttribute('class’);
      next.setAttribute("class", "selected");
      this.setAttribute ('aria-activedescendant', next.id)
    }
  });      

</script>

ARIA-Containerrolle (ohne aktive Nachfolger) Tastaturzugriffsfehler