共用方式為

ARIA 容器角色鍵盤輔助功能錯誤

  • 發行項

發簡訊

元素是具有作用中子代和自定義滑鼠功能的容器，但不含對應的鍵盤功能：適用於 OnKeyDown 或 OnKeyPress的 JavaScript 事件處理程式。

類型

錯誤

描述

此錯誤適用於具有 aria-activedescendant 屬性的專案。 這些元素具有一或多個滑鼠事件處理程式（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>

ARIA 容器角色 （不含使用中子系） 鍵盤輔助功能錯誤