Roll Widget

`treeitem`

Markerar ett element som ett objekt inuti ett träd. Ett treeitem kan vara expanderbart (förälder till fler treeitems) eller terminalt (ett löv). Använd bara när du bygger en hierarkisk navigator — filutforskare, organisationsschema, nästlade kategorier — som behöver piltangentsnavigering med ett enda tabbtegångspunkt.

När ska du använda detta

Inuti ett role="tree", för varje synlig nod. Om noden har underordnade, ange aria-expanded="true" eller "false" och innehåll eller äg ett role="group" som håller de underordnade treeitems. Om noden inte har underordnade, utelämna aria-expanded helt (ange det INTE till "false" på ett löv — det annonserar “komprimerad” utan något att expandera).

Ange aria-level (1-indexerat djup), aria-posinset (position bland syskon, 1-indexerat) och aria-setsize (totalt antal syskon) på varje treeitem när visuell nästling inte kan härledas från DOM-hierarkin.

För navigering som egentligen bara är “en lista med länkar och nästlade underlänkar” är <nav> med nästlade <ul> och <a> ett bättre val. Använd treeview bara när upplevelsen är en hierarkisk webbläsare med ett enda tabbtegångspunkt.

Tangentbord och fokuskontrakt

Enligt APG treeview-mönstret:

Tabb flyttar fokus in i trädet, till aktuellt treeitem; Tabb rör sig ut.
Upp/Ned-pilar flyttar fokus mellan synliga noder (hoppar över komprimerade underordnade).
Höger-pil: om noden är komprimerad, expandera den; om expanderad, flytta till första underordnade.
Vänster-pil: om noden är expanderad, komprimera den; om komprimerad, flytta till förälder.
Home / End rör sig till den första / sista synliga noden.
Enter eller Mellanslag aktiverar (väljer) aktuellt objekt.
Förifyllning: att skriva en bokstav flyttar fokus till nästa matchande synliga nod.

Vanliga fel

aria-expanded="false" på en lövnod — annonserar ett spöklikt komprimerbart tillstånd.
Varje treeitem har tabindex="0". Mönstret är ett enda tabbtegångspunkt; bara det fokuserade objektet bär tabindex="0".
Höger/Vänster-pil används för “nästa syskon / föregående syskon” snarare än expandera/komprimera.
Underordnade treeitems placerade direkt inuti förälderns <li> utan en inbäddande role="group". Skärmläsare kan inte annonsera gruppen som en enhet.
Saknad aria-level när DOM är platt (när trädet exempelvis renderas med absolut positionering).

Exempel

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