テキスト
要素は、アクティブな子孫とカスタム マウス機能を持つコンテナーですが、対応するキーボード機能がありません。OnKeyDown または onKeyPress の JavaScript イベント ハンドラー。
種類
エラー
形容
このエラーは、aria-activedescendant 属性を持つ要素に適用されます。 これらの要素には、1 つ以上のマウス イベント ハンドラー (mousemove、マウスダウン、または マウスアップ) がありますが、同等のキーボード イベント ハンドラー (キーダウン、キーアップ、または キー押) がありません。 キーボード イベント ハンドラーは、ユーザーがキーボードを使用して要素の機能を呼び出すことができることを確認し、要素が aria-activedescendant 属性を維持するために必要です。
このエラーを解決するには、キーボード イベント ハンドラーのいずれかを実装します。
例
<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>
関連トピック