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

  • Berpindah di ruang kerja
  • Menghubungkan blok di ruang kerja
  • Menambahkan blok ke ruang kerja
  • Melepas blok
  • Menavigasi toolbox
  • Menavigasi flyout
  • 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 diaktifkan pertama kali, garis merah berkedip akan muncul di ruang kerja. Ini adalah kursor. Fitur ini menampilkan lokasi pengguna saat ini dan diperbarui saat pengguna menjelajahi ruang kerja.
Saat pengguna menekan shift control k, garis merah berkedip akan 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. Tindakan ini tidak diperbarui saat Anda memindahkan kursor di sekitar ruang kerja.
Saat pengguna menekan enter, garis biru akan muncul di layar. Ini adalah penanda.

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 dalam berbagai tingkat.

Untuk beralih antartingkat, gunakan tombol A dan D. Untuk menavigasi dalam level, gunakan tombol W dan S.

Tingkat Workspace

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

Tingkat Stack

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

Tingkat Blokir dan Koneksi

Tingkat ini menyimpan blok dan semua koneksi luar di 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.

Saat pengguna menekan d, kursor akan berpindah 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.
Garis merah menyoroti tiga kemungkinan koneksi luar. Ini adalah koneksi sebelumnya, berikutnya, dan output pada blok.

Di tingkat blok dan koneksi, Anda dapat menjelajahi koneksi di luar menggunakan tombol W dan S. Pada tingkat ini, kursor diwakili oleh garis batas merah yang berkedip dari 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 kolom pertama pada blok.

Kolom dan Tingkat Input

Tingkat ini menyimpan semua kolom dan input yang ada di blok. Contoh tampilan kolom dan input ditampilkan di bawah.
Kotak merah menyoroti contoh input dan kolom pada blok.
Pada tingkat ini, Anda dapat menavigasi kolom dan input yang dapat diedit di blok saat ini dengan W dan S. Untuk kolom, kursor adalah persegi panjang merah solid. Untuk input, kursor adalah potongan teka-teki merah yang berkedip. Saat kursor berada di input, tekan D untuk berpindah ke blok yang terhubung.

Kursor bergerak melalui input dan kolom blok saat pengguna menekan tombol S. Saat pengguna menekan d saat berada di input dengan blok yang terhubung, kursor akan 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 kolom. Saat pengguna menekan enter, dropdown akan terbuka. Pengguna menekan tombol S untuk memilih nilai di menu drop-down, lalu menekan enter untuk menutup menu drop-down.

Menghubungkan Blok di Workspace

  1. Menavigasi ke koneksi target menggunakan tombol WASD
  2. Menandai koneksi menggunakan tombol Enter
  3. Menavigasi ke titik koneksi yang valid menggunakan tombol WASD
  4. Hubungkan kedua blok menggunakan tombol I (untuk menyisipkan)

Koneksi input memiliki titik biru yang menunjukkan bahwa koneksi tersebut ditandai. Saat 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, membuka blok yang ingin dipindahkan, lalu memberi tahu untuk dipindahkan.

  1. Menavigasi ke posisi di ruang kerja menggunakan tombol Shift + WASD
  2. Tandai lokasi tersebut di ruang kerja menggunakan tombol Enter
  3. Buka blok yang ingin dipindahkan menggunakan tombol WASD
  4. Pindahkan blok ke lokasi yang ditandai menggunakan tombol I

Kursor ditampilkan di ruang kerja blockly. Saat pengguna menekan enter, mereka akan menandai lokasi mereka dan garis biru akan 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 hubungan dua blok dengan mengambil blok inferior dan menariknya dari blok induk. Dengan pintasan keyboard, Anda dapat memutuskan koneksi blok dengan menekan X dengan kursor pada koneksi yang ingin Anda putuskan.

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

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

Menyisipkan Blok dari Toolbox

  1. Tekan tombol T untuk membuka toolbox
  2. Gunakan tombol W & S untuk berpindah-pindah kategori
  3. Tekan tombol D untuk berpindah ke blok di flyout
  4. Menavigasi blok menggunakan tombol W & S
  5. Tekan tombol Enter untuk menyisipkan blok dari flyout

Saat pengguna menekan t, kotak alat akan terbuka dan menampilkan berbagai kategori blok. Menekan tombol s akan berpindah ke berbagai kategori. Saat pengguna menekan d, blok pertama dalam kategori akan ditandai. Menekan Enter akan menempatkan blok di ruang kerja dan menutup kotak alat.

Eksperimen

Kami yakin ada empat area utama yang mungkin ingin dicoba oleh orang-orang:

  1. Pemetaan Tombol: Tombol apa yang harus dipetakan ke tindakan apa.
  2. Teks untuk pembaca layar/Logging/Peringatan: Cara pembaca layar membaca lokasi kursor serta error atau peringatan apa pun.
  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 codelab Navigasi Keyboard Blockly.

Jika ada area lain yang ingin Anda coba dan kami mungkin dapat membantu, isi formulir.

FAQ

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

T: Kedengarannya cukup rumit, mengapa kita memerlukan lapisan yang berbeda?
A: Saat memikirkan navigasi keyboard, kita memerlukan cara terstruktur untuk berpindah di antara berbagai blok, koneksi, kolom, input, dan koordinat ruang kerja.
Secara internal, kita merepresentasikannya dengan hierarki sintaksis abstrak (AST). Penerapan kursor default tidak jauh dari model ini.Hal ini disengaja untuk memberi developer pemahaman yang lebih baik tentang arsitektur yang mendasarinya. Ada kursor 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 bug navigasi keyboard terbuka.