tree

Wanneer gebruiken

Voor een echte hiërarchische browser: bestandssysteem, organigram, diep geneste taxonomie. Onderliggende elementen zijn role="treeitem", zo nodig gegroepeerd door tussenliggende role="group"-wrappers.

Als de “boom” eigenlijk een navigatiemenu is van twee of drie niveaus met links, gebruik dan geen role="tree". Gebruik <nav> met geneste <ul> en <a> — Tab en Enter zijn wat gebruikers verwachten bij navigatie; pijltjestoetsnavigatie in een sitemenu is onbekend en traag.

Een boom MOET een toegankelijke naam hebben. Stel aria-multiselectable="true" in als meerdere treeitems tegelijk selecteerbaar zijn.

Toetsenbord- en focuscontract

Conform het APG-treeview-patroon:

• Tab verplaatst de focus naar de boom, naar het gefocuste (of eerste) treeitem; Tab verplaatst de focus er ook weer uit.
• Pijltjes Omhoog/Omlaag verplaatsen de focus tussen zichtbare knooppunten, waarbij samengevouwen kinderen worden overgeslagen.
• Pijltje Rechts: bij samengevouwen knooppunt, uitvouwen; bij uitgevouwen knooppunt, naar het eerste kind gaan.
• Pijltje Links: bij uitgevouwen knooppunt, samenvouwen; bij samengevouwen knooppunt, naar het bovenliggende knooppunt gaan.
• Home / End verplaatsen naar het eerste respectievelijk het laatste zichtbare knooppunt.
• Enter of Spatiebalk selecteert het huidige treeitem.
• Typeahead: het typen van letters springt naar overeenkomende zichtbare knooppunten.
• Voor bomen met meervoudige selectie: Shift+Pijl breidt de aaneengesloten selectie uit; Ctrl/Cmd+Klik schakelt individuele selectie in.

Gebruik een roving tabindex: alleen het momenteel gefocuste treeitem heeft tabindex="0".

Veelgemaakte fouten

• Elk treeitem met tabindex="0". Het patroon is één tab-stop.
• Boom zonder toegankelijke naam. Schermlezernavigatie via oriëntatiepunten heeft niets om aan te kondigen.
• Onderliggende treeitems in de bovenliggende <li> zonder een omsluitende role="group". Schermlezers kunnen de groep niet als eenheid aankondigen.
• aria-expanded="false" op blad-treeitems — kondigt een lege uitvouwbare staat aan.
• Pijltjes Rechts/Links gebruikt voor volgend/vorig broerderelement in plaats van uitvouwen/samenvouwen.

Voorbeeld

<ul role="tree" aria-label="Project files">
  <li role="treeitem" aria-expanded="true" tabindex="0">
    src
    <ul role="group">
      <li role="treeitem" tabindex="-1">index.ts</li>
      <li role="treeitem" aria-expanded="false" tabindex="-1">
        components
        <ul role="group">
          <li role="treeitem" tabindex="-1">Button.tsx</li>
        </ul>
      </li>
    </ul>
  </li>
  <li role="treeitem" tabindex="-1">README.md</li>
</ul>