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

Sıradaki ders: Tabs ve accordion

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler