Navigasi Keyboard

Panduan ini berfokus pada cara menggunakan navigasi keyboard default seperti yang saat ini diterapkan di Blockly.

Menggunakan Navigasi Keyboard

Agar navigasi keyboard berhasil, pengguna harus dapat menyelesaikan tugas-tugas berikut:

  • Berpindah-pindah di ruang kerja
  • Menghubungkan blok di ruang kerja
  • Menambahkan blok ke ruang kerja
  • Lepaskan blok
  • Membuka kotak peralatan
  • Menavigasi {i>flyout<i}
  • Menyisipkan blok dari menu flyout

Di bawah ini, dijelaskan cara navigasi keyboard default Blockly menyelesaikan tugas-tugas ini.

Mengaktifkan Navigasi Keyboard

Pengguna dapat mengaktifkan dan menonaktifkan navigasi keyboard dengan menekan Shift + Ctrl + k. Saat navigasi keyboard pertama kali diaktifkan, garis merah yang berkedip akan muncul di ruang kerja. Ini adalah kursor. Hal ini menunjukkan lokasi pengguna saat ini dan pembaruan saat pengguna menavigasi ruang kerja.
Saat pengguna menekan shift control k, garis merah yang berkedip muncul di layar. Ini adalah kursor.

Menekan Enter akan membuat garis biru di lokasi saat ini yang menggambarkan penanda pengguna. Penanda menampilkan lokasi target untuk penyisipan blok. Tata letak ini tidak diperbarui saat Anda memindahkan kursor di sekitar ruang kerja.
Ketika pengguna menekan, masukkan garis biru muncul di layar. Ini adalah penandanya.

Menggunakan Kursor Default

Ruang kerja terdiri dari input, kolom, koneksi, blok, dan koordinat ruang kerja. Kursor default bergerak di sekitar ruang kerja dengan membagi semua komponen ke tingkat yang berbeda.

Untuk berpindah-pindah level, gunakan tombol A dan D. Untuk menavigasi dalam level, gunakan tombol W dan S.

Tingkat Ruang Kerja

Masuk ke mode navigasi keyboard dengan menekan Shift + Ctrl + k. Tindakan ini menempatkan kursor pada ruang kerja atau di blok pertama pada ruang kerja. Jika kursor berada pada blok, pindahkan ke tingkat ruang kerja dengan menekan A dua kali. Untuk memindahkan kursor pada ruang kerja, gunakan Shift + WASD. Untuk berpindah ke tingkat stack, gunakan tombol D.
Kursor pada ruang kerja blok akan bergerak saat pengguna menekan tombol Shift dan W A S D. Saat pengguna menekan d, kursor akan muncul sebagai persegi panjang di sekeliling tumpukan pertama blok

Tingkat Tumpukan

Pada tingkat tumpukan, Anda dapat bernavigasi di antara tumpukan blok di ruang kerja menggunakan kunci W dan S. Pada tingkat ini, kursor diwakili oleh persegi panjang merah solid di sekitar semua blok dalam tumpukan. Untuk membuka blok pertama dalam tumpukan yang dipilih, gunakan tombol D.
Saat pengguna menekan s, kursor akan berpindah ke tumpukan blok berikutnya. Saat pengguna menekan d, kursor muncul sebagai garis merah berkedip di atas blok pertama dalam tumpukan yang dipilih.

Tingkat Blok dan Koneksi

Level ini menampung blok dan semua koneksi luar pada blok. Kursor default disetel untuk melewati blok jika ada koneksi sebelumnya atau output. Jika tidak ada, kursor akan berpindah ke blok, seperti yang ditunjukkan di bawah ini.

Bila pengguna menekan d, kursor akan bergerak dari persegi panjang merah di sekitar tumpukan blok menjadi setengah persegi panjang yang mengelilingi blok pertama dalam tumpukan.

Tiga kemungkinan koneksi luar ditampilkan di bawah ini.
Garis merah menyoroti tiga kemungkinan koneksi luar. Ini adalah koneksi sebelumnya, berikutnya, dan output pada suatu blok.

Pada tingkat blok dan koneksi, Anda dapat bernavigasi melalui koneksi luar menggunakan kunci W dan S. Pada tingkat ini, kursor diwakili oleh garis batas merah yang berkedip pada koneksi saat ini. Untuk membuka kolom atau input pertama pada blok, tekan D.
Saat pengguna menekan tombol S, kursor akan muncul sebagai garis berkedip merah pada koneksi blok berikutnya. Saat pengguna menekan tombol d, kursor akan muncul sebagai persegi panjang merah di sekitar bidang pertama pada blok.

Kolom dan Level Input

Level ini menyimpan semua kolom dan input yang ada pada blok. Contoh tampilan kolom dan input ditampilkan di bawah ini.
Persegi panjang merah menandai contoh input dan kolom pada blok.
Pada tingkat ini, Anda dapat menjelajahi kolom dan input blok saat ini yang dapat diedit menggunakan W dan S. Untuk kolom, kursor adalah persegi panjang berwarna merah solid. Untuk input, kursor adalah potongan puzzle berwarna merah yang berkedip. Saat kursor berada pada input, tekan D untuk berpindah ke blok yang terhubung.

Kursor bergerak melalui input dan kolom blok saat pengguna menekan tombol S. Jika pengguna menekan d saat masukan dengan blok yang terhubung, kursor muncul sebagai garis merah berkedip di atas blok yang terhubung.

