ARIA Container Role (without active descendant) Tabindex Error
Text
Das Element ist ein fokussierbarer Container, ohne dass ein aktiver Nachfolger definiert ist, aber kein untergeordnetes Element hat tabindex größer oder gleich 0.
type
Fehler
BESCHREIBUNG
Dieser Fehler gilt für Elemente, die über eine Containerrolle verfügen, nicht über ein aria-activedescendant-Attribut verfügen und nicht deaktiviert sind. Diese Elemente implementieren die Tastaturnavigation zwischen untergeordneten Elementen mithilfe des Konzepts , das als "roving index" bezeichnet wird. In diesem Konzept werden die tabindex-Attribute von untergeordneten Elementen dynamisch verwaltet, um sicherzustellen, dass immer nur ein untergeordnetes Element in der Tabstoppreihenfolge ist.
Um diesen Fehler zu beheben, legen Sie das tabindex-Attribut eines der untergeordneten Elemente auf einen Wert größer oder gleich 0 fest.
Beispiel
<div id="listbox" role="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) {
// Arrow up to move focus to the previous item.
itm.setAttribute('tabindex', '-1');
prev.setAttribute('tabindex','0');
prev.focus();
}
else if (e.keyCode == 40 && next) {
// Arrow down to move focus to the next item.
itm.setAttribute('tabindex', '-1');
next.setAttribute('tabindex','0');
next.focus();
}
});
</script>