Cara mengaktifkan navigasi keyboard untuk tabel material-ui

Aug 18 2020

Saya memiliki aplikasi react yang dibuat dengan Material-UI. Pengguna telah meminta untuk mengaktifkan navigasi keyboard untuk seluruh situs web. Saya tidak dapat menavigasi tabel dengan keyboard di situs web ini. Meja saya terlihat seperti inihttps://material-ui.com/components/tables/#fixed-header. Saya ingin naik turun satu baris saat menekan "panah atas" dan "panah bawah" pada keyboard. Bagaimana cara mengaktifkan ini?

Jawaban

1 FED Sep 10 2020 at 18:42

Navigasi keyboard umumnya mengacu pada kemampuan untuk fokus pada dan memicu elemen interaktif seperti tautan, tombol, pemilih tanggal, modals, dll. Dengan hanya menggunakan kontrol keyboard. Tabel bukanlah elemen interaktif sehingga tidak dapat difokuskan oleh keyboard.

Permintaan pengguna Anda mungkin dimaksudkan untuk memastikan bahwa situs web tersebut memenuhi Pedoman Aksesibilitas Konten Web . Tabel Material UI ditandai secara semantik sebagai tabel dengan baris tajuk tabel, sehingga dasar-dasarnya ada untuk memenuhi kriteria ini.

Jika Anda mengaktifkan pembaca layar (seperti VoiceOver di Mac atau NVDA di Windows), Anda akan dapat menavigasi tabel dengan tombol panah dan setiap sel akan diumumkan oleh pembaca layar.

  • https://webaim.org/techniques/tables/data