treeitem

Кога да се използва

Вътре в role="tree", за всеки видим възел. Ако възелът има деца, задайте aria-expanded="true" или "false" и съдържайте или притежавайте role="group" с дъщерните treeitems. Ако възелът няма деца, пропуснете aria-expanded напълно (НЕ го задавайте на "false" на лист — това обявява „свит” без нищо за разгъване).

Задайте aria-level (дълбочина с индексиране от 1), aria-posinset (позиция сред братските елементи, с индексиране от 1) и aria-setsize (общо братски елементи) на всеки treeitem, когато визуалното влагане не може да се изведе от DOM йерархията.

За навигация, която всъщност е просто „списък с връзки с вложени подвръзки”, <nav> с вложени <ul> и <a> е по-добрият избор. Използвайте treeview само когато изживяването е йерархичен браузър с единична спирка с таб.

Договор за клавиатура и фокус

Съгласно модела treeview на APG:

• Tab премества фокуса в дървото, върху текущия treeitem; Tab премества фокуса НАВЪН.
• Стрелките Нагоре/Надолу преместват фокуса между видимите възли (прескачайки свитите деца).
• Стрелка Надясно: ако възелът е свит, разгъне го; ако е разгънат, се премества към първото дете.
• Стрелка Наляво: ако възелът е разгънат, го свива; ако е свит, се премества към родителя.
• Home / End се преместват към първия / последния видим възел.
• Enter или Space активира (избира) текущия елемент.
• Typeahead: въвеждането на буква премества фокуса към следващия съответстващ видим възел.

Чести грешки

• aria-expanded="false" върху листов възел — обявява фантомно свиваемо състояние.
• Всеки treeitem има tabindex="0". Моделът е единична спирка с таб; само фокусираният елемент носи tabindex="0".
• Стрелките Надясно/Наляво, използвани за „следващ братски елемент / предишен братски елемент” вместо за разгъване/свиване.
• Дъщерни treeitems, поставени директно вътре в <li> на родителя без обвиващ role="group". Екранните четци не могат да обявят групата като цяло.
• Липсващ aria-level, когато DOM е плосък (когато дървото например е изобразено с абсолютно позициониране).

Пример

<ul role="tree" aria-label="Files">
  <li role="treeitem" aria-expanded="true" tabindex="0">
    Documents
    <ul role="group">
      <li role="treeitem" tabindex="-1">Resume.pdf</li>
      <li role="treeitem" aria-expanded="false" tabindex="-1">
        Photos
        <ul role="group">
          <li role="treeitem" tabindex="-1">2025-summer.jpg</li>
        </ul>
      </li>
    </ul>
  </li>
  <li role="treeitem" tabindex="-1">Downloads</li>
</ul>