Grid ve tree
ARIA grid, tree ve treegrid desenlerini öğrenirsin.
role="grid" ile veri kılavuzu
role="grid", tablo benzeri ama etkileşimli veri kılavuzları içindir. Satırlar role="row", hücreler role="gridcell" olur. Klavyeyle hücreler arası ok tuşlarında gezilebilir; bu yüzden gerçek bir <table> yerine yalnızca etkileşim gerektiğinde grid kullanılır.
Yerel <table> statik veri için yeterliyse ARIA eklemeye gerek yok. Ama satırları sıralama, sürükleme ya da hücre içi düzenleme gibi etkileşimler varsa role="grid" devreye girer. aria-readonly ile salt okunur, aria-multiselectable ile çoklu seçim bildirilir.
role="tree" ve treeitem
role="tree", dallanıp budaklanan bir menü ya da dosya yapısı içindir. Her öğe role="treeitem" olur; alt dal ise role="group" içinde yer alır. Bir treeitem'ın alt dalı varsa aria-expanded ile açık/kapalı durumu bildirilir.
Düzey bildirmek için aria-level="1", "2" gibi değerler yazılır; kök 1'dir. <ul role="tree"><li role="treeitem" aria-level="1">Satışlar</li></ul> örneğinde tek düzeyli bir ağaç kökü görülür.
treegrid: hem ağaç hem tablo
role="treegrid", ağaç menü ile tabloyu birleştirir. Her satır hem genişleyip daralan bir dal hem de hücrelere sahip olur; dosya yöneticileri ya da proje panoları bunu kullanır. Satırlar role="row", hücreler role="gridcell"; üst satıra bağlamak için aria-owns ya da iç içe role="group" kullanılır.
Bu rol karmaşıktır; yalnızca gerçekten gerekmedikçe tercih edin. Çoğu durumda bir <table> artı birkaç <details> aynı işi daha az hatayla götürür.
Uygulama İki düzeyli bir ağaç yaz
Body içine bir <ul role="tree"> ekle. İçine iki <li role="treeitem"> koy. Birinci treeitem'a aria-expanded="true" ver ve içine bir <ul role="group"> aç; içinde bir alt <li role="treeitem">Alt dal</li> olsun. Birinci üst treeitem'ın metni Belgeler, ikincinin metni Dosyalar olsun.
Örnek çözümü göster
<body>
<ul role="tree">
<li role="treeitem" aria-expanded="true">Belgeler
<ul role="group">
<li role="treeitem">Alt dal</li>
</ul>
</li>
<li role="treeitem">Dosyalar</li>
</ul>
</body>Kendini test et
-
Hiyerarşik bir menü için hangi role kullanılır?
- grid
- table
- tree
- list
Cevabı göster
tree — Doğru. role="tree" ağaç yapısındaki hiyerarşik menüler içindir.
-
tree rolünü yaz
<ul role="____"> <li role="treeitem" aria-level="1">Satışlar</li> </ul>Cevabı göster
<ul role="tree"> <li role="treeitem" aria-level="1">Satışlar</li> </ul> -
Rolü senaryosuyla eşleştir
- role="grid"
- Etkileşimli tablo
- role="tree"
- Hiyerarşik menü
- role="treegrid"
- Ağaç + tablo hibrit
- role="row"
- Bir satır