Saat kursor berada di kolom, tekan Enter untuk mengeditnya.

Kursor ditampilkan sebagai persegi panjang merah di sekitar bidang. Ketika pengguna menekan tombol Enter, dropdown akan terbuka. Pengguna menekan tombol S untuk memilih nilai di {i>dropdown<i} dan kemudian menekan {i>enter<i} untuk menutup {i>dropdown<i}.

Menghubungkan Blok Di Ruang Kerja

  1. Buka koneksi target Anda menggunakan tombol WASD
  2. Tandai koneksi menggunakan tombol Enter
  3. Navigasikan ke titik koneksi yang valid menggunakan tombol WASD
  4. Hubungkan dua blok menggunakan kunci I (untuk menyisipkan)

Koneksi input memiliki titik biru yang menunjukkan bahwa koneksi tersebut telah ditandai. Ketika pengguna menekan i pada koneksi yang valid, blok akan berpindah ke titik koneksi yang ditandai.

Memindahkan Blok di Ruang Kerja

Biasanya di Blockly, Anda memindahkan blok ke ruang kerja dengan mengambilnya, menariknya ke posisi yang diinginkan, lalu melepaskannya. Dengan pintasan keyboard, Anda dapat menandai lokasi target, arahkan kursor ke blok yang ingin dipindahkan, lalu minta untuk memindahkannya.

  1. Arahkan ke posisi ruang kerja menggunakan tombol Shift + WASD
  2. Tandai lokasi tersebut di ruang kerja menggunakan tombol Enter
  3. Pilih blok yang ingin Anda pindahkan menggunakan tombol WASD
  4. Pindahkan blok ke lokasi yang ditandai menggunakan tombol I

Kursor ditampilkan di ruang kerja blok. Saat pengguna menekan enter, mereka menandai lokasinya dan garis biru muncul di posisi ini. Dengan menggunakan tombol WASD, mereka memindahkan kursor ke koneksi luar blok. Saat pengguna menekan i, blok akan berpindah ke lokasi yang ditandai.

Melepaskan Blok

Biasanya di Blockly, Anda memutuskan sambungan dua blok dengan mengambil blok yang lebih rendah dan menariknya dari blok induk. Dengan pintasan keyboard, Anda memutuskan blok dengan menekan X dengan kursor pada koneksi yang ingin diputus.

  1. Buka koneksi yang ingin Anda putuskan menggunakan tombol WASD
  2. Memutus koneksi dengan X

Dua blok terhubung di layar dengan kursor yang ditampilkan di tengahnya. Ketika pengguna menekan tombol x, blok akan terputus.

Memasukkan Blok Dari Toolbox

  1. Tekan tombol T untuk membuka kotak peralatan
  2. Gunakan tombol W & S untuk berpindah-pindah kategori
  3. Tekan tombol D untuk berpindah ke blok pada {i>flyout<i}
  4. Menjelajahi blok menggunakan tombol W & S
  5. Tekan tombol Enter untuk menyisipkan blok dari menu flyout

Ketika pengguna menekan t, toolbox akan terbuka dan menampilkan kategori blok yang berbeda. Klik akan menelusuri berbagai kategori. Saat pengguna menekan d, blok pertama dalam kategori ditandai. Menekan tombol Enter akan menempatkan blok pada ruang kerja dan menutup kotak peralatan.

Eksperimen

Kami percaya ada empat area utama yang mungkin diminati orang untuk bereksperimen:

  1. Pemetaan Kunci: Tombol apa yang harus dipetakan ke tindakan yang perlu dilakukan.
  2. Teks untuk pembaca layar/Logging/Peringatan: Cara pembaca layar membacakan lokasi kursor serta error atau peringatan.
  3. Navigasi Workspace: Cara pengguna menavigasi berbagai blok, kolom, input, dan koneksi di ruang kerja.
  4. Tampilan Kursor: Tampilan kursor dan penanda.

Untuk informasi selengkapnya tentang cara menggunakan API ini, lihat code lab Navigasi Keyboard Blockly.

Jika Anda ingin bereksperimen dengan area lain yang mungkin dapat kami bantu, silakan isi formulir.

FAQ

T: Mengapa Anda tidak menggunakan tombol panah untuk navigasi keyboard?
J: Pembaca layar umumnya menggunakan tombol panah. Kami tidak ingin mengganggu hal ini, jadi kami memilih untuk menggunakan kunci WASD.
Namun, kami menyadari bahwa setiap orang memiliki kebutuhan yang berbeda, jadi sebaiknya buat cara mudah untuk mengubah pemetaan kunci.

T: Tampaknya cukup rumit, mengapa kita memerlukan lapisan yang berbeda?
J: Saat memikirkan navigasi keyboard, kami memerlukan cara terstruktur untuk bergerak di berbagai blok, koneksi, kolom, input, dan koordinat ruang kerja.
Secara internal, kami merepresentasikannya dengan hierarki sintaksis abstrak (AST). Implementasi kursor default tidak menyimpang dari model ini.Hal ini dimaksudkan untuk memberi developer pemahaman yang lebih baik tentang arsitektur yang mendasarinya. Ada cursors lain yang mungkin lebih mudah dipahami oleh pengguna akhir.

Batasan

Kami belum mendukung navigasi ke komponen non-blok (misalnya tempat sampah, tombol zoom, dan tombol flyout). Untuk informasi selengkapnya tentang batasan, lihat daftar bugs navigasi keyboard terbuka.