Menü, Menubar ve Menü Düğmesi
Uygulama menülerini doğru roller ve tuşlarla uygulayın.
Menü, Menubar ve Menü Düğmesi, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Web Accessibility Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
ARIA Menüler Nedir
Bir ARIA menüsü, masaüstü yazılımlarındaki File veya Edit menüleri gibi uygulama tarzı bir komut listesidir; sitenizin ana gezinme alanı değildir. 🍔
Site Gezinmesi İçin Kullanılmaz
Sayfa bağlantıları normal bağlantı öğeleriyle bir nav içinde yer almalıdır. Menü rolünü yalnızca gerçek komut kümeleri için kullanın; aksi hâlde ekran okuyucu kullanıcılarının kafasını karıştırırsınız.
Üç Temel Rol
Kalıp, kapsayıcı için role="menu", her komut için role="menuitem" ve yatay, her zaman görünür bir çubuk için role="menubar" kullanır.
<ul role="menu">
<li role="menuitem">Cut</li>
<li role="menuitem">Copy</li>
</ul>Menü Düğmesi
Menü düğmesi, bir menüyü açan gerçek bir düğmedir. Kullanıcıların bir açılır pencereyle karşılaşacağını anlaması için aria-haspopup="true" ekleyin.
<button aria-haspopup="true"
aria-expanded="false">Actions</button>Açık Durumu İzleyin
Menü düğmesi, menüsü açılıp kapanırken aria-expanded değerini true ve false arasında değiştirir; tıpkı diğer açılır-kapanır denetimlerde olduğu gibi.
Açıldığında Odağı Taşıyın
Menü açıldığında odağı menünün içine, ilk menü öğesine taşıyın. Menü etkinken düğme artık odağı tutmaz.
İçeride Ok Tuşları
Dikey bir menünün içinde Yukarı ve Aşağı Ok öğeler arasında hareket eder. Bir menubar'da Sol ve Sağ Ok, en üst düzey çubuk boyunca hareket eder.
Hareketli tabindex
Aynı anda yalnızca bir menü öğesi sekme sırasındadır. Hareketli tabindex yaklaşımında odaktaki öğenin tabindex değeri 0, diğerlerininki -1 olur.
Etkinleştirin ve Kapatın
Enter veya Boşluk, odaktaki komutu çalıştırır ve menüyü kapatır. Bir komut seçildikten sonra menü kendiliğinden kapanmalıdır.
Escape Odağı Geri Döndürür
Escape, herhangi bir işlem yapmadan menüyü kapatır ve odağı menü düğmesine geri gönderir; böylece kullanıcı tam olarak başladığı yere döner.
Alt Menüler Daha Fazlasını Gerektirir
Açılır bir alt menü, üst menü öğesinde aria-haspopup kullanır. Sağ Ok alt menüyü açar; Sol Ok ise kapatıp geri döner.
Hızlı Kontrol
Komutlar listesini açan bir düğme ekliyorsunuz. Yardımcı teknolojilere bir menünün görüneceğini ne bildirir?
Özet
Menüler sayfa bağlantıları için değil, komutlar içindir: haspopup özelliğine sahip bir düğmeyle açın, odağı menünün içine taşıyın, ok tuşları ve roving tabindex ile gezinin, Escape tuşuyla odağın geri dönmesini sağlayın. ✅
Sıkça Sorulan Sorular
“Menü, Menubar ve Menü Düğmesi” dersi ücretsiz mi?
Evet — “Menü, Menubar ve Menü Düğmesi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Web Accessibility Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
“Menü, Menubar ve Menü Düğmesi” dersinde ne öğreneceğim?
Uygulama menülerini doğru roller ve tuşlarla uygulayın. Web Accessibility Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Web Accessibility Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Web Accessibility Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Menü, Menubar ve Menü Düğmesi” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Web Accessibility Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Web Accessibility Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- APG'yi Okuma: Kalıplar, Tuşlar ve Örnekler
- Combobox ve Otomatik Tamamlamayı Doğru Oluşturma
- Menü, Menubar ve Menü Düğmesi
- Treegrid ve Diğer Gelişmiş Kalıplar