treeitem

Wanneer gebruiken

In een role="tree", voor elk zichtbaar knooppunt. Als het knooppunt kinderen heeft, stel dan aria-expanded="true" of "false" in en omsluit of wijs een role="group" toe met de onderliggende treeitems. Als het knooppunt geen kinderen heeft, laat aria-expanded volledig weg (stel het NIET in op "false" voor een blad — dat kondigt “samengevouwen” aan terwijl er niets uitgevouwen kan worden).

Stel aria-level in (diepte op basis van 1), aria-posinset (positie tussen broederelementen, op basis van 1) en aria-setsize (totaal aantal broederelementen) op elk treeitem wanneer de visuele nesting niet uit de DOM-hiërarchie afgeleid kan worden.

Voor navigatie die eigenlijk “een lijst van links met geneste sublinks” is, is <nav> met geneste <ul> en <a> de betere keuze. Gebruik treeview alleen wanneer de ervaring een hiërarchische browser met één tab-stop is.

Toetsenbord- en focuscontract

Conform het APG-treeview-patroon:

• Tab verplaatst de focus naar de boom, naar het huidige treeitem; Tab verplaatst de focus er ook weer uit.
• Pijltjes Omhoog/Omlaag verplaatsen de focus tussen zichtbare knooppunten (samengevouwen kinderen worden overgeslagen).
• Pijltje Rechts: als het knooppunt samengevouwen is, uitvouwen; als uitgevouwen, naar het eerste kind gaan.
• Pijltje Links: als het knooppunt uitgevouwen is, samenvouwen; als samengevouwen, naar het bovenliggende knooppunt gaan.
• Home / End verplaatsen naar het eerste respectievelijk het laatste zichtbare knooppunt.
• Enter of Spatiebalk activeert (selecteert) het huidige item.
• Typeahead: het typen van een letter verplaatst de focus naar het volgende overeenkomende zichtbare knooppunt.

Veelgemaakte fouten

• aria-expanded="false" op een bladknooppunt — kondigt een schijnbaar uitvouwbare staat aan.
• Elk treeitem heeft tabindex="0". Het patroon is één tab-stop; alleen het gefocuste item heeft tabindex="0".
• Pijltje Rechts/Links gebruikt voor “volgend broederelement / vorig broederelement” in plaats van uitvouwen/samenvouwen.
• Onderliggende treeitems direct in de bovenliggende <li> geplaatst zonder een omsluitende role="group". Schermlezers kunnen de groep niet als eenheid aankondigen.
• Ontbrekend aria-level wanneer de DOM plat is (bijvoorbeeld bij een boom weergegeven met absolute positionering).

Voorbeeld

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