Rolle Widget

`treeitem`

Markerer et element som ét punkt i et træ. Et treeitem kan udvides (overordnet for flere treeitems) eller være et bladpunkt. Brug kun ved opbygning af en hierarkisk navigator — filstifinder, organisationsdiagram, indlejrede kategorier — der kræver piletastersnavigation med ét tab-stop.

Hvornår skal det bruges

Inde i et role="tree", for hver synlig node. Hvis noden har underordnede elementer, sæt aria-expanded="true" eller "false" og indeholder eller ej et role="group" med de underordnede treeitems. Hvis noden ikke har underordnede elementer, udelad aria-expanded helt (sæt den IKKE til "false" på et bladpunkt — det annoncerer “sammenfoldet” uden noget at udvide).

Sæt aria-level (1-indekseret dybde), aria-posinset (position blandt søskende, 1-indekseret) og aria-setsize (samlet antal søskende) på hvert treeitem, når den visuelle indrykning ikke kan udledes af DOM-hierarkiet.

For navigation der reelt blot er “en liste af links med indlejrede underlinks”, er <nav> med indlejrede <ul> og <a> det bedre valg. Brug treeview kun når oplevelsen er en hierarkisk browser med ét tab-stop.

Tastatur- og fokuskontrakt

Ifølge APG treeview-mønstret:

Tab flytter fokus ind i træet til det aktuelle treeitem; Tab flytter fokus UD.
Op/ned piletaster flytter fokus mellem synlige noder (springer over sammenfoldede underordnede).
Højre pil: hvis noden er sammenfoldet, udvid den; hvis udvidet, flyt til første underordnede.
Venstre pil: hvis noden er udvidet, sammenfold den; hvis sammenfoldet, flyt til overordnet.
Home / End flytter til første / sidste synlige node.
Enter eller mellemrum aktiverer (vælger) det aktuelle element.
Bogstavssøgning: et bogstav flytter fokus til næste matchende synlige node.

Typiske fejl

aria-expanded="false" på et bladpunkt — annoncerer en usynlig sammenfoldstilstand.
Hvert treeitem har tabindex="0". Mønstret er ét tab-stop; kun det fokuserede element bærer tabindex="0".
Højre/venstre pil bruges til “næste søskende / forrige søskende” i stedet for udvid/sammenfold.
Underordnede treeitems placeret direkte i den overordnede <li> uden et omsluttende role="group". Skærmlæsere kan ikke annoncere gruppen som en enhed.
Manglende aria-level når DOM er flad (fx når træet renderes med absolut positionering).

Eksempel

<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>