HTML
Menu ve menubar
ARIA menu ve menubar desenlerini öğrenirsin.
role="menu" ve role="menubar"
role="menu" dikey açılan bir menü içindir; role="menubar" yatay bir menü çubuğu için. Her ikisinde de öğeler role="menuitem", role="menuitemcheckbox" ya da role="menuitemradio" olur.
Bir uygulama menüsü (Dosya, Düzenle gibi) menubar olurken her başlığın altı menu olur. Klavyeyle ok tuşları menüde gezinir; Esc menüyü kapatır. Sıradan site menüleri için <nav> ve <ul> çoğu zaman yeterlidir; ARIA menu rollerini yalnızca uygulama benzeri davranış istendiğinde kullanın.
aria-haspopup ile alt menü
Bir menü öğesi alt menü açıyorsa aria-haspopup ile bildirilir. En açık değer "menu"'dür; ayrıca "true", "listbox", "tree", "grid", "dialog" da yazılabilir. Alt menü açıkken aria-expanded="true" eklenir.
Örnek: <button aria-haspopup="menu" aria-expanded="false">Dosya</button>. Bu düğme tıklanınca bir role="menu" açar. Ekran okuyucu 'alt menü var' diyerek kullanıcıyı hazırlar; klavye kullanıcıları da Alt tuşuyla menüye erişebilir.
menuitemcheckbox ve menuitemradio
Menü öğeleri bazen seçim de taşır. role="menuitemcheckbox" bir öğeyi açıp kapatır; durum aria-checked="true" ya da "false" ile bildirilir. role="menuitemradio" ise tek seçimlik gruplarda kullanılır; bir öğe seçilince diğerleri otomatik kapatılır.
Örnek bir görünüm menüsü: <li role="menuitemcheckbox" aria-checked="true">Karanlık tema</li>. Birden fazla seçenek tek seçimlikse menuitemradio kullanılır; örneğin görünüm boyutu Küçük/Orta/Büyük gibi. Bu roller menu ya da menubar içinde yer alır.
Uygulama Menubar ve alt menü iskeleti
Body içine bir <ul role="menubar"> ekle; içine iki <li role="menuitem"> koy. Birinci menuitem'a aria-haspopup="menu" ve aria-expanded="false" ver; metni Dosya olsun. Bu menuitem'ın içinde bir <ul role="menu"> aç; içinde bir <li role="menuitem">Yeni</li> olsun. İkinci üst menuitem'ın metni Yardım olsun.
Örnek çözümü göster
<body>
<ul role="menubar">
<li role="menuitem" aria-haspopup="menu" aria-expanded="false">Dosya
<ul role="menu">
<li role="menuitem">Yeni</li>
</ul>
</li>
<li role="menuitem">Yardım</li>
</ul>
</body>
Kendini test et
-
Yatay bir menü çubuğu için hangi role kullanılır?
- menubar
- menu
- navigation
- tablist
Cevabı göster
menubar — Doğru. role="menubar" yatay menü çubuğu için kullanılır.
-
aria-haspopup değerini yaz
<button aria-haspopup="____" aria-expanded="false">Dosya</button>
Cevabı göster
<button aria-haspopup="menu" aria-expanded="false">Dosya</button>
-
Rolü yeriyle eşleştir
- role="menu"
- Dikey menü
- role="menubar"
- Yatay menü çubuğu
- role="menuitem"
- Menü öğesi
- aria-haspopup="menu"
- Alt menü var
Sıradaki ders: Özet - Erişilebilir tabpanel
