Bagikan melalui

Kesalahan Aksesibilitas Papan Ketik Peran Kontainer ARIA

  • Artikel

Teks

Elemen adalah kontainer dengan fungsionalitas mouse turunan dan kustom aktif tetapi tanpa fungsionalitas keyboard yang sesuai: Penanganan aktivitas JavaScript untuk OnKeyDown atau OnKeyPress.

Jenis

Kesalahan

Deskripsi

Kesalahan ini berlaku untuk elemen yang memiliki atribut aria-activedescendant. Elemen-elemen ini memiliki satu atau beberapa handler peristiwa mouse (mousemove, mousedown atau mouseup), tetapi tidak memiliki handler peristiwa keyboard yang setara (, keyup atau keypress). Penanganan aktivitas keyboard diperlukan untuk memastikan bahwa pengguna dapat memanggil fungsionalitas elemen dengan menggunakan keyboard, dan untuk memastikan bahwa elemen mempertahankan atribut aria-activedescendant.

Untuk memperbaiki kesalahan ini, terapkan salah satu penanganan aktivitas keyboard.

Contoh

<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>

Kesalahan Aksesibilitas Keyboard Peran Kontainer ARIA (tanpa turunan aktif)