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>