Menu, Menubar, dan Tombol Menu
Terapkan menu aplikasi dengan peran dan tombol yang benar.
Menu, Menubar, dan Tombol Menu adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Web Accessibility Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Web Accessibility Academy mencakup 4 pelajaran total.
Apa Itu Menu ARIA
menu ARIA adalah daftar perintah bergaya aplikasi, seperti menu File atau Edit pada perangkat lunak desktop, bukan navigasi utama situs Anda. 🍔
Bukan untuk Navigasi Situs
Tautan halaman seharusnya berada dalam nav dengan jangkar biasa. Gunakan peran menu hanya untuk kumpulan perintah yang sebenarnya, atau pengguna pembaca layar akan kebingungan.
Tiga Peran Inti
Pola ini menggunakan role="menu" untuk wadah, role="menuitem" untuk setiap perintah, dan role="menubar" untuk bilah horizontal yang selalu terlihat.
<ul role="menu">
<li role="menuitem">Cut</li>
<li role="menuitem">Copy</li>
</ul>Tombol Menu
menu button adalah tombol sungguhan yang membuka menu. Berikan aria-haspopup="true" agar pengguna mengetahui bahwa sembulan akan muncul.
<button aria-haspopup="true"
aria-expanded="false">Actions</button>Lacak Status Terbuka
Tombol menu mengubah aria-expanded antara true dan false saat menunya dibuka dan ditutup, sama seperti kontrol pengungkapan lainnya.
Pindahkan Fokus saat Dibuka
Saat menu dibuka, pindahkan fokus ke dalamnya, tepat pada item menu pertama. Tombol tidak lagi memegang fokus selama menu aktif.
Tombol Panah di Dalam Menu
Di dalam menu vertikal, Panah Atas dan Panah Bawah berpindah di antara item. Dalam menubar, Panah Kiri dan Panah Kanan berpindah sepanjang bilah tingkat teratas.
tabindex Berpindah
Hanya satu item menu yang berada dalam urutan tab pada satu waktu. Dengan roving tabindex, item yang difokuskan memiliki tabindex 0 dan item lainnya memiliki -1.
Aktifkan dan Tutup
Enter atau Spasi menjalankan perintah yang difokuskan dan menutup menu. Menu seharusnya menutup sendiri setelah suatu perintah dipilih.
Escape Mengembalikan Fokus
Escape menutup menu tanpa menjalankan tindakan dan mengembalikan fokus ke tombol menu, sehingga pengguna kembali tepat ke tempat semula.
Submenu Membutuhkan Lebih Banyak Pengaturan
Submenu yang melayang menggunakan aria-haspopup pada menuitem induknya. Panah Kanan membukanya, sedangkan Panah Kiri menutupnya dan mengembalikan fokus.
Pemeriksaan Singkat
Anda menambahkan tombol yang membuka daftar perintah. Apa yang memberi sinyal kepada teknologi asistif bahwa menu akan muncul?
Rangkuman
Menu digunakan untuk perintah, bukan tautan halaman: buka dengan tombol haspopup, pindahkan fokus ke dalam, navigasikan dengan tombol panah dan roving tabindex, lalu biarkan Escape mengembalikan fokus. ✅
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menu, Menubar, dan Tombol Menu” gratis?
Ya — teks lengkap “Menu, Menubar, dan Tombol Menu” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Web Accessibility Academy, upgrade ke CoddyKit PRO. Kursus Web Accessibility Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Menu, Menubar, dan Tombol Menu”?
Terapkan menu aplikasi dengan peran dan tombol yang benar. Kamu berlatih Web Accessibility Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Web Accessibility Academy?
Tidak diperlukan pengalaman sebelumnya. Web Accessibility Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Menu, Menubar, dan Tombol Menu” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Web Accessibility Academy ini?
Ya. Setiap pelajaran Web Accessibility Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Membaca APG: Pola, Tombol, dan Contoh
- Combobox dan Pelengkapan Otomatis yang Tepat
- Menu, Menubar, dan Tombol Menu
- Treegrid dan Pola Lanjutan Lainnya