Freigeben über

Fehler bei der ARIA-Containerrollen-Barrierefreiheit

  • Artikel

Text

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

Art

Fehler

Beschreibung

Dieser Fehler gilt für Elemente mit dem aria-activedescendant- attribut. Diese Elemente verfügen über einen oder mehrere Mausereignishandler (mousemove, Mousedown- oder Mouseup-), aber fehlen die entsprechenden Tastaturereignishandler (Keydown-, -Tasteup- oder Tastendruck). 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 die aria-activedescendant Attribut verwaltet.

Um diesen Fehler zu beheben, implementieren Sie einen der Tastaturereignishandler.

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 absteigende) Tastaturbarrierefreiheitsfehler