tree

När ska du använda detta

För en äkta hierarkisk webbläsare: filsystem, organisationsschema, djupt nästlad taxonomi. Underordnade element är role="treeitem", grupperade vid behov av mellanliggande role="group"-wrappers.

Om ditt “tree” egentligen är en navigationsmeny med två eller tre nivåer av länkar, använd inte role="tree". Använd <nav> med nästlade <ul> och <a> i stället — Tabb + Enter är vad användarna förväntar sig för navigering; piltangentsnavigering i en webbplatsmeny är ovant och långsamt.

Ett tree MÅSTE ha ett tillgängligt namn. Ange aria-multiselectable="true" om flera treeitems kan väljas samtidigt.

Tangentbord och fokuskontrakt

Enligt APG treeview-mönstret:

• Tabb flyttar in i trädet, till det fokuserade (eller första) treeitem; Tabb rör sig ut.
• Upp/Ned-pilar flyttar fokus mellan synliga noder och hoppar över komprimerade underordnade.
• Höger-pil: om komprimerad, expandera; om expanderad, flytta till första underordnade.
• Vänster-pil: om expanderad, komprimera; om komprimerad, flytta till förälder.
• Home / End rör sig till den första / sista synliga noden.
• Enter eller Mellanslag väljer aktuellt treeitem.
• Förifyllning: att skriva bokstäver hoppar till matchande synliga noder.
• För träd med flerval: Shift+Pil utökar sammanhängande urval; Ctrl/Cmd+Klick växlar individuellt urval.

Använd ett rörligt tabindex: bara det aktuellt fokuserade treeitem har tabindex="0".

Vanliga fel

• Varje treeitem har tabindex="0". Mönstret är enstaka tabbtegångspunkt.
• Träd utan tillgängligt namn. Skärmläsarens landmärksnavigering har inget att annonsera.
• Underordnade treeitems inuti förälder utan en inbäddande role="group". Skärmläsare kan inte annonsera gruppen som en enhet.
• aria-expanded="false" på löv-treeitems — annonserar ett tomt komprimerbart tillstånd.
• Höger/Vänster-pilar används för nästa/föregående syskon i stället för expandera/komprimera.

Exempel

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